kobold-ai/schmankerl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add dedicated buyer dashboard, buyer role assignment, Bavarian White-Blue light/dark mode and mobile drawer

Browse Source
This commit is contained in:
kobold-ai
2026-09-22 08:21:06 +02:00
parent 1ff5b3a31e
commit 0bdcbe7976
6 changed files with 825 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+74 -28
View File
@@ -1,11 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<html lang="de" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Schmankerl – Das moderne Brotzeit-Portal{% endblock %}</title>
<link rel="stylesheet" href="/static/style.css">
<link rel="icon" href="https://new.dev.waiswuaschd.de/favicon.ico">
<script>
(function() {
const savedTheme = localStorage.getItem('schmankerl_theme');
const theme = savedTheme ? savedTheme : 'light';
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
</head>
<body>
@@ -14,23 +21,34 @@
<a href="/" class="brand">
🥨 <span>Schmankerl</span> <small class="tenant-badge">{{ tenant.name if tenant else 'Portal' }}</small>
</a>
<button class="mobile-toggle" aria-label="Menü öffnen" id="mobileNavToggle" aria-expanded="false">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<div class="nav-right-cluster">
<!-- Theme Switcher -->
<button type="button" class="theme-toggle-btn" id="themeToggleBtn" onclick="toggleTheme()" title="Design umschalten (Hell / Dunkel)">
<span id="themeToggleIcon">🌙</span> <span id="themeToggleLabel" class="hide-mobile">Dunkel</span>
</button>
<!-- Mobile Hamburger Toggle -->
<button class="mobile-toggle" aria-label="Menü öffnen" id="mobileNavToggle" aria-expanded="false">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</div>
<nav class="nav-links" id="navLinks">
{% if current_user %}
<a href="/">🥨 Brotzeit bestellen</a>
<a href="/" class="nav-item">🥨 Bestellen</a>
<a href="/einkauf" class="nav-item nav-einkauf-link">🛒 Einkaufsliste & Kasse</a>
{% if current_user.role == 'admin' %}
<a href="/admin" class="nav-admin">👨‍🍳 Einkäufer-Cockpit</a>
<a href="/admin" class="nav-item nav-admin">⚙️ Orga & Admin</a>
{% endif %}
<span class="user-greeting">👤 {{ current_user.first_name }}</span>
<a href="/logout" class="nav-logout">Abmelden</a>
<a href="/logout" class="nav-item nav-logout">Abmelden</a>
{% else %}
<a href="/login" class="nav-login">Anmelden</a>
<a href="/login" class="nav-item nav-login">Anmelden</a>
{% endif %}
<a href="https://new.dev.waiswuaschd.de" target="_blank" class="nav-home">Zur Plattform</a>
<a href="https://new.dev.waiswuaschd.de" target="_blank" class="nav-item nav-home">Zur Plattform</a>
</nav>
</div>
</header>
@@ -49,24 +67,52 @@
</footer>
<script>
const navToggle = document.getElementById('mobileNavToggle');
const navLinks = document.getElementById('navLinks');
if (navToggle && navLinks) {
navToggle.addEventListener('click', () => {
const isOpen = navLinks.classList.toggle('open');
navToggle.classList.toggle('open', isOpen);
navToggle.setAttribute('aria-expanded', isOpen);
document.body.style.overflow = isOpen ? 'hidden' : '';
});
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('open');
navToggle.classList.remove('open');
navToggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
});
});
// Theme Toggle Logic
function updateThemeUI(theme) {
const icon = document.getElementById('themeToggleIcon');
const label = document.getElementById('themeToggleLabel');
if (theme === 'dark') {
if (icon) icon.innerText = '☀️';
if (label) label.innerText = 'Hell';
} else {
if (icon) icon.innerText = '🌙';
if (label) label.innerText = 'Dunkel';
}
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme') || 'light';
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('schmankerl_theme', next);
updateThemeUI(next);
}
// Initialize Theme UI on load
document.addEventListener('DOMContentLoaded', () => {
const current = document.documentElement.getAttribute('data-theme') || 'light';
updateThemeUI(current);
// Mobile Nav Drawer Toggle
const navToggle = document.getElementById('mobileNavToggle');
const navLinks = document.getElementById('navLinks');
if (navToggle && navLinks) {
navToggle.addEventListener('click', () => {
const isOpen = navLinks.classList.toggle('open');
navToggle.classList.toggle('open', isOpen);
navToggle.setAttribute('aria-expanded', isOpen);
document.body.style.overflow = isOpen ? 'hidden' : '';
});
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('open');
navToggle.classList.remove('open');
navToggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
});
});
}
});
</script>
</body>
</html>