Move admin nav to a left sidebar; shrink table buttons; keep
action buttons on one line - Wrap the Administration tab in a 260px sidebar + main grid. The category buttons stack vertically inside the sidebar and stay sticky while the content area scrolls. Below 900px viewports the sidebar collapses back to a horizontal row. - Compact button defaults for anything inside a table cell (table button / td button) override the global 12px/24px padding with 5px/10px and a smaller font. Marks every last-child <td> as nowrap so the Bearbeiten/Löschen pair (and similar action sets) stays on a single line instead of wrapping vertically. - Adjacent action buttons get a 5px gap via "button + button" without touching the existing inline margin-right declarations. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed
1 parent
041df61b24
commit
bea45b9d2b
1 file changed
+112
-62
+112
-62
@@ -166,51 +166,60 @@
|
|||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* New Admin Interface Styles */
|
/* New Admin Interface Styles: sidebar + content */
|
||||||
.admin-nav {
|
.admin-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 260px 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-sidebar {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 20px;
|
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
position: sticky;
|
||||||
|
top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-nav h2 {
|
.admin-sidebar h2 {
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 16px 0;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-main {
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-categories {
|
.admin-categories {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 6px;
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-cat-btn {
|
.admin-cat-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 10px;
|
||||||
padding: 20px;
|
padding: 10px 14px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 2px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
border-radius: 12px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.15s ease;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-cat-btn:hover {
|
.admin-cat-btn:hover {
|
||||||
background: #e3f2fd;
|
background: #e3f2fd;
|
||||||
border-color: #2196f3;
|
border-color: #2196f3;
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-cat-btn.active {
|
.admin-cat-btn.active {
|
||||||
@@ -220,8 +229,43 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.admin-icon {
|
.admin-icon {
|
||||||
font-size: 24px;
|
font-size: 18px;
|
||||||
display: block;
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.admin-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.admin-sidebar {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
.admin-categories {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.admin-cat-btn {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact buttons for tables and action cells */
|
||||||
|
table button,
|
||||||
|
td button,
|
||||||
|
.btn-sm {
|
||||||
|
padding: 5px 10px !important;
|
||||||
|
font-size: 13px !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.actions, .action-cell, table th:last-child, table td:last-child {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
table button + button,
|
||||||
|
td button + button,
|
||||||
|
.btn-row button + button {
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-category {
|
.admin-category {
|
||||||
@@ -1175,44 +1219,48 @@
|
|||||||
|
|
||||||
<!-- Administration Tab -->
|
<!-- Administration Tab -->
|
||||||
<div id="admin" class="tab-content">
|
<div id="admin" class="tab-content">
|
||||||
<!-- Admin Navigation -->
|
<div class="admin-layout">
|
||||||
<div class="admin-nav">
|
<!-- Sidebar -->
|
||||||
<h2>Administration</h2>
|
<aside class="admin-sidebar">
|
||||||
<div class="admin-categories">
|
<h2>Administration</h2>
|
||||||
<button class="admin-cat-btn active" onclick="showAdminCategory('anbieter')">
|
<div class="admin-categories">
|
||||||
<span class="admin-icon">🏢</span>
|
<button class="admin-cat-btn active" onclick="showAdminCategory('anbieter')">
|
||||||
<span>Anbieter</span>
|
<span class="admin-icon">🏢</span>
|
||||||
</button>
|
<span>Anbieter</span>
|
||||||
<button class="admin-cat-btn" onclick="showAdminCategory('vos')">
|
</button>
|
||||||
<span class="admin-icon">🔢</span>
|
<button class="admin-cat-btn" onclick="showAdminCategory('vos')">
|
||||||
<span>VOs (Vertriebspartner)</span>
|
<span class="admin-icon">🔢</span>
|
||||||
</button>
|
<span>VOs (Vertriebspartner)</span>
|
||||||
<button class="admin-cat-btn" onclick="showAdminCategory('tarife')">
|
</button>
|
||||||
<span class="admin-icon">📋</span>
|
<button class="admin-cat-btn" onclick="showAdminCategory('tarife')">
|
||||||
<span>Tarife</span>
|
<span class="admin-icon">📋</span>
|
||||||
</button>
|
<span>Tarife</span>
|
||||||
<button class="admin-cat-btn" onclick="showAdminCategory('tarifoptionen')">
|
</button>
|
||||||
<span class="admin-icon">⚙️</span>
|
<button class="admin-cat-btn" onclick="showAdminCategory('tarifoptionen')">
|
||||||
<span>Tarifoptionen</span>
|
<span class="admin-icon">⚙️</span>
|
||||||
</button>
|
<span>Tarifoptionen</span>
|
||||||
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-prozentsaetze')">
|
</button>
|
||||||
<span class="admin-icon">📊</span>
|
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-prozentsaetze')">
|
||||||
<span>Mitarbeiter-Prozentsätze</span>
|
<span class="admin-icon">📊</span>
|
||||||
</button>
|
<span>Mitarbeiter-Prozentsätze</span>
|
||||||
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-provisionen')">
|
</button>
|
||||||
<span class="admin-icon">👤</span>
|
<button class="admin-cat-btn" onclick="showAdminCategory('mitarbeiter-provisionen')">
|
||||||
<span>Mitarbeiter-Provisionen</span>
|
<span class="admin-icon">👤</span>
|
||||||
</button>
|
<span>Mitarbeiter-Provisionen</span>
|
||||||
<button class="admin-cat-btn" onclick="showAdminCategory('provisionsregeln')">
|
</button>
|
||||||
<span class="admin-icon">📝</span>
|
<button class="admin-cat-btn" onclick="showAdminCategory('provisionsregeln')">
|
||||||
<span>Provisionsregeln</span>
|
<span class="admin-icon">📝</span>
|
||||||
</button>
|
<span>Provisionsregeln</span>
|
||||||
<button class="admin-cat-btn" onclick="showAdminCategory('global-provisionsregeln')">
|
</button>
|
||||||
<span class="admin-icon">🌐</span>
|
<button class="admin-cat-btn" onclick="showAdminCategory('global-provisionsregeln')">
|
||||||
<span>Globale Provisionsregeln</span>
|
<span class="admin-icon">🌐</span>
|
||||||
</button>
|
<span>Globale Provisionsregeln</span>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<main class="admin-main">
|
||||||
|
|
||||||
<!-- Anbieter Management -->
|
<!-- Anbieter Management -->
|
||||||
<div id="admin-anbieter" class="admin-category active">
|
<div id="admin-anbieter" class="admin-category active">
|
||||||
@@ -1502,6 +1550,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Benutzer-Verwaltung Tab (admin only) -->
|
<!-- Benutzer-Verwaltung Tab (admin only) -->
|
||||||
|
|||||||
Reference in new issue
Block a user