kerimatilgan/prov
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI redesign step 5 (admin shell): Stitch-styled sidebar + page chrome

Browse Source 
Refresh the Administration tab in line with the Stitch design system:

- Sidebar gets a soft cool-grey panel with a "Administration /
  Systemsteuerung" header. Each category button is a flat row with a
  Material Symbol on the left, label-caps text on the right; the
  active entry switches to a solid primary fill with a filled icon.
- Replace the emoji icons (🏢 🔢 …) with the matching Material
  symbols (corporate_fare, badge, receipt_long, tune, percent,
  payments, rule, public).
- Admin sub-pages drop the lavender gradient header and split into
  bordered white cards: section header (h3 + p) sits on the page
  background, form and content sections are independent surface
  cards with a subtle shadow.
- Form controls (text/number/date inputs, selects, textareas) now
  share a compact h-30ish style with focus ring; labels render as
  label-caps. Primary form buttons swap from the legacy green to the
  primary blue.
- Admin table reuses the same column header band as the Übersicht
  and Provisionen tables. Action buttons override the generic
  `table button` reset back to text-style pills with proper success /
  danger variants.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed 2026-05-15 20:16:29 +02:00
1 parent de10e3c901
commit 7da168e213
1 file changed
+202 -88
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+202 -88
View File
@@ -253,70 +253,87 @@
} }
/* New Admin Interface Styles: sidebar + content */ /* New Admin Interface Styles: sidebar + content */
/* Admin layout — Stitch style sidebar + content pane */
.admin-layout { .admin-layout {
display: grid; display: grid;
grid-template-columns: 260px 1fr; grid-template-columns: 260px 1fr;
gap: 20px; gap: 24px;
align-items: start; align-items: start;
} }
.admin-sidebar { .admin-sidebar {
background: white; background: #eff4ff;
padding: 20px; padding: 16px;
border: 1px solid #c3c6d7;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
position: sticky; position: sticky;
top: 20px; top: 76px;
} }
.admin-sidebar h2 { .admin-sidebar h2 {
margin: 0 0 4px 0;
color: #0b1c30;
font-size: 14px;
font-weight: 600;
padding: 0 8px;
}
.admin-sidebar .admin-sidebar-subtitle {
margin: 0 0 16px 0; margin: 0 0 16px 0;
color: #2c3e50; color: #434655;
text-align: left; font-size: 13px;
font-size: 18px; padding: 0 8px;
} }
.admin-main { .admin-main {
min-width: 0; min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
} }
.admin-categories { .admin-categories {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 2px;
} }
.admin-cat-btn { .admin-cat-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
padding: 10px 14px; padding: 8px 12px;
background: #ffffff; background: transparent;
border: 1px solid #dee2e6; border: none;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
text-align: left; text-align: left;
font-size: 14px; font-family: inherit;
font-size: 13px;
font-weight: 500; font-weight: 500;
color: #2c3e50; color: #434655;
width: 100%; width: 100%;
} }
.admin-cat-btn .material-symbols-outlined {
font-size: 20px;
color: #737686;
flex-shrink: 0;
}
.admin-cat-btn:hover { .admin-cat-btn:hover {
background: #e3f2fd; background: #dce9ff;
border-color: #2196f3; color: #0b1c30;
}
.admin-cat-btn:hover .material-symbols-outlined {
color: #0b1c30;
} }
.admin-cat-btn.active { .admin-cat-btn.active {
background: #2196f3; background: #2563eb;
color: white; color: #ffffff;
border-color: #1976d2; font-weight: 600;
} }
.admin-cat-btn.active .material-symbols-outlined {
.admin-icon { color: #ffffff;
font-size: 18px; font-variation-settings: 'FILL' 1;
line-height: 1;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@@ -356,59 +373,56 @@
.admin-category { .admin-category {
display: none; display: none;
animation: fadeIn 0.3s ease-in;
} }
.admin-category.active { .admin-category.active {
display: block; display: flex;
flex-direction: column;
gap: 24px;
} }
/* Each admin sub-page is now a column of bordered cards */
.admin-page { .admin-page {
background: white; display: flex;
border-radius: 12px; flex-direction: column;
box-shadow: 0 4px 15px rgba(0,0,0,0.1); gap: 24px;
overflow: hidden;
} }
.admin-header { .admin-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: transparent;
color: white; padding: 0;
padding: 30px; text-align: left;
text-align: center; color: inherit;
border-bottom: 1px solid #c3c6d7;
padding-bottom: 16px;
} }
.admin-header h3 { .admin-header h3 {
margin: 0 0 10px 0; margin: 0 0 4px 0;
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #0b1c30;
letter-spacing: -0.01em;
} }
.admin-header p { .admin-header p {
margin: 0; margin: 0;
opacity: 0.9; color: #434655;
font-size: 16px; font-size: 14px;
} opacity: 1;
.admin-form-section {
padding: 30px;
border-bottom: 1px solid #eee;
background: #f8f9fa;
}
.admin-form-section h4 {
margin: 0 0 20px 0;
color: #495057;
font-size: 18px;
} }
.admin-form-section,
.admin-content-section { .admin-content-section {
padding: 30px; padding: 20px;
background: #ffffff;
border: 1px solid #c3c6d7;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
} }
.admin-form-section h4,
.admin-content-section h4 { .admin-content-section h4 {
margin: 0 0 20px 0; margin: 0 0 16px 0;
color: #495057; color: #0b1c30;
font-size: 18px; font-size: 16px;
font-weight: 600;
} }
.form-row { .form-row {
@@ -473,37 +487,87 @@
} }
.admin-list { .admin-list {
display: grid; display: flex;
gap: 10px; flex-direction: column;
gap: 8px;
} }
.admin-table { .admin-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-top: 10px; font-size: 13px;
} }
.admin-table thead {
.admin-table th, background: #dce9ff;
.admin-table td { border-bottom: 2px solid #c3c6d7;
padding: 12px;
text-align: left;
border-bottom: 1px solid #dee2e6;
} }
.admin-table th { .admin-table th {
background: #f8f9fa; padding: 10px 16px;
font-weight: 600; text-align: left;
color: #495057; font-family: 'Hanken Grotesk', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #434655;
} }
.admin-table td {
.admin-table tr:hover { padding: 8px 16px;
background: #f8f9fa; border-bottom: 1px solid rgba(195, 198, 215, 0.3);
color: #0b1c30;
}
.admin-table tbody tr:nth-child(even) {
background: rgba(239, 244, 255, 0.5);
}
.admin-table tbody tr:hover {
background: rgba(211, 228, 254, 0.3);
} }
.table-container { .table-container {
overflow-x: auto; overflow-x: auto;
border: 1px solid #c3c6d7;
border-radius: 8px;
background: #ffffff;
}
/* Admin table action buttons — Stitch-like text buttons.
Overrides the table-button reset for the admin tables. */
.admin-table button {
background: #ffffff;
color: #434655;
padding: 4px 10px;
border: 1px solid #c3c6d7;
border-radius: 6px; border-radius: 6px;
border: 1px solid #dee2e6; font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.admin-table button:hover {
background: #dce9ff;
color: #0b1c30;
border-color: #2563eb;
}
.admin-table button.btn-success,
.admin-table button.btn-primary {
background: #2563eb;
color: #ffffff;
border-color: #2563eb;
}
.admin-table button.btn-success:hover,
.admin-table button.btn-primary:hover {
background: #004ac6;
border-color: #004ac6;
}
.admin-table button.btn-danger {
background: #ffffff;
color: #ba1a1a;
border-color: #ffdad6;
}
.admin-table button.btn-danger:hover {
background: #ffdad6;
border-color: #ba1a1a;
} }
@keyframes fadeIn { @keyframes fadeIn {
@@ -526,6 +590,55 @@
} }
} }
/* Compact admin form controls */
.admin-form-section input[type=text],
.admin-form-section input[type=number],
.admin-form-section input[type=date],
.admin-form-section select,
.admin-form-section textarea {
padding: 6px 10px;
border: 1px solid #c3c6d7;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
background: #ffffff;
color: #0b1c30;
}
.admin-form-section input:focus,
.admin-form-section select:focus,
.admin-form-section textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.admin-form-section label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #434655;
min-width: 0;
}
/* Admin form buttons (primary + ghost) */
.admin-form-section .btn-success,
.admin-form-section .btn-primary,
.admin-form-section button.btn {
background: #2563eb;
color: #ffffff;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
border: none;
cursor: pointer;
transition: background 0.15s;
}
.admin-form-section .btn-success:hover,
.admin-form-section .btn-primary:hover,
.admin-form-section button.btn:hover {
background: #004ac6;
}
.add-form { .add-form {
display: flex; display: flex;
gap: 10px; gap: 10px;
@@ -1128,38 +1241,39 @@
<!-- Sidebar --> <!-- Sidebar -->
<aside class="admin-sidebar"> <aside class="admin-sidebar">
<h2>Administration</h2> <h2>Administration</h2>
<p class="admin-sidebar-subtitle">Systemsteuerung</p>
<div class="admin-categories"> <div class="admin-categories">
<button class="admin-cat-btn active" onclick="showAdminCategory('anbieter')"> <button class="admin-cat-btn active" onclick="showAdminCategory('anbieter')">
<span class="admin-icon">🏢</span> <span class="material-symbols-outlined">corporate_fare</span>
<span>Anbieter</span> <span>Anbieter</span>
</button> </button>
<button class="admin-cat-btn" onclick="showAdminCategory('vos')"> <button class="admin-cat-btn" onclick="showAdminCategory('vos')">
<span class="admin-icon">🔢</span> <span class="material-symbols-outlined">badge</span>
<span>VOs (Vertriebspartner)</span> <span>VOs</span>
</button> </button>
<button class="admin-cat-btn" onclick="showAdminCategory('tarife')"> <button class="admin-cat-btn" onclick="showAdminCategory('tarife')">
<span class="admin-icon">📋</span> <span class="material-symbols-outlined">receipt_long</span>
<span>Tarife</span> <span>Tarife</span>
</button> </button>
<button class="admin-cat-btn" onclick="showAdminCategory('tarifoptionen')"> <button class="admin-cat-btn" onclick="showAdminCategory('tarifoptionen')">
<span class="admin-icon">⚙️</span> <span class="material-symbols-outlined">tune</span>
<span>Tarifoptionen</span> <span>Tarifoptionen</span>
</button> </button>
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-prozentsaetze')"> <button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-prozentsaetze')">
<span class="admin-icon">📊</span> <span class="material-symbols-outlined">percent</span>
<span>Mitarbeiter-Prozentsätze</span> <span>MA-Prozentsätze</span>
</button> </button>
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-provisionen')"> <button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-provisionen')">
<span class="admin-icon">👤</span> <span class="material-symbols-outlined">payments</span>
<span>Mitarbeiter-Provisionen</span> <span>MA-Provisionen</span>
</button> </button>
<button class="admin-cat-btn" onclick="showAdminCategory('provisionsregeln')"> <button class="admin-cat-btn" onclick="showAdminCategory('provisionsregeln')">
<span class="admin-icon">📝</span> <span class="material-symbols-outlined">rule</span>
<span>Provisionsregeln</span> <span>Provisionsregeln</span>
</button> </button>
<button class="admin-cat-btn" onclick="showAdminCategory('global-provisionsregeln')"> <button class="admin-cat-btn" onclick="showAdminCategory('global-provisionsregeln')">
<span class="admin-icon">🌐</span> <span class="material-symbols-outlined">public</span>
<span>Globale Provisionsregeln</span> <span>Globale Regeln</span>
</button> </button>
</div> </div>
</aside> </aside>