tmdinosaurcenter/kiosk-guestbook
1
0
Fork 0
mirror of https://github.com/tmdinosaurcenter/kiosk-guestbook.git synced 2026-06-04 01:18:12 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: add PWA support and mobile admin card layout

Browse Source 
All pages: manifest link, apple-mobile-web-app meta tags, theme-color,
viewport-fit=cover, overscroll-behavior:none, safe-area padding, 16px
input font-size to prevent iOS zoom, SW registration.

admin.html: card-per-entry layout on small screens (d-md-none) with
name, location, timestamp, newsletter status, email, comment, and
delete button. Desktop table unchanged (d-none d-md-block).
This commit is contained in:
Steve Dogiakos
2026-03-29 19:20:29 -06:00
parent 3057201102
commit 047f57513d
4 changed files with 177 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html.template
+36 -1
View File
@@ -3,9 +3,17 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>${SITE_TITLE}</title>
<!-- PWA -->
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="apple-touch-icon" href="/static/images/logo.png" />
<meta name="theme-color" content="#3a9cb8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="${SITE_TITLE}" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Fonts -->
@@ -20,6 +28,23 @@
font-weight: 700;
}
/* PWA / iOS kiosk */
html, body {
height: 100%;
overscroll-behavior: none;
}
body {
padding-bottom: env(safe-area-inset-bottom);
}
/* Prevent iOS auto-zoom on input focus (requires >= 16px) */
input.form-control,
textarea.form-control,
select.form-select {
font-size: 16px !important;
}
/* Scrolling marquee styles */
.scrolling-wrapper {
overflow: hidden;
@@ -29,6 +54,7 @@
width: 100%;
background-color: #f8f9fa;
border-top: 1px solid #dee2e6;
padding-bottom: env(safe-area-inset-bottom);
}
.scrolling-content {
@@ -172,6 +198,15 @@
<!-- Bootstrap JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<!-- Service worker registration -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js', { scope: '/' });
});
}
</script>
</body>
</html>