diff --git a/public/index.html b/public/index.html index 357bdb7..e2c370e 100644 --- a/public/index.html +++ b/public/index.html @@ -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,44 +1219,48 @@