diff --git a/CHANGELOG.md b/CHANGELOG.md index 0dc20c5..e0f9519 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,26 @@ # Changelog +## [0.3.5] - 2026-02-15 +### Changed +- Dashboard und Scheduler auf AdminLTE-Style umgestellt +- Feste Sidebar-Navigation (Dashboard, Scheduler, Karte) mit Active-State +- Fixed Top-Navbar mit Branding, Status-Dot und Theme-Toggle +- Content-Wrapper mit leicht abgesetztem Hintergrund +- Info-Boxes im AdminLTE-Stil (Icon-Spalte + Inhalt) statt Cards +- Card-Outline mit farbiger Oberkante (info/warning) statt Borders +- Table-Striped fuer bessere Lesbarkeit +- Sidebar responsive: auf Mobile als Overlay mit Backdrop +- Einheitliches Layout auf Dashboard und Scheduler + +## [0.3.4] - 2026-02-15 +### Fixed +- Kanalnamen in Nachrichten fehlten beim Laden (Channels werden jetzt vor Messages gesendet) + +### Changed +- Dashboard deutlich kompakter: weniger Padding, kleinere Schriftgroessen +- Stat-Cards, Navbar, Panels und Nachrichten platzsparender +- Hover-Animationen und Pulse-Effekt entfernt (schlichter) + ## [0.3.3] - 2026-02-15 ### Changed - Dashboard-Layout modernisiert: Glassmorphism-Navbar (sticky, blur-Effekt) diff --git a/config.yaml b/config.yaml index 8769c95..e163905 100644 --- a/config.yaml +++ b/config.yaml @@ -1,4 +1,4 @@ -version: "0.3.3" +version: "0.3.5" bot: name: "MeshDD-Bot" diff --git a/meshbot/webserver.py b/meshbot/webserver.py index ef0a82d..8abbe27 100644 --- a/meshbot/webserver.py +++ b/meshbot/webserver.py @@ -67,13 +67,13 @@ class WebServer: stats["version"] = config.get("version", "0.0.0") await ws.send_str(json.dumps({"type": "stats_update", "data": stats})) - messages = await self.db.get_recent_messages(50) - await ws.send_str(json.dumps({"type": "initial_messages", "data": messages})) - if self.bot: channels = self.bot.get_channels() await ws.send_str(json.dumps({"type": "channels", "data": channels})) + messages = await self.db.get_recent_messages(50) + await ws.send_str(json.dumps({"type": "initial_messages", "data": messages})) + async for msg in ws: pass # We only send, not receive finally: diff --git a/static/css/style.css b/static/css/style.css index 00e02b3..9bef8e8 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,102 +1,189 @@ -/* Status indicator */ +/* ── AdminLTE-style Layout ─────────────────────────── */ + +/* Top Navbar */ +.top-navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 46px; + z-index: 1030; + background: var(--bs-body-bg); + border-bottom: 1px solid var(--bs-border-color); + font-size: .875rem; +} + +/* Sidebar */ +.sidebar { + position: fixed; + top: 46px; + left: 0; + bottom: 0; + width: 200px; + background: var(--bs-body-bg); + border-right: 1px solid var(--bs-border-color); + z-index: 1020; + overflow-y: auto; + transition: transform 0.2s ease; +} + +.sidebar-nav { + display: flex; + flex-direction: column; + padding: 0.5rem 0; +} + +.sidebar-link { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.5rem 1rem; + color: var(--bs-body-color); + text-decoration: none; + font-size: .85rem; + border-left: 3px solid transparent; + transition: background 0.15s; +} + +.sidebar-link:hover { + background: rgba(var(--bs-emphasis-color-rgb), 0.06); + color: var(--bs-body-color); +} + +.sidebar-link.active { + background: rgba(var(--bs-info-rgb), 0.08); + border-left-color: var(--bs-info); + color: var(--bs-info); + font-weight: 600; +} + +.sidebar-link i { + font-size: 1rem; + width: 1.25rem; + text-align: center; +} + +/* Mobile sidebar */ +.sidebar-backdrop { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.4); + z-index: 1019; +} + +@media (max-width: 991.98px) { + .sidebar { + transform: translateX(-100%); + } + .sidebar.open { + transform: translateX(0); + } + .sidebar.open ~ .sidebar-backdrop { + display: block; + } + .content-wrapper { + margin-left: 0 !important; + } +} + +/* Content wrapper */ +.content-wrapper { + margin-top: 46px; + margin-left: 200px; + padding: 0.75rem; + min-height: calc(100vh - 46px); + background: rgba(var(--bs-emphasis-color-rgb), 0.03); +} + +/* ── Info Boxes (AdminLTE style) ──────────────────── */ + +.info-box { + display: flex; + align-items: stretch; + background: var(--bs-body-bg); + border: 1px solid var(--bs-border-color); + border-radius: 0.375rem; + min-height: 60px; + overflow: hidden; +} + +.info-box-icon { + display: flex; + align-items: center; + justify-content: center; + width: 56px; + font-size: 1.4rem; + flex-shrink: 0; +} + +.info-box-content { + display: flex; + flex-direction: column; + justify-content: center; + padding: 0.4rem 0.75rem; + line-height: 1.2; +} + +.info-box-label { + font-size: .75rem; + color: var(--bs-secondary-color); +} + +.info-box-number { + font-size: 1.25rem; + font-weight: 700; +} + +/* ── Card outline (AdminLTE style) ────────────────── */ + +.card-outline { + border-top: 3px solid var(--bs-border-color); +} + +.card-outline.card-info { + border-top-color: var(--bs-info); +} + +.card-outline.card-warning { + border-top-color: var(--bs-warning); +} + +.card-outline.card-success { + border-top-color: var(--bs-success); +} + +.card-outline.card-primary { + border-top-color: var(--bs-primary); +} + +.card-header { + font-weight: 600; + font-size: .875rem; + padding: 0.5rem 0.75rem; +} + +/* ── Status dot ──────────────────────────────────── */ + .status-dot { display: inline-block; - width: 10px; - height: 10px; + width: 8px; + height: 8px; border-radius: 50%; background: var(--bs-danger); - transition: all 0.3s ease; } .status-dot.connected { background: var(--bs-success); - box-shadow: 0 0 8px var(--bs-success); - animation: pulse-dot 2s infinite; + box-shadow: 0 0 5px var(--bs-success); } -@keyframes pulse-dot { - 0%, 100% { box-shadow: 0 0 4px var(--bs-success); } - 50% { box-shadow: 0 0 12px var(--bs-success); } -} +/* ── Messages ────────────────────────────────────── */ -/* Navbar glass effect */ -.navbar-glass { - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - background: rgba(var(--bs-body-bg-rgb), 0.85) !important; - border-bottom: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.08); -} - -/* Scrollbar */ -.table-responsive::-webkit-scrollbar, -.msg-scroll::-webkit-scrollbar { - width: 5px; -} - -.table-responsive::-webkit-scrollbar-track, -.msg-scroll::-webkit-scrollbar-track { - background: transparent; -} - -.table-responsive::-webkit-scrollbar-thumb, -.msg-scroll::-webkit-scrollbar-thumb { - background: var(--bs-border-color); - border-radius: 3px; -} - -/* Stat cards */ -.stat-card { - border: none; - border-radius: 0.75rem; - overflow: hidden; - position: relative; - transition: transform 0.15s ease, box-shadow 0.15s ease; -} - -.stat-card:hover { - transform: translateY(-2px); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); -} - -.stat-card .stat-accent { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; -} - -.stat-card .stat-icon { - font-size: 1.8rem; - opacity: 0.15; - position: absolute; - right: 12px; - top: 10px; -} - -/* Panel cards */ -.panel-card { - border: none; - border-radius: 0.75rem; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); - overflow: hidden; -} - -.panel-card .card-header { - background: transparent; - border-bottom: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.06); - padding: 0.65rem 1rem; -} - -/* Messages */ .msg-item { - padding: 0.5rem 0.75rem; - border-bottom: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.04); - transition: background 0.15s ease; -} - -.msg-item:hover { - background: rgba(var(--bs-emphasis-color-rgb), 0.03); + padding: 0.35rem 0.65rem; + border-bottom: 1px solid var(--bs-border-color-translucent); + font-size: .8rem; } .msg-item:last-child { @@ -104,42 +191,28 @@ } .msg-bubble { - background: rgba(var(--bs-info-rgb), 0.08); - border-radius: 0.5rem 0.5rem 0.5rem 0.1rem; - padding: 0.35rem 0.6rem; + background: rgba(var(--bs-info-rgb), 0.06); + border-radius: 0.3rem; + padding: 0.2rem 0.45rem; display: inline-block; max-width: 100%; word-break: break-word; } -/* Node table rows */ -.nodes-table tbody tr { - transition: background 0.1s ease; +/* ── Scrollbar ───────────────────────────────────── */ + +.table-responsive::-webkit-scrollbar, +.card-body::-webkit-scrollbar { + width: 5px; } -/* Breakdown bar */ -.breakdown-bar { - border: none; - border-radius: 0.5rem; - background: rgba(var(--bs-primary-rgb), 0.06); +.table-responsive::-webkit-scrollbar-track, +.card-body::-webkit-scrollbar-track { + background: transparent; } -/* Send input */ -.send-bar { - border-top: 1px solid rgba(var(--bs-emphasis-color-rgb), 0.06); - background: rgba(var(--bs-emphasis-color-rgb), 0.02); - padding: 0.5rem 0.75rem; - border-radius: 0 0 0.75rem 0.75rem; -} - -.send-bar .form-control:focus, -.send-bar .form-select:focus { - box-shadow: none; - border-color: var(--bs-info); -} - -/* Badge pills */ -.badge-pill { - border-radius: 2rem; - font-weight: 500; +.table-responsive::-webkit-scrollbar-thumb, +.card-body::-webkit-scrollbar-thumb { + background: var(--bs-border-color); + border-radius: 3px; } diff --git a/static/index.html b/static/index.html index b8d79bb..775f093 100644 --- a/static/index.html +++ b/static/index.html @@ -9,97 +9,110 @@ - -