From d6a8406c08c681b223b03b0cc56a521dc08cceb0 Mon Sep 17 00:00:00 2001 From: Bkolb Date: Thu, 2 Apr 2026 17:03:09 +0200 Subject: [PATCH] Layout Admin Mandanten --- .../app/templates/admin_mandanten.html | 204 ++++---- app/flask-postgres/styles/site.css | 469 +++++++----------- 2 files changed, 266 insertions(+), 407 deletions(-) diff --git a/app/flask-postgres/app/templates/admin_mandanten.html b/app/flask-postgres/app/templates/admin_mandanten.html index c065c63..a0dc017 100644 --- a/app/flask-postgres/app/templates/admin_mandanten.html +++ b/app/flask-postgres/app/templates/admin_mandanten.html @@ -1,116 +1,112 @@ - - - - - - {{ page_title }} - - - -
-
-
- - - +{% extends "base.html" %} + +{% block content %} + +
+

Mandantenverwaltung

+

Übersicht und Pflege aller Mandanten.

+
+ +
+
+
+

Neuen Mandanten anlegen

+
+ +
+ + +
+ +
- +
+ + +
+ +
+ + +
+ +
+ +
+
+
+
+ +
+
+
+

Bestehende Mandanten

-
-
-
-

Mandantenverwaltung

+
+ + + + + + + + + + + + + {% for mandant in mandanten %} + + + -

Neuen Mandanten anlegen

- - + -
- - -
+ -
- - -
+ -
- - -
+ -
- - -
+ -
- -
- + + + + {% endfor %} + +
IDKürzelNameKontakt E-MailLevelAktionen
{{ mandant.id }} + + + + + + + + +
+ + +
+
+
+ +
-

Mandanten

- - {% for mandant in mandanten %} -
- - -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
-
- {% endfor %} - -
- - \ No newline at end of file +{% endblock %} \ No newline at end of file diff --git a/app/flask-postgres/styles/site.css b/app/flask-postgres/styles/site.css index e83d8ec..2677b32 100644 --- a/app/flask-postgres/styles/site.css +++ b/app/flask-postgres/styles/site.css @@ -1,5 +1,5 @@ /* ========================= - RESET & BASE + 1. RESET & BASE ========================= */ * { @@ -19,7 +19,7 @@ body { } /* ========================= - HEADER + 2. LAYOUT (HEADER / CONTENT) ========================= */ .site-header { @@ -39,55 +39,6 @@ body { justify-content: space-between; } -/* ========================= - LOGO -========================= */ - -.site-logo { - height: 60px; - width: auto; - display: block; -} - -/* ========================= - NAVIGATION -========================= */ - -.top-nav { - display: flex; - align-items: center; - gap: 8px; -} - -.top-nav a { - color: #ffffff; - text-decoration: none; - font-weight: 600; - - padding: 10px 18px; - border-radius: 999px; - display: inline-block; - - min-width: 110px; /* verhindert Springen */ - text-align: center; - - transition: background 0.2s ease; -} - -.top-nav a:hover, -.top-nav a.active { - background: #376da6; -} - -.user-box { - font-weight: 700; - padding: 10px 12px; -} - -/* ========================= - MAIN CONTENT -========================= */ - .content-area { padding: 40px 20px; } @@ -95,18 +46,15 @@ body { .content-box { max-width: 1200px; margin: 0 auto; - background: #ffffff; color: #1b2430; - border-radius: 16px; padding: 32px; - box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2); } /* ========================= - HEADINGS + 3. TYPOGRAPHY ========================= */ h1, h2, h3 { @@ -119,140 +67,124 @@ p { } /* ========================= - HERO + 4. NAVIGATION ========================= */ -.hero-box { - margin-bottom: 30px; +.site-logo { + height: 60px; } -/* ========================= - PRICING -========================= */ - -.pricing-section { - margin-bottom: 30px; +.top-nav { + display: flex; + align-items: center; + gap: 8px; } -.pricing-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px; +.top-nav a { + color: #ffffff; + text-decoration: none; + font-weight: 600; + padding: 10px 18px; + border-radius: 999px; + min-width: 110px; + text-align: center; + transition: background 0.2s ease; } -.price-card { +.top-nav a:hover, +.top-nav a.active { + background: #376da6; +} + +/* USER MENU */ + +.user-menu { + position: relative; +} + +.user-menu-toggle { + background: #376da6; + color: #fff; + border: 0; + border-radius: 999px; + padding: 10px 18px; + font-weight: 600; + cursor: pointer; +} + +.user-menu-dropdown { + display: none; + position: absolute; + right: 0; + top: 100%; + min-width: 180px; background: #ffffff; - border: 1px solid #dce3ea; - border-radius: 16px; - padding: 24px; - - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); + border-radius: 12px; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); + overflow: hidden; + z-index: 200; } -.price-card.featured { - border: 2px solid #1d66b2; - background: #f5f9ff; +.user-menu-dropdown a { + display: block; + padding: 12px 16px; + color: #1b2430; + text-decoration: none; } -.price-card h3 { +.user-menu-dropdown a:hover { + background: #eef4fb; color: #0d2f57; } -.price-subline { - color: #526172; - min-height: 48px; -} - -.price-value { - font-size: 30px; - font-weight: 800; - color: #125eb0; - margin: 18px 0; -} - -.price-value span { - font-size: 14px; - color: #526172; -} - -.price-card ul { - padding-left: 20px; -} - -.price-card li { - margin-bottom: 8px; - color: #2f3b4a; +.user-menu:hover .user-menu-dropdown, +.user-menu:focus-within .user-menu-dropdown { + display: block; } /* ========================= - BUTTONS + 5. BUTTONS ========================= */ - - -/* ========================= - IMAGE PANEL -========================= */ - -.image-panel img { - width: 100%; - border-radius: 12px; -} - -/* ========================= - TWO COLUMN LAYOUT -========================= */ - -.two-col { - display: grid; - grid-template-columns: 1.2fr 1fr; - gap: 24px; +.btn-primary, +.btn-secondary { + display: inline-flex; align-items: center; + justify-content: center; + height: 48px; + padding: 0 20px; + border-radius: 12px; + font-weight: 700; + text-decoration: none; } -/* ========================= - MODULES -========================= */ - -.module-blocks { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px; +.btn-primary { + background: #1f5ea8; + color: #fff; + border: 1px solid #1f5ea8; } -.module-block { - background: #f8fbff; +.btn-secondary { + background: #eef4fb; + color: #0d2f57; border: 1px solid #dce3ea; - border-radius: 16px; - padding: 24px; } -.module-block h3 { - color: #7f9cc0; +.btn-danger { + background: #b62323; + color: #fff; + border: none; } -.module-result { - font-weight: 800; - color: #125eb0; - margin-bottom: 10px; -} - -.module-block li { - color: #2f3b4a; +.btn-small { + height: 40px; + min-width: 100px; } /* ========================= - LOGIN + 6. FORMS ========================= */ -.login-box { - max-width: 600px; -} - -.intro-text { - color: #526172; -} - .login-form .form-row { margin-bottom: 16px; } @@ -271,6 +203,10 @@ p { border: 1px solid #c9d2db; } +/* ========================= + 7. FEEDBACK +========================= */ + .error-box { background: #ffe7e7; color: #8d1d1d; @@ -279,167 +215,94 @@ p { margin-bottom: 16px; } +.success-box { + background: #e8f7e8; + color: #1f6b1f; + padding: 12px; + border-radius: 8px; + margin-bottom: 16px; +} + /* ========================= - RESPONSIVE + 8. COMPONENTS +========================= */ + +.hero-box, +.pricing-section, +.info-section { + margin-bottom: 30px; +} + +.two-col { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 24px; +} + +.image-panel img { + width: 100%; + border-radius: 12px; +} + +/* ========================= + 9. ADMIN PANEL +========================= */ + +.admin-panel { + background: #f8fbff; + border: 1px solid #dce3ea; + border-radius: 18px; + padding: 24px; + margin-bottom: 24px; +} + +.admin-actions { + display: flex; + gap: 16px; + margin-top: 16px; +} + +/* ========================= + 10. TABLES +========================= */ + +.mandanten-table { + width: 100%; + border-collapse: collapse; +} + +.mandanten-table th { + background: #eef4fb; + color: #0d2f57; + text-align: left; + padding: 14px; +} + +.mandanten-table td { + padding: 14px; + border-bottom: 1px solid #e7edf3; +} + +.mandanten-table tr:hover td { + background: #fbfdff; +} + +/* ========================= + 11. RESPONSIVE ========================= */ @media (max-width: 900px) { - .pricing-grid, - .module-blocks, .two-col { grid-template-columns: 1fr; } - .top-nav a { - min-width: auto; - } - .header-inner { flex-direction: column; align-items: flex-start; } -} -.info-section { - margin-bottom: 30px; -} - -.check-list { - padding-left: 20px; -} - -.check-list li { - margin-bottom: 8px; -} - -.user-menu { - position: relative; - display: inline-block; -} - -.user-menu-toggle { - background: #376da6; - color: #fff; - border: 0; - border-radius: 999px; - padding: 10px 18px; - font-weight: 600; - cursor: pointer; - min-width: 140px; -} - -.user-menu-dropdown { - display: none; - position: absolute; - right: 0; - top: 100%; - margin-top: 0; - min-width: 180px; - background: #ffffff; - border-radius: 12px; - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); - overflow: hidden; - z-index: 200; -} - -.user-menu-dropdown a { - display: block; - padding: 12px 16px; - color: #1b2430; - text-decoration: none; - text-align: left; -} - -.user-menu-dropdown a:hover { - background: #eef4fb; - color: #0d2f57; -} - -.user-menu:hover .user-menu-dropdown, -.user-menu:focus-within .user-menu-dropdown { - display: block; -} - -.admin-form, -.admin-card-form { - margin-bottom: 24px; -} - -.admin-card { - background: #f8fbff; - border: 1px solid #dce3ea; - border-radius: 16px; - padding: 20px; - margin-bottom: 20px; -} - -.admin-actions { - display: flex; - margin-top: 16px; - gap: 16px; - align-items: center; /* 🔥 wichtig */ -} - -.btn-danger { - display: inline-block; - padding: 12px 18px; - border: 0; - border-radius: 10px; - background: #b62323; - color: #ffffff; - font-weight: 700; - cursor: pointer; -} - -.admin-table { - width: 100%; - border-collapse: collapse; -} - -.admin-table th, -.admin-table td { - padding: 12px 14px; - border-bottom: 1px solid #dce3ea; - text-align: left; -} - -.admin-table th { - width: 220px; - color: #0d2f57; -} -.success-box { - margin-bottom: 18px; - padding: 14px 16px; - background: #e8f7e8; - color: #1f6b1f; - border: 1px solid #b9e0b9; - border-radius: 10px; -} - -.btn-primary, -.btn-secondary { - display: inline-flex; - align-items: center; - justify-content: center; - - height: 48px; /* 🔥 gleiche Höhe */ - padding: 0 20px; /* 🔥 vertikal rausnehmen */ - - border-radius: 12px; - font-weight: 700; - text-decoration: none; - box-sizing: border-box; -} - -.btn-primary { - background: #1f5ea8; - color: #fff; - border: 1px solid #1f5ea8; -} - -.btn-secondary { - background: #eef4fb; - color: #0d2f57; - border: 1px solid #dce3ea; -} + .top-nav a { + min-width: auto; + } +} \ No newline at end of file