adam/mc-webui
1
0
Fork 0
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-08-06 08:43:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(menu): reorganize menu into logical sections + larger touch targets

Browse Source 
Reorganize menu from 2 sections (Network Commands, Configuration) into 4:
- Messages (top, no header) - daily actions
- Network - advert commands
- Tools - Map, Console
- System - Device Info, System Log, Backup, Settings placeholder

Increase navbar button/select touch targets (min 40px) for mobile usability.
Widen offcanvas menu from 280px to 300px.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-03-21 07:55:59 +01:00
parent c48666843a
commit 0108ea9149
2 changed files with 52 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/style.css
+18 -1
View File
@@ -245,9 +245,26 @@ main {
font-size: 1rem;
}
/* Navbar touch targets - larger for mobile */
.navbar-touch-btn {
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
padding: 0.35rem 0.6rem;
}
.navbar-touch-select {
min-height: 40px;
font-size: 1rem;
padding: 0.35rem 2rem 0.35rem 0.6rem;
}
/* Offcanvas menu styling */
.offcanvas {
width: 280px !important;
width: 300px !important;
}
.offcanvas-body .list-group-item {
app/templates/base.html
+34 -21
View File
@@ -38,14 +38,14 @@
{% endif %}
</span>
<div class="d-flex align-items-center gap-2">
<div id="notificationBell" class="btn btn-outline-light btn-sm position-relative" style="cursor: pointer;" onclick="markAllChannelsRead()" title="Mark all as read">
<div id="notificationBell" class="btn btn-outline-light position-relative navbar-touch-btn" style="cursor: pointer;" onclick="markAllChannelsRead()" title="Mark all as read">
<i class="bi bi-bell"></i>
</div>
<select id="channelSelector" class="form-select form-select-sm" style="width: auto; min-width: 100px;" title="Select channel">
<select id="channelSelector" class="form-select navbar-touch-select" style="width: auto; min-width: 100px;" title="Select channel">
<option value="0">Public</option>
<!-- Channels loaded dynamically via JavaScript -->
</select>
<button class="btn btn-outline-light btn-sm" data-bs-toggle="offcanvas" data-bs-target="#mainMenu" title="Menu">
<button class="btn btn-outline-light navbar-touch-btn" data-bs-toggle="offcanvas" data-bs-target="#mainMenu" title="Menu">
<i class="bi bi-list"></i>
</button>
</div>
@@ -72,6 +72,7 @@
</div>
<div class="offcanvas-body">
<div class="list-group list-group-flush">
<!-- Messages -->
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" id="refreshBtn">
<i class="bi bi-arrow-clockwise" style="font-size: 1.5rem;"></i>
<span>Refresh Messages</span>
@@ -80,7 +81,6 @@
<i class="bi bi-broadcast-pin" style="font-size: 1.5rem;"></i>
<span>Manage Channels</span>
</button>
<!-- Notifications Toggle -->
<button id="notificationsToggle" class="list-group-item list-group-item-action d-flex align-items-center gap-3" type="button">
<i class="bi bi-bell" style="font-size: 1.5rem;"></i>
<div class="flex-grow-1">
@@ -104,9 +104,9 @@
</select>
</div>
<!-- Network Commands Section -->
<!-- Network -->
<div class="list-group-item py-2 mt-2">
<small class="text-muted fw-bold text-uppercase">Network Commands</small>
<small class="text-muted fw-bold text-uppercase">Network</small>
</div>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" id="advertBtn" title="Send single advertisement (recommended for normal operation)">
<i class="bi bi-megaphone" style="font-size: 1.5rem;"></i>
@@ -123,23 +123,10 @@
</div>
</button>
<!-- Tools -->
<div class="list-group-item py-2 mt-2">
<small class="text-muted fw-bold text-uppercase">Configuration</small>
<small class="text-muted fw-bold text-uppercase">Tools</small>
</div>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#consoleModal" data-bs-dismiss="offcanvas">
<i class="bi bi-terminal" style="font-size: 1.5rem;"></i>
<div>
<span>Console</span>
<small class="d-block text-muted">Direct meshcli commands</small>
</div>
</button>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#logsModal" data-bs-dismiss="offcanvas">
<i class="bi bi-journal-text" style="font-size: 1.5rem;"></i>
<div>
<span>System Log</span>
<small class="d-block text-muted">Real-time application logs</small>
</div>
</button>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3"
id="mapBtn" title="Show all contacts with GPS on map">
<i class="bi bi-map" style="font-size: 1.5rem;"></i>
@@ -148,10 +135,29 @@
<small class="d-block text-muted">All contacts with GPS</small>
</div>
</button>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#consoleModal" data-bs-dismiss="offcanvas">
<i class="bi bi-terminal" style="font-size: 1.5rem;"></i>
<div>
<span>Console</span>
<small class="d-block text-muted">Direct meshcli commands</small>
</div>
</button>
<!-- System -->
<div class="list-group-item py-2 mt-2">
<small class="text-muted fw-bold text-uppercase">System</small>
</div>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#deviceInfoModal" data-bs-dismiss="offcanvas">
<i class="bi bi-cpu" style="font-size: 1.5rem;"></i>
<span>Device Info</span>
</button>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#logsModal" data-bs-dismiss="offcanvas">
<i class="bi bi-journal-text" style="font-size: 1.5rem;"></i>
<div>
<span>System Log</span>
<small class="d-block text-muted">Real-time application logs</small>
</div>
</button>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#backupModal" data-bs-dismiss="offcanvas">
<i class="bi bi-database-down" style="font-size: 1.5rem;"></i>
<div>
@@ -159,6 +165,13 @@
<small class="d-block text-muted">Database backup & restore</small>
</div>
</button>
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" id="settingsBtn" disabled>
<i class="bi bi-gear" style="font-size: 1.5rem;"></i>
<div>
<span>Settings</span>
<small class="d-block text-muted">Coming soon</small>
</div>
</button>
</div>
</div>
</div>