jordanwalster/imf-sms-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: shift pages to bottom toolbar on mobile

Browse Source
This commit is contained in:
Jordan Walster
2026-06-08 23:57:48 +01:00
parent b2b92c2311
commit 8834feb5a1
8 changed files with 240 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin.html
+32 -44
View File
@@ -14,51 +14,13 @@
<body>
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">Admin</span>
</div>
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<span style="font-weight:600;font-size:0.95rem;">Admin</span>
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<span>SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
</div>
<!-- ─── Desktop sidebar ─── -->
<!-- ─── Desktop sidebar ─── -->
<div class="sidebar">
<div class="brand">
<span style="margin: 0 auto;">IMFestival SMS Dashboard</span>
@@ -375,6 +337,32 @@
loadAdmin();
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') loadAdmin(); });
</script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
<a href="attendees.html" class="bottom-nav-item">
<i class="fa-solid fa-users"></i>
<span>Attendees</span>
</a>
<a href="templates.html" class="bottom-nav-item">
<i class="fa-solid fa-comment-sms"></i>
<span>Templates</span>
</a>
<a href="schedule.html" class="bottom-nav-item">
<i class="fa-solid fa-calendar-days"></i>
<span>Schedule</span>
</a>
<a href="delivery-log.html" class="bottom-nav-item">
<i class="fa-solid fa-list-check"></i>
<span>Log</span>
</a>
<a href="admin.html" class="bottom-nav-item active admin-nav-link d-none">
<i class="fa-solid fa-user-shield"></i>
<span>Admin</span>
</a>
</nav>
</body>
</html>
web/assets/css/dashboard.css
+40 -4
View File
@@ -112,6 +112,41 @@ body {
opacity: 1;
}
/* ── Bottom nav (mobile) ── */
.bottom-nav {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--bg-surface);
border-top: 1px solid var(--border);
z-index: 1040;
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
padding: 0.55rem 0.25rem;
color: var(--text-muted);
text-decoration: none;
font-size: 0.68rem;
min-width: 0;
transition: color 0.15s;
}
.bottom-nav a i {
font-size: 1.15rem;
}
.bottom-nav a.active,
.bottom-nav a:hover {
color: var(--accent);
}
/* ── Top bar (mobile) ── */
.topbar {
display: none;
@@ -408,13 +443,14 @@ body {
/* ── Responsive ── */
@media (max-width: 767.98px) {
.sidebar { display: none; }
.topbar { display: flex; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.main {
.sidebar { display: none; }
.bottom-nav { display: flex; }
.topbar { display: flex; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.main {
margin-left: 0;
padding-top: 1rem;
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
padding-bottom: max(2rem, env(safe-area-inset-bottom));
padding-bottom: calc(4rem + max(0.5rem, env(safe-area-inset-bottom)));
}
}
web/attendees.html
+32 -45
View File
@@ -16,52 +16,13 @@
<body>
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">Attendees</span>
</div>
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<span style="font-weight:600;font-size:0.95rem;">Attendees</span>
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<img src="assets/img/logo.png" alt="Logo" style="width:120px;height:auto;">
<span>SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom active">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
</div>
<!-- ─── Desktop sidebar ─── -->
<!-- ─── Desktop sidebar ─── -->
<div class="sidebar">
<div class="brand">
<span style="margin: 0 auto;">IMFestival SMS Dashboard</span>
@@ -765,6 +726,32 @@
checkAuth();
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
</script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
<a href="attendees.html" class="bottom-nav-item active">
<i class="fa-solid fa-users"></i>
<span>Attendees</span>
</a>
<a href="templates.html" class="bottom-nav-item">
<i class="fa-solid fa-comment-sms"></i>
<span>Templates</span>
</a>
<a href="schedule.html" class="bottom-nav-item">
<i class="fa-solid fa-calendar-days"></i>
<span>Schedule</span>
</a>
<a href="delivery-log.html" class="bottom-nav-item">
<i class="fa-solid fa-list-check"></i>
<span>Log</span>
</a>
<a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
<i class="fa-solid fa-user-shield"></i>
<span>Admin</span>
</a>
</nav>
</body>
</html>
web/delivery-log.html
+27 -38
View File
@@ -17,45 +17,8 @@
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">Delivery Log</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<span>IMFestival SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom active">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
</div>
<!-- ─── Desktop sidebar ─── -->
@@ -274,6 +237,32 @@
checkAuth();
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
</script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
<a href="attendees.html" class="bottom-nav-item">
<i class="fa-solid fa-users"></i>
<span>Attendees</span>
</a>
<a href="templates.html" class="bottom-nav-item">
<i class="fa-solid fa-comment-sms"></i>
<span>Templates</span>
</a>
<a href="schedule.html" class="bottom-nav-item">
<i class="fa-solid fa-calendar-days"></i>
<span>Schedule</span>
</a>
<a href="delivery-log.html" class="bottom-nav-item active">
<i class="fa-solid fa-list-check"></i>
<span>Log</span>
</a>
<a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
<i class="fa-solid fa-user-shield"></i>
<span>Admin</span>
</a>
</nav>
</body>
</html>
web/index.html
+27 -38
View File
@@ -16,45 +16,8 @@
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">SMS Dashboard</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<span>IMFestival SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom active">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
</div>
<!-- ─── Desktop sidebar ─── -->
@@ -355,6 +318,32 @@
checkAuth();
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
</script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item active">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
<a href="attendees.html" class="bottom-nav-item">
<i class="fa-solid fa-users"></i>
<span>Attendees</span>
</a>
<a href="templates.html" class="bottom-nav-item">
<i class="fa-solid fa-comment-sms"></i>
<span>Templates</span>
</a>
<a href="schedule.html" class="bottom-nav-item">
<i class="fa-solid fa-calendar-days"></i>
<span>Schedule</span>
</a>
<a href="delivery-log.html" class="bottom-nav-item">
<i class="fa-solid fa-list-check"></i>
<span>Log</span>
</a>
<a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
<i class="fa-solid fa-user-shield"></i>
<span>Admin</span>
</a>
</nav>
</body>
</html>
web/schedule.html
+27 -38
View File
@@ -31,45 +31,8 @@
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">Schedule</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<span>IMFestival SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom active">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
</div>
<!-- ─── Desktop sidebar ─── -->
@@ -532,6 +495,32 @@
}
checkApiKey();
</script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
<a href="attendees.html" class="bottom-nav-item">
<i class="fa-solid fa-users"></i>
<span>Attendees</span>
</a>
<a href="templates.html" class="bottom-nav-item">
<i class="fa-solid fa-comment-sms"></i>
<span>Templates</span>
</a>
<a href="schedule.html" class="bottom-nav-item active">
<i class="fa-solid fa-calendar-days"></i>
<span>Schedule</span>
</a>
<a href="delivery-log.html" class="bottom-nav-item">
<i class="fa-solid fa-list-check"></i>
<span>Log</span>
</a>
<a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
<i class="fa-solid fa-user-shield"></i>
<span>Admin</span>
</a>
</nav>
</body>
</html>
web/send-now.html
+28 -39
View File
@@ -17,45 +17,8 @@
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">SMS Dashboard</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<span>IMFestival SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
<span style="font-weight:600;font-size:0.95rem;">Send SMS Now</span>
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
</div>
<!-- ─── Desktop sidebar ─── -->
@@ -401,6 +364,32 @@
}
checkApiKey();
</script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
<a href="attendees.html" class="bottom-nav-item">
<i class="fa-solid fa-users"></i>
<span>Attendees</span>
</a>
<a href="templates.html" class="bottom-nav-item">
<i class="fa-solid fa-comment-sms"></i>
<span>Templates</span>
</a>
<a href="schedule.html" class="bottom-nav-item">
<i class="fa-solid fa-calendar-days"></i>
<span>Schedule</span>
</a>
<a href="delivery-log.html" class="bottom-nav-item">
<i class="fa-solid fa-list-check"></i>
<span>Log</span>
</a>
<a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
<i class="fa-solid fa-user-shield"></i>
<span>Admin</span>
</a>
</nav>
</body>
</html>
web/templates.html
+27 -38
View File
@@ -17,45 +17,8 @@
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">SMS Templates</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<span>SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom active">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
</div>
<!-- ─── Desktop sidebar ─── -->
@@ -312,6 +275,32 @@
checkAuth();
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
</script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
<a href="attendees.html" class="bottom-nav-item">
<i class="fa-solid fa-users"></i>
<span>Attendees</span>
</a>
<a href="templates.html" class="bottom-nav-item active">
<i class="fa-solid fa-comment-sms"></i>
<span>Templates</span>
</a>
<a href="schedule.html" class="bottom-nav-item">
<i class="fa-solid fa-calendar-days"></i>
<span>Schedule</span>
</a>
<a href="delivery-log.html" class="bottom-nav-item">
<i class="fa-solid fa-list-check"></i>
<span>Log</span>
</a>
<a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
<i class="fa-solid fa-user-shield"></i>
<span>Admin</span>
</a>
</nav>
</body>
</html>