UI redesign step 5 (admin shell): Stitch-styled sidebar + page chrome
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
1 parent
de10e3c901
commit
7da168e213
1 file changed
+202
-88
+202
-88
@@ -253,70 +253,87 @@
|
||||
}
|
||||
|
||||
/* New Admin Interface Styles: sidebar + content */
|
||||
/* Admin layout — Stitch style sidebar + content pane */
|
||||
.admin-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
gap: 20px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
background: #eff4ff;
|
||||
padding: 16px;
|
||||
border: 1px solid #c3c6d7;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
top: 76px;
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #2c3e50;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
color: #434655;
|
||||
font-size: 13px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.admin-categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.admin-cat-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dee2e6;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
color: #434655;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-cat-btn .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
color: #737686;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.admin-cat-btn:hover {
|
||||
background: #e3f2fd;
|
||||
border-color: #2196f3;
|
||||
background: #dce9ff;
|
||||
color: #0b1c30;
|
||||
}
|
||||
.admin-cat-btn:hover .material-symbols-outlined {
|
||||
color: #0b1c30;
|
||||
}
|
||||
|
||||
.admin-cat-btn.active {
|
||||
background: #2196f3;
|
||||
color: white;
|
||||
border-color: #1976d2;
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-icon {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
.admin-cat-btn.active .material-symbols-outlined {
|
||||
color: #ffffff;
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -356,59 +373,56 @@
|
||||
|
||||
.admin-category {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
border-bottom: 1px solid #c3c6d7;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.admin-header h3 {
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #0b1c30;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.admin-header p {
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #434655;
|
||||
font-size: 14px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.admin-form-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 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #495057;
|
||||
font-size: 18px;
|
||||
margin: 0 0 16px 0;
|
||||
color: #0b1c30;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
@@ -473,37 +487,87 @@
|
||||
}
|
||||
|
||||
.admin-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
.admin-table thead {
|
||||
background: #dce9ff;
|
||||
border-bottom: 2px solid #c3c6d7;
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
padding: 10px 16px;
|
||||
text-align: left;
|
||||
font-family: 'Hanken Grotesk', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #434655;
|
||||
}
|
||||
|
||||
.admin-table tr:hover {
|
||||
background: #f8f9fa;
|
||||
.admin-table td {
|
||||
padding: 8px 16px;
|
||||
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 {
|
||||
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: 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 {
|
||||
@@ -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 {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@@ -1128,38 +1241,39 @@
|
||||
<!-- Sidebar -->
|
||||
<aside class="admin-sidebar">
|
||||
<h2>Administration</h2>
|
||||
<p class="admin-sidebar-subtitle">Systemsteuerung</p>
|
||||
<div class="admin-categories">
|
||||
<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>
|
||||
</button>
|
||||
<button class="admin-cat-btn" onclick="showAdminCategory('vos')">
|
||||
<span class="admin-icon">🔢</span>
|
||||
<span>VOs (Vertriebspartner)</span>
|
||||
<span class="material-symbols-outlined">badge</span>
|
||||
<span>VOs</span>
|
||||
</button>
|
||||
<button class="admin-cat-btn" onclick="showAdminCategory('tarife')">
|
||||
<span class="admin-icon">📋</span>
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
<span>Tarife</span>
|
||||
</button>
|
||||
<button class="admin-cat-btn" onclick="showAdminCategory('tarifoptionen')">
|
||||
<span class="admin-icon">⚙️</span>
|
||||
<span class="material-symbols-outlined">tune</span>
|
||||
<span>Tarifoptionen</span>
|
||||
</button>
|
||||
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-prozentsaetze')">
|
||||
<span class="admin-icon">📊</span>
|
||||
<span>Mitarbeiter-Prozentsätze</span>
|
||||
<span class="material-symbols-outlined">percent</span>
|
||||
<span>MA-Prozentsätze</span>
|
||||
</button>
|
||||
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-provisionen')">
|
||||
<span class="admin-icon">👤</span>
|
||||
<span>Mitarbeiter-Provisionen</span>
|
||||
<span class="material-symbols-outlined">payments</span>
|
||||
<span>MA-Provisionen</span>
|
||||
</button>
|
||||
<button class="admin-cat-btn" onclick="showAdminCategory('provisionsregeln')">
|
||||
<span class="admin-icon">📝</span>
|
||||
<span class="material-symbols-outlined">rule</span>
|
||||
<span>Provisionsregeln</span>
|
||||
</button>
|
||||
<button class="admin-cat-btn" onclick="showAdminCategory('global-provisionsregeln')">
|
||||
<span class="admin-icon">🌐</span>
|
||||
<span>Globale Provisionsregeln</span>
|
||||
<span class="material-symbols-outlined">public</span>
|
||||
<span>Globale Regeln</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
Reference in new issue
Block a user