Lars/shinkan-jinkendo
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

UX - Filter #12

Merged
Lars merged 22 commits from develop into main 2026-05-06 21:25:56 +02:00
Conversation 0 Commits 22 Files Changed 43 +24 -31
2 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8eec145393 - Show all commits

2
frontend/src/App.jsx
View File

@ -55,7 +55,7 @@ function Nav({ isAdmin }) {
'nav-item' + (navItemActive(loc.pathname, item, isActive) ? ' active' : '') 'nav-item' + (navItemActive(loc.pathname, item, isActive) ? ' active' : '')
} }
> >
<item.Icon size={20} strokeWidth={2} /> <item.Icon size={26} strokeWidth={2} />
<span>{item.shortLabel || item.label}</span> <span>{item.shortLabel || item.label}</span>
</NavLink> </NavLink>
))} ))}

53
frontend/src/app.css
View File

@ -12,9 +12,9 @@
--accent-dark: #0a5c43; --accent-dark: #0a5c43;
--danger: #D85A30; --danger: #D85A30;
--warn: #EF9F27; --warn: #EF9F27;
/* Höhe der eigentlichen Tab-Zeile (ohne Abstand/Home-Indicator) */ /* Höhe der Tab-Zeile (Icon + Beschriftung, ohne Home-Indicator) — an Mitai/iOS-Tabbar angelehnt */
--nav-h: 56px; --nav-h: 58px;
--nav-pad-top: 8px; --nav-pad-top: 10px;
--header-h: 52px; --header-h: 52px;
--font: system-ui, -apple-system, 'Segoe UI', sans-serif; --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
--capture-content-max: 800px; --capture-content-max: 800px;
@ -27,6 +27,9 @@
--text1: #eeecea; --text2: #aaa9a4; --text3: #686762; --text1: #eeecea; --text2: #aaa9a4; --text3: #686762;
--accent-light: #04342C; --accent-dark: #5DCAA5; --accent-light: #04342C; --accent-dark: #5DCAA5;
} }
.bottom-nav {
box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.55);
}
} }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; } html, body, #root { height: 100%; }
@ -168,18 +171,21 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
width: auto; width: auto;
max-width: none; max-width: none;
display: flex; display: flex;
align-items: center; align-items: stretch;
background: var(--surface); background: var(--surface);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
z-index: 20; z-index: 20;
overflow-x: auto; overflow-x: auto;
overflow-y: visible; overflow-y: visible;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
justify-content: flex-start; justify-content: flex-start;
gap: 2px; gap: 4px;
padding: var(--nav-pad-top) max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px)); padding: var(--nav-pad-top) max(10px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(10px, env(safe-area-inset-left, 0px));
min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px)); min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px));
height: auto; height: auto;
box-sizing: border-box; box-sizing: border-box;
@ -189,25 +195,29 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
} }
.nav-item { .nav-item {
flex: 0 0 auto; flex: 0 0 auto;
min-width: 56px; min-width: 68px;
max-width: 96px; max-width: 108px;
min-height: 48px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 3px; gap: 4px;
color: var(--text3); color: var(--text3);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 600;
transition: color 0.15s; transition: color 0.15s;
padding: 2px 4px 4px; padding: 6px 10px 8px;
box-sizing: border-box; box-sizing: border-box;
scroll-snap-align: center;
-webkit-tap-highlight-color: transparent;
} }
.nav-item span { .nav-item span {
font-size: 10px; font-size: 11px;
line-height: 1.15; line-height: 1.2;
text-align: center; text-align: center;
max-width: 100%; max-width: 100%;
letter-spacing: 0.01em;
} }
.nav-item.active { color: var(--accent); } .nav-item.active { color: var(--accent); }
.nav-item svg { flex-shrink: 0; } .nav-item svg { flex-shrink: 0; }
@ -1262,23 +1272,6 @@ a.analysis-split__nav-item {
font-size: 0.8rem; font-size: 0.8rem;
} }
/* Untere Hauptnavigation: etwas kompakter */
.bottom-nav {
gap: 0;
padding-top: 5px;
}
.nav-item {
min-width: 52px;
max-width: 90px;
padding: 1px 2px 3px;
gap: 2px;
}
.nav-item span {
font-size: 9.5px;
}
.admin-page-subtabs { .admin-page-subtabs {
margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px))); margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px)));
margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px))); margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px)));