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

Move admin nav to a left sidebar; shrink table buttons; keep

Browse Source 
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 2026-05-15 16:53:07 +02:00
1 parent 041df61b24
commit bea45b9d2b
1 file changed
+77 -27
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+77 -27
View File
@@ -166,51 +166,60 @@
color: #2c3e50;
}
/* New Admin Interface Styles */
.admin-nav {
/* New Admin Interface Styles: sidebar + content */
.admin-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 20px;
align-items: start;
}
.admin-sidebar {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
position: sticky;
top: 20px;
}
.admin-nav h2 {
margin: 0 0 20px 0;
.admin-sidebar h2 {
margin: 0 0 16px 0;
color: #2c3e50;
text-align: center;
text-align: left;
font-size: 18px;
}
.admin-main {
min-width: 0;
}
.admin-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.admin-cat-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px;
gap: 10px;
padding: 10px 14px;
background: #ffffff;
border: 2px solid #dee2e6;
border-radius: 12px;
border: 1px solid #dee2e6;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
transition: all 0.15s ease;
text-align: left;
font-size: 14px;
font-weight: 600;
font-weight: 500;
color: #2c3e50;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
width: 100%;
}
.admin-cat-btn:hover {
background: #e3f2fd;
border-color: #2196f3;
transform: translateY(-2px);
}
.admin-cat-btn.active {
@@ -220,8 +229,43 @@
}
.admin-icon {
font-size: 24px;
display: block;
font-size: 18px;
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 {
@@ -1175,8 +1219,9 @@
<!-- Administration Tab -->
<div id="admin" class="tab-content">
<!-- Admin Navigation -->
<div class="admin-nav">
<div class="admin-layout">
<!-- Sidebar -->
<aside class="admin-sidebar">
<h2>Administration</h2>
<div class="admin-categories">
<button class="admin-cat-btn active" onclick="showAdminCategory('anbieter')">
@@ -1212,7 +1257,10 @@
<span>Globale Provisionsregeln</span>
</button>
</div>
</div>
</aside>
<!-- Content -->
<main class="admin-main">
<!-- Anbieter Management -->
<div id="admin-anbieter" class="admin-category active">
@@ -1502,6 +1550,8 @@
</div>
</div>
</main>
</div>
</div>
<!-- Benutzer-Verwaltung Tab (admin only) -->