From 4ccfa9d60965c0f3887906ce277512aba1775545 Mon Sep 17 00:00:00 2001 From: Alex Mueller Date: Sat, 12 Sep 2026 16:43:59 +0200 Subject: [PATCH] feat(mobile): responsive mobile navigation, drawer menu and overflow fix - eliminate horizontal viewport overflow on smartphones (< 400px) - implement mobile hamburger toggle and slide-down drawer for landing page and dashboard - add adaptive button typography and compact action controls on mobile devices - make course filter tabs horizontally scrollable with touch momentum - optimize hero typography and stats grid for small screens - verify mobile rendering via headless chromium pipeline --- assets/app_auth.js | 4 +- assets/style.css | 369 ++++++++++++++++++++++++++++++++++++++++++++- dashboard.html | 47 +++++- index.html | 49 +++++- 4 files changed, 453 insertions(+), 16 deletions(-) diff --git a/assets/app_auth.js b/assets/app_auth.js index 74b9ad7..4575045 100644 --- a/assets/app_auth.js +++ b/assets/app_auth.js @@ -342,7 +342,7 @@ }; } if (registerBtn) { - registerBtn.innerText = '💻 Zum Kurs-Dashboard'; + registerBtn.innerHTML = '💻 Zum Kurs-Dashboard💻 Dashboard'; registerBtn.style.background = '#10b981'; registerBtn.onclick = () => { window.location.href = 'dashboard.html'; @@ -384,7 +384,7 @@ } if (registerBtn) { registerBtn.style.display = 'inline-flex'; - registerBtn.innerText = '✨ Kostenlos registrieren'; + registerBtn.innerHTML = '✨ Kostenlos registrieren✨ Registrieren'; registerBtn.style.background = '#0284c7'; registerBtn.onclick = () => window.openAuthModal('register', { allowClose: true }); } diff --git a/assets/style.css b/assets/style.css index d7e47e2..7bc7110 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1472,16 +1472,377 @@ textarea:focus { margin: 0; } +/* ========================================================================== + 📱 COMPREHENSIVE RESPONSIVE & MOBILE DESIGN SYSTEM + ========================================================================== */ + +html, body { + overflow-x: hidden; + max-width: 100vw; +} + @media (max-width: 768px) { - .portal-stats-bar { - grid-template-columns: repeat(2, 1fr); + .portal-container { + padding: 0 16px !important; } - .portal-hero h1 { - font-size: 2rem; + + .portal-header-bar { + padding: 10px 14px; } + + .portal-brand-logo { + width: 30px; + height: 30px; + } + + .portal-brand-title { + font-size: 1rem; + } + .portal-nav-links { + display: none !important; + } + + .portal-hero { + padding: 36px 14px 28px 14px; + } + + .portal-hero-pill { + font-size: 0.74rem; + padding: 4px 10px; + margin-bottom: 14px; + line-height: 1.3; + max-width: 100%; + box-sizing: border-box; + } + + .portal-hero h1 { + font-size: clamp(1.65rem, 6.5vw, 2.3rem) !important; + letter-spacing: -0.5px; + line-height: 1.18; + margin-bottom: 12px; + } + + .portal-hero p { + font-size: 0.92rem; + line-height: 1.55; + margin-bottom: 22px; + padding: 0 4px; + } + + .portal-hero-actions { + flex-direction: column; + width: 100%; + gap: 10px; + } + + .portal-hero-actions .portal-btn-primary, + .portal-hero-actions .portal-btn-secondary { + width: 100%; + justify-content: center; + text-align: center; + box-sizing: border-box; + padding: 12px 16px; + font-size: 0.9rem; + } + + .portal-stats-bar { + grid-template-columns: repeat(2, 1fr) !important; + gap: 10px; + margin-top: 24px; + } + + .portal-stat-card { + padding: 14px 10px; + } + + .portal-stat-num { + font-size: 1.5rem; + } + + .portal-stat-label { + font-size: 0.78rem; + } + + .portal-stat-desc { + font-size: 0.7rem; + line-height: 1.3; + } + + /* Value Pillars Grid */ + .value-pillars-grid { + grid-template-columns: 1fr !important; + gap: 16px; + margin: 24px 0 36px 0; + } + + .pillar-card { + padding: 20px 18px; + } + + /* Dashboard Spotlight */ + .dashboard-hero-card { + padding: 22px 16px; + border-radius: 16px; + margin: 24px 0 36px 0; + } + + .dashboard-mockup-bar { + grid-template-columns: repeat(2, 1fr); + gap: 10px; + padding: 12px 14px; + } + + .mockup-item { + gap: 8px; + } + + .mockup-icon { + font-size: 1.3rem; + } + + .mockup-label { + font-size: 0.68rem; + } + + .mockup-value { + font-size: 0.84rem; + } + + /* Domains & Steps */ + .domain-grid { + grid-template-columns: 1fr !important; + gap: 10px; + } + + .steps-container { + grid-template-columns: 1fr !important; + gap: 14px; + margin: 24px 0 36px 0; + } + + /* Bento Grid */ + .bento-grid { + grid-template-columns: 1fr !important; + gap: 12px; + margin: 20px 0; + } + + /* Dashboard Specific Mobile Enhancements */ + .resume-card { + flex-direction: column !important; + align-items: stretch !important; + padding: 20px 16px !important; + gap: 14px !important; + } + + .resume-card > div:first-child { + display: flex; + align-items: center; + gap: 12px; + } + + .resume-card h3 { + font-size: 1.15rem; + line-height: 1.3; + } + + .resume-card .btn, #resume-action-btn { + width: 100% !important; + justify-content: center !important; + text-align: center !important; + box-sizing: border-box !important; + } + + /* Horizontally Scrollable Filter Tabs (App-Feeling) */ + .portal-filter-tabs { + display: flex !important; + flex-wrap: nowrap !important; + overflow-x: auto !important; + -webkit-overflow-scrolling: touch; + gap: 8px !important; + padding-bottom: 8px !important; + margin-bottom: 18px !important; + scrollbar-width: none; + } + .portal-filter-tabs::-webkit-scrollbar { display: none; } + + .portal-tab-pill { + flex-shrink: 0 !important; + white-space: nowrap !important; + padding: 7px 14px; + font-size: 0.82rem; + } + + /* Course Card Mobile */ + .portal-courses-grid { + grid-template-columns: 1fr !important; + gap: 16px; + } + + .portal-card { + padding: 20px 16px; + } + + .portal-card-footer { + flex-direction: row; + gap: 8px; + } + + .btn-start-ide { + flex-grow: 1; + justify-content: center; + padding: 10px 14px; + } + + .btn-view-theory { + flex-shrink: 0; + padding: 10px 12px; + } + + /* Modals */ + .certificate-container { + width: calc(100vw - 28px) !important; + max-width: 440px !important; + padding: 20px 16px !important; + box-sizing: border-box !important; + margin: 0 auto; + } +} + +.btn-text-mobile { + display: none; +} + +@media (max-width: 640px) { + .btn-text-desktop { + display: none !important; + } + .btn-text-mobile { + display: inline !important; + } + + .portal-header-bar { + padding: 8px 12px !important; + } + + .portal-nav-container { + gap: 8px !important; + } + + .portal-brand { + gap: 8px !important; + } + + .portal-brand-title { + font-size: 0.95rem !important; + } + + .portal-brand-badge { + display: none !important; /* Hide alpha badge on small mobile screens */ + } + + #nav-btn-login { + display: none !important; /* Im mobilen Drawer Menü verfügbar */ + } + + #nav-btn-register { + padding: 6px 10px !important; + font-size: 0.78rem !important; + white-space: nowrap !important; + } + + #nav-profile-pill { + display: none !important; /* Im mobilen Drawer Menü verfügbar */ + } + + #nav-auth-user { + display: none !important; + } + + #nav-auth-role { + display: none !important; + } + + #nav-btn-logout { + padding: 6px 10px !important; + font-size: 0.78rem !important; + white-space: nowrap !important; + } + + .portal-stats-bar { + grid-template-columns: repeat(2, 1fr) !important; + gap: 8px !important; + } + + .portal-stat-num { + font-size: 1.35rem !important; + } +} + +/* Mobile Drawer & Hamburger Menu */ +.mobile-menu-toggle { + display: none; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.15); + color: #f8fafc; + font-size: 1.2rem; + padding: 6px 10px; + border-radius: 8px; + cursor: pointer; + line-height: 1; + transition: background 0.15s ease; +} + +.mobile-menu-toggle:hover { + background: rgba(255, 255, 255, 0.15); +} + +@media (max-width: 768px) { + .mobile-menu-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + } +} + +.mobile-drawer { + background: #090d16; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 14px 16px 18px 16px; + position: sticky; + top: 52px; + z-index: 49; + display: flex; + flex-direction: column; + gap: 6px; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); + animation: slideDown 0.2s ease-out; +} + +@keyframes slideDown { + from { opacity: 0; transform: translateY(-8px); } + to { opacity: 1; transform: translateY(0); } +} + +.mobile-drawer-link { + color: #cbd5e1; + text-decoration: none; + font-size: 0.94rem; + font-weight: 600; + padding: 10px 14px; + border-radius: 8px; + transition: background 0.15s ease, color 0.15s ease; + display: flex; + align-items: center; + gap: 10px; +} + +.mobile-drawer-link:hover, .mobile-drawer-link:active { + background: rgba(56, 189, 248, 0.12); + color: #38bdf8; } /* ========================================================================== diff --git a/dashboard.html b/dashboard.html index b7f7fa9..c4d2d4e 100644 --- a/dashboard.html +++ b/dashboard.html @@ -160,18 +160,34 @@ -
- + + +
@@ -836,6 +852,19 @@ -