Skip to content

Commit 125be54

Browse files
itsDNNSitsDNNS
committed
feat: customize navigation and mobile bottom bar
1 parent 863fdc6 commit 125be54

File tree

8 files changed

+704
-139
lines changed

8 files changed

+704
-139
lines changed

‎app/i18n/de.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@
1616
"month_trend": "Monatstrend",
1717
"signal_trends": "Signaltrends",
1818
"settings": "Einstellungen",
19+
"nav_customize": "Navigation anpassen",
20+
"nav_customize_desc": "Ordne Ansichten pro Bereich neu an und hefte die wichtigsten an die mobile Leiste an.",
21+
"nav_reset": "Zurucksetzen",
22+
"nav_done": "Fertig",
23+
"nav_more": "Mehr",
24+
"nav_pinned": "An mobile Leiste angeheftet",
25+
"nav_move_up": "Nach oben verschieben",
26+
"nav_move_down": "Nach unten verschieben",
1927
"reference_values": "Richtwerte",
2028
"last_update": "Letztes Update",
2129
"health_good": "Gut",

‎app/i18n/en.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@
1616
"month_trend": "Month Trend",
1717
"signal_trends": "Signal Trends",
1818
"settings": "Settings",
19+
"nav_customize": "Customize Navigation",
20+
"nav_customize_desc": "Reorder views in each section and pin the ones you want in the mobile bottom bar.",
21+
"nav_reset": "Reset",
22+
"nav_done": "Done",
23+
"nav_more": "More",
24+
"nav_pinned": "Pinned to bottom bar",
25+
"nav_move_up": "Move up",
26+
"nav_move_down": "Move down",
1927
"reference_values": "Reference Values",
2028
"last_update": "Last Update",
2129
"health_good": "Good",

‎app/i18n/es.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@
1616
"month_trend": "Tendencia mensual",
1717
"signal_trends": "Tendencias de señal",
1818
"settings": "Configuración",
19+
"nav_customize": "Personalizar navegación",
20+
"nav_customize_desc": "Reordena las vistas dentro de cada sección y fija las que quieras en la barra móvil.",
21+
"nav_reset": "Restablecer",
22+
"nav_done": "Listo",
23+
"nav_more": "Más",
24+
"nav_pinned": "Fijado en la barra móvil",
25+
"nav_move_up": "Mover arriba",
26+
"nav_move_down": "Mover abajo",
1927
"reference_values": "Valores de referencia",
2028
"last_update": "Última actualización",
2129
"health_good": "Bueno",

‎app/i18n/fr.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@
1616
"month_trend": "Tendance du mois",
1717
"signal_trends": "Tendances signal",
1818
"settings": "Paramètres",
19+
"nav_customize": "Personnaliser la navigation",
20+
"nav_customize_desc": "Réorganisez les vues dans chaque section et épinglez celles que vous voulez dans la barre mobile.",
21+
"nav_reset": "Réinitialiser",
22+
"nav_done": "Terminé",
23+
"nav_more": "Plus",
24+
"nav_pinned": "Épinglé à la barre mobile",
25+
"nav_move_up": "Monter",
26+
"nav_move_down": "Descendre",
1927
"reference_values": "Valeurs de référence",
2028
"last_update": "Dernière mise à jour",
2129
"health_good": "Bon",

‎app/static/css/main.css‎

Lines changed: 155 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,154 @@
166166
text-align: center;
167167
}
168168

169+
.sidebar-customize-btn {
170+
width: 100%;
171+
display: flex;
172+
align-items: center;
173+
justify-content: center;
174+
gap: 8px;
175+
margin-bottom: var(--space-sm);
176+
min-height: 44px;
177+
padding: 10px 14px;
178+
border-radius: var(--radius-pill);
179+
border: 1px solid var(--glass-border);
180+
background: color-mix(in srgb, var(--surface-elevated, var(--surface)) 90%, transparent);
181+
color: var(--text-secondary);
182+
font: inherit;
183+
font-size: 0.82rem;
184+
font-weight: 600;
185+
cursor: pointer;
186+
transition: all 0.2s ease;
187+
}
188+
.sidebar-customize-btn:hover {
189+
color: var(--text-primary);
190+
border-color: color-mix(in srgb, var(--accent) 25%, var(--glass-border));
191+
background: color-mix(in srgb, var(--accent) 10%, var(--surface-elevated, var(--surface)));
192+
}
193+
.sidebar-customize-btn svg {
194+
width: 16px;
195+
height: 16px;
196+
}
197+
198+
.nav-customize-modal {
199+
max-width: 760px;
200+
}
201+
202+
.nav-customize-sections {
203+
display: grid;
204+
gap: var(--space-md);
205+
}
206+
207+
.nav-customize-section {
208+
border: 1px solid var(--glass-border);
209+
border-radius: var(--radius-md);
210+
background: color-mix(in srgb, var(--surface) 94%, transparent);
211+
overflow: hidden;
212+
}
213+
214+
.nav-customize-section-title {
215+
padding: 12px 16px;
216+
font-size: 0.74rem;
217+
font-weight: 700;
218+
letter-spacing: 0.08em;
219+
text-transform: uppercase;
220+
color: var(--text-muted);
221+
background: color-mix(in srgb, var(--surface-elevated, var(--surface)) 92%, transparent);
222+
border-bottom: 1px solid var(--glass-border);
223+
}
224+
225+
.nav-customize-list {
226+
display: flex;
227+
flex-direction: column;
228+
}
229+
230+
.nav-customize-row {
231+
display: flex;
232+
align-items: center;
233+
justify-content: space-between;
234+
gap: 12px;
235+
padding: 12px 16px;
236+
}
237+
238+
.nav-customize-row + .nav-customize-row {
239+
border-top: 1px solid color-mix(in srgb, var(--glass-border) 78%, transparent);
240+
}
241+
242+
.nav-customize-row-main {
243+
display: flex;
244+
align-items: center;
245+
gap: 12px;
246+
min-width: 0;
247+
flex: 1;
248+
}
249+
250+
.nav-customize-row-main svg {
251+
width: 18px;
252+
height: 18px;
253+
flex-shrink: 0;
254+
color: var(--text-secondary);
255+
}
256+
257+
.nav-customize-row-copy {
258+
min-width: 0;
259+
}
260+
261+
.nav-customize-row-title {
262+
color: var(--text-primary);
263+
font-weight: 600;
264+
font-size: 0.92rem;
265+
}
266+
267+
.nav-customize-row-meta {
268+
color: var(--text-muted);
269+
font-size: 0.75rem;
270+
min-height: 1em;
271+
margin-top: 2px;
272+
}
273+
274+
.nav-customize-actions {
275+
display: flex;
276+
align-items: center;
277+
gap: 8px;
278+
flex-shrink: 0;
279+
}
280+
281+
.nav-customize-icon {
282+
width: 36px;
283+
height: 36px;
284+
display: inline-flex;
285+
align-items: center;
286+
justify-content: center;
287+
border-radius: 999px;
288+
border: 1px solid var(--glass-border);
289+
background: transparent;
290+
color: var(--text-secondary);
291+
cursor: pointer;
292+
transition: all 0.2s ease;
293+
}
294+
295+
.nav-customize-icon:hover:not(:disabled) {
296+
color: var(--text-primary);
297+
border-color: color-mix(in srgb, var(--accent) 22%, var(--glass-border));
298+
background: color-mix(in srgb, var(--accent) 10%, transparent);
299+
}
300+
301+
.nav-customize-icon.active {
302+
color: var(--warn);
303+
border-color: color-mix(in srgb, var(--warn) 35%, var(--glass-border));
304+
background: color-mix(in srgb, var(--warn) 14%, transparent);
305+
}
306+
307+
.nav-customize-icon:disabled {
308+
opacity: 0.35;
309+
cursor: default;
310+
}
311+
312+
.nav-customize-icon svg {
313+
width: 16px;
314+
height: 16px;
315+
}
316+
169317
.sidebar-footer {
170318
padding: var(--space-md);
171319
border-top: 1px solid var(--glass-border);
@@ -744,6 +892,12 @@ body.is-offline .offline-banner { display: flex; }
744892
-webkit-tap-highlight-color: transparent;
745893
transition: color 0.2s;
746894
}
895+
.bottom-nav-item span {
896+
max-width: 100%;
897+
overflow: hidden;
898+
text-overflow: ellipsis;
899+
white-space: nowrap;
900+
}
747901
.bottom-nav-item:active { color: var(--text-secondary); }
748902
.bottom-nav-item.active { color: var(--amethyst-light); }
749903
.bottom-nav-item.active::before {
@@ -782,6 +936,7 @@ body.is-offline .offline-banner { display: flex; }
782936
@media (min-width: 640px) {
783937
.metrics-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
784938
.health-overview { grid-template-columns: 1fr 1fr; }
939+
.nav-customize-sections { grid-template-columns: 1fr 1fr; }
785940
.hero-header { flex-direction: row; align-items: flex-start; justify-content: space-between; }
786941
.hero-status { flex: 1; min-width: 0; }
787942
.hero-right { flex-shrink: 0; justify-content: flex-end; }
@@ -839,4 +994,3 @@ body.is-offline .offline-banner { display: flex; }
839994
.ring-legend { align-items: center; }
840995
.gaming-score { order: -1; }
841996
}
842-

‎app/static/js/events.js‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -235,14 +235,21 @@ function acknowledgeAllEvents() {
235235
}
236236

237237
function updateEventBadge(count) {
238-
var badge = document.getElementById('event-badge');
239-
if (!badge) return;
240-
if (count > 0) {
241-
badge.textContent = count > 99 ? '99+' : count;
242-
badge.style.display = '';
243-
} else {
244-
badge.style.display = 'none';
245-
}
238+
var badges = [];
239+
var sidebarBadge = document.getElementById('event-badge');
240+
if (sidebarBadge) badges.push(sidebarBadge);
241+
document.querySelectorAll('.bottom-nav-badge[data-view="events"]').forEach(function(badge) {
242+
badges.push(badge);
243+
});
244+
if (!badges.length) return;
245+
badges.forEach(function(badge) {
246+
if (count > 0) {
247+
badge.textContent = count > 99 ? '99+' : count;
248+
badge.style.display = '';
249+
} else {
250+
badge.style.display = 'none';
251+
}
252+
});
246253
}
247254

248255
// Fetch badge count on page load (exclude operational if hidden)

0 commit comments

Comments
 (0)