hnzio/saldo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compact mobile bottom navigation

Browse Source
This commit is contained in:
Florian Heinz
2026-04-22 00:01:27 +02:00
parent 1667eb5d26
commit d5a2721c5f
2 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/app.css
+35 -2
View File
@@ -717,11 +717,15 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
.bottom-nav {
position: fixed;
inset: auto 12px 12px 12px;
left: max(8px, env(safe-area-inset-left));
right: max(8px, env(safe-area-inset-right));
bottom: calc(8px + env(safe-area-inset-bottom));
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
padding: 10px;
max-width: 540px;
margin: 0 auto;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 24px;
@@ -733,10 +737,18 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
display: grid;
justify-items: center;
gap: 6px;
min-width: 0;
text-align: center;
font-size: 0.82rem;
font-size: 0.76rem;
line-height: 1.1;
padding: 10px 6px;
border-radius: 16px;
overflow-wrap: anywhere;
}
.bottom-nav a span {
display: inline-block;
max-width: 100%;
}
.mobile-theme-toggle {
@@ -784,6 +796,27 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
}
}
@media (max-width: 560px) {
.content {
padding: 18px 14px 104px;
}
.bottom-nav {
gap: 4px;
padding: 8px;
border-radius: 20px;
}
.bottom-nav a {
font-size: 0.68rem;
padding: 8px 4px;
}
.bottom-nav a span {
display: none;
}
}
.planning-hero-strong {
padding-bottom: 6px;
}
app/templates/base.html
+6 -6
View File
@@ -76,14 +76,14 @@
</div>
{% if current_user.is_authenticated %}
<nav class="bottom-nav">
<a href="{{ url_for('main.index') }}"><img src="{{ url_for('static', filename='icons/house.svg') }}" alt="" class="ui-icon">Übersicht</a>
<a href="{{ url_for('planning.current') }}"><img src="{{ url_for('static', filename='icons/wallet.svg') }}" alt="" class="ui-icon">Planung</a>
<a href="{{ url_for('months.index') }}"><img src="{{ url_for('static', filename='icons/calendar.svg') }}" alt="" class="ui-icon">Monate</a>
<a href="{{ url_for('main.analytics') }}"><img src="{{ url_for('static', filename='icons/chart-simple.svg') }}" alt="" class="ui-icon">Auswertungen</a>
<a href="{{ url_for('main.index') }}" aria-label="Übersicht" title="Übersicht"><img src="{{ url_for('static', filename='icons/house.svg') }}" alt="" class="ui-icon"><span>Übersicht</span></a>
<a href="{{ url_for('planning.current') }}" aria-label="Planung" title="Planung"><img src="{{ url_for('static', filename='icons/wallet.svg') }}" alt="" class="ui-icon"><span>Planung</span></a>
<a href="{{ url_for('months.index') }}" aria-label="Monate" title="Monate"><img src="{{ url_for('static', filename='icons/calendar.svg') }}" alt="" class="ui-icon"><span>Monate</span></a>
<a href="{{ url_for('main.analytics') }}" aria-label="Auswertungen" title="Auswertungen"><img src="{{ url_for('static', filename='icons/chart-simple.svg') }}" alt="" class="ui-icon"><span>Auswertungen</span></a>
{% if current_user.is_admin() %}
<a href="{{ url_for('admin.index') }}"><img src="{{ url_for('static', filename='icons/sliders.svg') }}" alt="" class="ui-icon">Optionen</a>
<a href="{{ url_for('admin.index') }}" aria-label="Optionen" title="Optionen"><img src="{{ url_for('static', filename='icons/sliders.svg') }}" alt="" class="ui-icon"><span>Optionen</span></a>
{% else %}
<a href="#" data-enable-push><img src="{{ url_for('static', filename='icons/bell.svg') }}" alt="" class="ui-icon">Push</a>
<a href="#" data-enable-push aria-label="Push" title="Push"><img src="{{ url_for('static', filename='icons/bell.svg') }}" alt="" class="ui-icon"><span>Push</span></a>
{% endif %}
</nav>
{% endif %}