deemanone/padelnomics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: nav mobile layout + container width alignment

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
2026-02-20 14:44:53 +01:00
parent 3c903bad97
commit e66a55a8db
4 changed files with 44 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -7,6 +7,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
## [Unreleased] ## [Unreleased]
### Fixed ### Fixed
- Nav: hamburger button was trapped inside `.nav-links--right`; parent `display: none` on mobile hid it too — moved hamburger to be first child of `.nav-inner`; sign-in button added as always-visible mobile slot (`.nav-auth-mobile`) on the right; mobile grid is now `auto 1fr auto` (hamburger | logo | sign-in)
- Nav: align `.nav-inner` width with `container-page` — changed `max-width` from 80rem to 72rem (`--container-6xl`) and matched responsive padding (`1rem` / `1.5rem` / `2rem` at mobile / sm / lg) so nav edges are flush with page content and footer
- Planner: "Get Supplier Quotes" button now navigates to the correct lang-prefixed URL (`/en/leads/quote` etc.) — hardcoded `/leads/quote` caused a 404 on prod; URL is now injected from the server via `window.__PADELNOMICS_QUOTE_URL__` - Planner: "Get Supplier Quotes" button now navigates to the correct lang-prefixed URL (`/en/leads/quote` etc.) — hardcoded `/leads/quote` caused a 404 on prod; URL is now injected from the server via `window.__PADELNOMICS_QUOTE_URL__`
### Added ### Added

7
padelnomics/src/padelnomics/public/templates/imprint_de.html
View File

@@ -19,8 +19,9 @@
<h2 class="text-lg mb-2">Anbieter</h2> <h2 class="text-lg mb-2">Anbieter</h2>
<p> <p>
Hendrik Dreesmann<br> Hendrik Dreesmann<br>
Zum Offizierskasino 1<br> c/o COCENTER<br>
26127 Oldenburg<br> Koppoldstr. 1<br>
86551 Aichach<br>
Deutschland Deutschland
</p> </p>
</section> </section>
@@ -39,7 +40,7 @@
<h2 class="text-lg mb-2">Verantwortlicher für den Inhalt</h2> <h2 class="text-lg mb-2">Verantwortlicher für den Inhalt</h2>
<p> <p>
Hendrik Dreesmann<br> Hendrik Dreesmann<br>
Zum Offizierskasino 1, 26127 Oldenburg c/o COCENTER, Koppoldstr. 1, 86551 Aichach
</p> </p>
<p class="mt-1 text-sm text-slate">(gemäß § 18 Abs. 2 MStV)</p> <p class="mt-1 text-sm text-slate">(gemäß § 18 Abs. 2 MStV)</p>
</section> </section>

24
padelnomics/src/padelnomics/static/css/input.css
View File

@@ -113,17 +113,23 @@
border-bottom: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0;
} }
.nav-inner { .nav-inner {
max-width: 80rem; max-width: 72rem; /* matches container-page (max-w-6xl) */
margin: 0 auto; margin: 0 auto;
padding: 0 1.5rem; padding: 0 1rem; /* matches px-4 (mobile) */
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
height: 56px; height: 56px;
} }
@media (min-width: 640px) {
.nav-inner { padding-inline: 1.5rem; } /* matches sm:px-6 */
}
@media (min-width: 1024px) {
.nav-inner { padding-inline: 2rem; } /* matches lg:px-8 */
}
.nav-logo { .nav-logo {
flex-shrink: 0; flex-shrink: 0;
padding: 0 1.25rem; padding: 0 1rem; /* 16px, matches Zillow logo left/right padding */
} }
.nav-links { .nav-links {
display: flex; display: flex;
@@ -172,7 +178,7 @@
padding: 0; padding: 0;
display: inline; display: inline;
} }
/* Hamburger button — hidden on desktop */ /* Hamburger button — hidden on desktop, shown on mobile (left) */
.nav-hamburger { .nav-hamburger {
display: none; display: none;
align-items: center; align-items: center;
@@ -188,6 +194,13 @@
} }
.nav-hamburger:hover { background: #F1F5F9; } .nav-hamburger:hover { background: #F1F5F9; }
.nav-hamburger svg { display: block; } .nav-hamburger svg { display: block; }
/* Mobile-only auth slot (right side) — hidden on desktop */
.nav-auth-mobile {
display: none;
align-items: center;
justify-content: flex-end;
min-width: 36px; /* mirrors hamburger width so logo stays centred when empty */
}
/* Mobile menu panel — hidden by default */ /* Mobile menu panel — hidden by default */
.nav-mobile { .nav-mobile {
display: none; display: none;
@@ -248,7 +261,10 @@
@media (max-width: 899px) { @media (max-width: 899px) {
.nav-links { display: none; } .nav-links { display: none; }
.nav-hamburger { display: flex; } .nav-hamburger { display: flex; }
.nav-auth-mobile { display: flex; }
/* Mobile grid: [hamburger] [logo] [sign-in] — hamburger left, sign-in right */
.nav-inner { grid-template-columns: auto 1fr auto; } .nav-inner { grid-template-columns: auto 1fr auto; }
.nav-logo { justify-self: center; }
.nav-bar { position: sticky; } .nav-bar { position: sticky; }
} }

31
padelnomics/src/padelnomics/templates/base.html
View File

@@ -40,13 +40,22 @@
<body> <body>
<nav class="nav-bar" id="main-nav"> <nav class="nav-bar" id="main-nav">
<div class="nav-inner"> <div class="nav-inner">
<!-- Left: demand / buy side --> <!-- Hamburger (mobile only, left side) — outside .nav-links so it's never hidden by the parent -->
<button type="button" class="nav-hamburger" id="nav-hamburger-btn" aria-label="Open navigation" aria-expanded="false">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect y="3" width="20" height="2" rx="1" fill="#0F172A"/>
<rect y="9" width="20" height="2" rx="1" fill="#0F172A"/>
<rect y="15" width="20" height="2" rx="1" fill="#0F172A"/>
</svg>
</button>
<!-- Left: demand / buy side (desktop only) -->
<div class="nav-links nav-links--left"> <div class="nav-links nav-links--left">
<a href="{{ url_for('planner.index') }}">{{ t.nav_planner }}</a> <a href="{{ url_for('planner.index') }}">{{ t.nav_planner }}</a>
<a href="{{ url_for('leads.quote_request') }}">{{ t.nav_quotes }}</a> <a href="{{ url_for('leads.quote_request') }}">{{ t.nav_quotes }}</a>
</div> </div>
<!-- Center: logo --> <!-- Center: logo (always visible) -->
<a href="{{ url_for('public.landing') }}" class="nav-logo" style="display:inline-flex;align-items:center;text-decoration:none"> <a href="{{ url_for('public.landing') }}" class="nav-logo" style="display:inline-flex;align-items:center;text-decoration:none">
<span style="font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.125rem;color:#0F172A;letter-spacing:-0.02em">padelnomics</span> <span style="font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.125rem;color:#0F172A;letter-spacing:-0.02em">padelnomics</span>
</a> </a>
@@ -88,19 +97,17 @@
{% else %} {% else %}
<a href="{{ url_for('auth.login') }}" class="nav-auth-btn">{{ t.nav_signin }}</a> <a href="{{ url_for('auth.login') }}" class="nav-auth-btn">{{ t.nav_signin }}</a>
{% endif %} {% endif %}
</div>
<!-- Hamburger (mobile only) --> <!-- Mobile-only auth (right side) — sign-in always visible outside the hamburger menu -->
<button type="button" class="nav-hamburger" id="nav-hamburger-btn" aria-label="Open navigation" aria-expanded="false"> <div class="nav-auth-mobile">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> {% if not user %}
<rect y="3" width="20" height="2" rx="1" fill="#0F172A"/> <a href="{{ url_for('auth.login') }}" class="nav-auth-btn">{{ t.nav_signin }}</a>
<rect y="9" width="20" height="2" rx="1" fill="#0F172A"/> {% endif %}
<rect y="15" width="20" height="2" rx="1" fill="#0F172A"/>
</svg>
</button>
</div> </div>
</div> </div>
<!-- Mobile menu panel --> <!-- Mobile menu panel — sign-in excluded (it lives in the bar); account section shown only for logged-in users -->
<div class="nav-mobile" id="nav-mobile-panel"> <div class="nav-mobile" id="nav-mobile-panel">
<span class="nav-mobile-section">Plan</span> <span class="nav-mobile-section">Plan</span>
<a href="{{ url_for('planner.index') }}">{{ t.nav_planner }}</a> <a href="{{ url_for('planner.index') }}">{{ t.nav_planner }}</a>
@@ -122,8 +129,6 @@
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="nav-auth-btn">{{ t.nav_signout }}</button> <button type="submit" class="nav-auth-btn">{{ t.nav_signout }}</button>
</form> </form>
{% else %}
<a href="{{ url_for('auth.login') }}" class="nav-auth-btn" style="margin-top:0.5rem">{{ t.nav_signin }}</a>
{% endif %} {% endif %}
</div> </div>
</nav> </nav>