From 5fa044e69c841dff665a3c3e90df81c4da4d68d4 Mon Sep 17 00:00:00 2001 From: Jens Luedicke Date: Sat, 28 Jun 2025 09:48:29 +0200 Subject: [PATCH] Change navigation. --- app.py | 5 ++ static/css/style.css | 92 +++++++++++++++++++++++++++++++++- static/js/script.js | 28 +++++------ templates/admin_dashboard.html | 32 ++++++++++++ templates/layout.html | 12 ++--- 5 files changed, 147 insertions(+), 22 deletions(-) create mode 100644 templates/admin_dashboard.html diff --git a/app.py b/app.py index 6a66c0a..19ba532 100644 --- a/app.py +++ b/app.py @@ -144,6 +144,11 @@ def register(): return render_template('register.html', title='Register') +@app.route('/admin/dashboard') +@admin_required +def admin_dashboard(): + return render_template('admin_dashboard.html', title='Admin Dashboard') + @app.route('/admin/users') @admin_required def admin_users(): diff --git a/static/css/style.css b/static/css/style.css index 7bd9747..a06eb35 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -17,8 +17,11 @@ header { nav ul { display: flex; + justify-content: flex-start; + align-items: center; list-style: none; - justify-content: center; + padding: 0; + margin: 0; } nav ul li { @@ -30,6 +33,61 @@ nav ul li a { text-decoration: none; } +/* Dropdown menu styles */ +nav ul li.dropdown { + position: relative; +} + +nav ul li.admin-dropdown { + margin-left: auto; /* Push to the right */ +} + +nav ul li.dropdown .dropdown-toggle { + cursor: pointer; + padding: 10px 15px; + display: block; + color: #fff; + text-decoration: none; +} + +nav ul li.dropdown .dropdown-menu { + display: none; + position: absolute; + right: 0; /* Align to the right for admin dropdown */ + background-color: #333; + min-width: 180px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1000; + padding: 10px 0; + border-radius: 4px; + margin-top: 5px; +} + +/* Show dropdown on hover and keep it visible when hovering over the menu */ +nav ul li.dropdown:hover .dropdown-menu, +nav ul li.dropdown .dropdown-menu:hover { + display: block; +} + +nav ul li.dropdown .dropdown-menu li { + display: block; + padding: 0; + width: 100%; +} + +nav ul li.dropdown .dropdown-menu li a { + padding: 10px 20px; + display: block; + text-align: left; + color: #fff; + text-decoration: none; + transition: background-color 0.2s ease; +} + +nav ul li.dropdown .dropdown-menu li a:hover { + background-color: #444; +} + main { max-width: 1200px; margin: 2rem auto; @@ -413,4 +471,36 @@ input[type="time"]::-webkit-datetime-edit { color: #666; margin-top: 4px; font-style: italic; +} + +/* Admin Dashboard Styles */ +.admin-panel { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin-top: 20px; +} + +.admin-card { + background-color: #f8f9fa; + border-radius: 5px; + padding: 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + width: 300px; + transition: transform 0.2s, box-shadow 0.2s; +} + +.admin-card:hover { + transform: translateY(-5px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +} + +.admin-card h2 { + margin-top: 0; + color: #333; +} + +.admin-card p { + color: #666; + margin-bottom: 20px; } \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index a3c7bae..51ba52f 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -142,24 +142,24 @@ document.addEventListener('DOMContentLoaded', function() { const parent = this.parentElement; const menu = parent.querySelector('.dropdown-menu'); - // Close all other open dropdowns - document.querySelectorAll('.dropdown-menu').forEach(item => { - if (item !== menu && item.classList.contains('show')) { - item.classList.remove('show'); - } - }); - - // Toggle current dropdown - menu.classList.toggle('show'); + // Toggle the display of the dropdown menu + if (menu.style.display === 'block') { + menu.style.display = 'none'; + } else { + // Close all other open dropdowns first + document.querySelectorAll('.dropdown-menu').forEach(m => { + if (m !== menu) m.style.display = 'none'; + }); + menu.style.display = 'block'; + } }); }); - // Close dropdown when clicking outside + // Close dropdowns when clicking outside document.addEventListener('click', function(e) { - if (!e.target.matches('.dropdown-toggle')) { - const dropdowns = document.querySelectorAll('.dropdown-menu.show'); - dropdowns.forEach(dropdown => { - dropdown.classList.remove('show'); + if (!e.target.closest('.dropdown')) { + document.querySelectorAll('.dropdown-menu').forEach(menu => { + menu.style.display = 'none'; }); } }); diff --git a/templates/admin_dashboard.html b/templates/admin_dashboard.html new file mode 100644 index 0000000..73a029c --- /dev/null +++ b/templates/admin_dashboard.html @@ -0,0 +1,32 @@ +{% extends "layout.html" %} + +{% block content %} +
+

Admin Dashboard

+ + {% with messages = get_flashed_messages(with_categories=true) %} + {% if messages %} + {% for category, message in messages %} +
{{ message }}
+ {% endfor %} + {% endif %} + {% endwith %} + +
+
+

User Management

+

Manage user accounts, permissions, and roles.

+ Manage Users +
+ + + +
+
+{% endblock %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index 7883d7d..618f7c9 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -15,20 +15,18 @@
  • History
  • Config
  • About
    • -
  • Contact
    • - + {% if g.user.is_admin %} -
  • +
  • Admin
    • {% endif %} - -
  • Profile
    • -
  • Logout
    • {% else %}
  • Login
  • Register