touch device libraries

Lucas

unread,

Jan 14, 2026, 5:00:44 AM (7 days ago) Jan 14

to py4web

hey one and all,

I been using web2py and now py4web for over 13 years. omg, I'm old. I'm so used to developing for desktops that now I'd like to develop an app for touch devices because teens have those things strapped to their hips.

I do not want to develop separate apps for so many reason. so, I'm asking what are excellent javascript libraries that I can develop in and serve out with py4web that are well tailored for touch devices, especially the smaller screen no keyboard devices like cell phones???

alright, thank you in advance, Lucas

Lucas

unread,

Jan 14, 2026, 5:09:32 AM (7 days ago) Jan 14

to py4web

maybe I should be a little more specific. I'd like to have a chat box on the right of the screen and an annotations box on the left, both overlaid with the main page of mostly text behind for reading and discussion through, again, the group chat on the left and highlighting and annotating on the right. sort of like an online interactive group study on the cell phone. it'd be somewhat like a FB page. but without the monetized ad crap all over the place. and by left and right, I don't mean that too literally, but they can be like tabs or accordion something of that nature.

Alan Etkin

unread,

Jan 15, 2026, 6:32:17 AM (6 days ago) Jan 15

to py4web

I belive py4web default UI has mobile support, so if you make your py4web app It should not be very hard to configure it for small screen.

Massimo DiPierro

unread,

Jan 17, 2026, 10:55:51 PM (4 days ago) Jan 17

to py4web

This is really an HTML/CSS issue, there is nothing specific in py4web. I asked chatGPT to build me a layout.html for small devices and it came up with the following (I did not try it)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[[=globals().get('title','') or 'py4web app']]</title>

[[block page_head]]
<style>
/* Mobile-first, minimalist responsive layout */
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
a { color: inherit; }
.wrap { max-width: 960px; margin: 0 auto; padding: 12px; }

header, main, aside, footer {
border: 1px solid #ddd;
border-radius: 10px;
padding: 12px;
}

header {
display: grid;
gap: 12px;
}

.brand { font-weight: 700; }
nav a {
display: inline-block;
padding: 8px 10px;
text-decoration: none;
border: 1px solid #ddd;
border-radius: 999px;
margin: 4px 6px 0 0;
}

.grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
img { max-width: 100%; height: auto; display: block; border-radius: 10px; }

/* Wider screens: header becomes a row, and we get a sidebar */
@media (min-width: 720px) {
header { grid-auto-flow: column; align-items: center; justify-content: space-between; }
.grid { grid-template-columns: 2fr 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
</style>
[[end]]
</head>

<body>
<div class="wrap">
<header>
<div class="brand">
[[=globals().get('app_name','My App')]]
</div>

<nav>
[[block page_menu]]

<a href="[[=URL('index')]]">Home</a>
[[end]]
</nav>
</header>

<div class="grid" style="margin-top:12px;">
<main>
[[block content]][[end]]
</main>

<aside>
[[block sidebar]]

[[=globals().get('sidebar','')]]
[[end]]
</aside>
</div>

<footer style="margin-top:12px;">
<small>© [[=request.now.year]]</small>
</footer>
</div>

[[block page_scripts]][[end]]
</body>
</html>

Reply all

Reply to author

Forward