refactor(nav): collapse fleet/device pages into one sidebar entry with internal tab strip
The sidebar had 10 entries with 5 of them (Devices, Seismographs, Sound
Level Meters, Modems, Pair Devices) all about the physical fleet plus
SFM Events as a debug surface. Operators kept asking "where do I find
BE11529?" without knowing whether it was a seismograph / SLM / modem.
This collapses those 5+1 into a single "Fleet" sidebar entry that opens
into a unified tab strip across the top of the four device pages. Each
page keeps its existing custom layout (seismograph-specific
calibration/deployment columns, SLM live-status panel, modem pairing
view, all-devices roster). The strip just provides the navigation +
the "Pair Devices" button as an action.
Sidebar before (10 items):
Dashboard · Devices · Seismographs · SFM Events · Sound Level Meters
Modems · Pair Devices · Projects · Job Planner · Settings
Sidebar after (5 items):
Dashboard · Fleet · Projects · Job Planner · Settings
Changes:
- templates/partials/fleet_tab_strip.html (new): the shared tab strip.
Auto-detects the active tab from request.url.path. 4 tabs
(Seismographs / Sound Level Meters / Modems / All Devices) plus a
"Pair Devices" button on the right.
- templates/{seismographs,sound_level_meters,modems,roster}.html: added
{% include 'partials/fleet_tab_strip.html' %} as the first thing
inside the content block. No other changes to those templates'
existing layouts.
- templates/base.html: replaced the 6 device-related sidebar links with
one "Fleet" link to /seismographs. The Fleet entry is highlighted
when the current URL is any of /seismographs, /sound-level-meters,
/modems, /roster, /pair-devices, /unit/*, or /slm/*.
- templates/settings.html: SFM Events moved out of the main nav into a
new "SFM Admin" card under Settings → Developer. Daily event
browsing already lives on project / location / unit pages (Phases
1+2+3); the standalone /sfm page is now admin / cross-project debug
surface only.
URLs unchanged — all bookmarks / deep links still work. /sfm still
serves the standalone page, it's just no longer in the main nav.
Mobile bottom-nav unaffected.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
{# Fleet tab strip.
|
||||
|
||||
Shared header for every page under the "Fleet" sidebar section. Each
|
||||
underlying page (/roster, /seismographs, /sound-level-meters, /modems)
|
||||
keeps its own custom layout — this partial just provides the tab
|
||||
navigation across the top so they feel like one logical area.
|
||||
|
||||
The active tab is detected from request.url.path so deep links work.
|
||||
|
||||
Usage at top of any Fleet-section template:
|
||||
{% include 'partials/fleet_tab_strip.html' %}
|
||||
#}
|
||||
{% set _path = request.url.path %}
|
||||
<div class="mb-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-end justify-between flex-wrap gap-3 mb-0">
|
||||
<nav class="flex gap-1">
|
||||
<a href="/seismographs"
|
||||
class="px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors {% if _path == '/seismographs' %}border-seismo-orange text-seismo-orange{% else %}border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600{% endif %}">
|
||||
<svg class="w-4 h-4 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||||
</svg>
|
||||
Seismographs
|
||||
</a>
|
||||
<a href="/sound-level-meters"
|
||||
class="px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors {% if _path == '/sound-level-meters' %}border-seismo-orange text-seismo-orange{% else %}border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600{% endif %}">
|
||||
<svg class="w-4 h-4 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M12 6v12M9 8.464a5 5 0 000 7.072"/>
|
||||
</svg>
|
||||
Sound Level Meters
|
||||
</a>
|
||||
<a href="/modems"
|
||||
class="px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors {% if _path == '/modems' %}border-seismo-orange text-seismo-orange{% else %}border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600{% endif %}">
|
||||
<svg class="w-4 h-4 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/>
|
||||
</svg>
|
||||
Modems
|
||||
</a>
|
||||
<a href="/roster"
|
||||
class="px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors {% if _path == '/roster' %}border-seismo-orange text-seismo-orange{% else %}border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600{% endif %}">
|
||||
<svg class="w-4 h-4 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
|
||||
</svg>
|
||||
All Devices
|
||||
</a>
|
||||
</nav>
|
||||
<a href="/pair-devices"
|
||||
class="mb-1 inline-flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
|
||||
</svg>
|
||||
Pair Devices
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user