Skip to content

Commit 587095c

Browse files
blackcoffeexbtblackcoffeexbt
committed
Fix header layout and made mobile menu full screen
1 parent 2530a58 commit 587095c

5 files changed

Lines changed: 193 additions & 16 deletions

File tree

‎flake.nix‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
outputs = { self, nixpkgs, raspberry-pi-nix, lnbits, spark-sidecar, ... }:
2323
let
24-
version = "0.1.42"; # Bump before each release tag to match the next tag name
24+
version = "0.1.43"; # Bump before each release tag to match the next tag name
2525
system = "aarch64-linux";
2626
in
2727
{

‎nixos/admin-app/static/css/admin.css‎

Lines changed: 139 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1483,6 +1483,10 @@ input:focus {
14831483
flex: 1;
14841484
}
14851485

1486+
.admin-desktop-header {
1487+
display: block;
1488+
}
1489+
14861490
.admin-mobile-bar {
14871491
display: none;
14881492
align-items: center;
@@ -1495,6 +1499,14 @@ input:focus {
14951499
border-radius: 1rem;
14961500
}
14971501

1502+
.admin-header-actions {
1503+
display: flex;
1504+
align-items: center;
1505+
justify-content: flex-end;
1506+
gap: 0.75rem;
1507+
min-width: 0;
1508+
}
1509+
14981510
.admin-mobile-button {
14991511
display: inline-flex;
15001512
align-items: center;
@@ -1506,6 +1518,86 @@ input:focus {
15061518
background: rgb(var(--ln-surface));
15071519
}
15081520

1521+
.admin-sidebar-mobile-header,
1522+
.admin-sidebar-mobile-actions,
1523+
.admin-sidebar-mobile-power,
1524+
.admin-sidebar-close,
1525+
.admin-mobile-update-link,
1526+
.admin-sidebar-mobile-logout,
1527+
.admin-sidebar-mobile-power-btn {
1528+
display: none;
1529+
}
1530+
1531+
.admin-sidebar-mobile-header {
1532+
align-items: center;
1533+
justify-content: space-between;
1534+
gap: 1rem;
1535+
margin-bottom: 1.5rem;
1536+
}
1537+
1538+
.admin-sidebar-close {
1539+
align-items: center;
1540+
justify-content: center;
1541+
width: 2.75rem;
1542+
height: 2.75rem;
1543+
border-radius: 999px;
1544+
border: 1px solid rgb(var(--ln-border));
1545+
background: rgb(var(--ln-surface));
1546+
color: rgb(var(--ln-text));
1547+
}
1548+
1549+
.admin-sidebar-mobile-actions {
1550+
gap: 0.75rem;
1551+
margin-bottom: 1rem;
1552+
}
1553+
1554+
.admin-mobile-update-link {
1555+
width: 100%;
1556+
}
1557+
1558+
.admin-sidebar-mobile-logout {
1559+
align-items: center;
1560+
justify-content: center;
1561+
width: 100%;
1562+
padding: 0.95rem 1rem;
1563+
border-radius: 1rem;
1564+
border: 1px solid rgb(var(--ln-border));
1565+
background: rgb(var(--ln-surface));
1566+
color: rgb(var(--ln-text));
1567+
font-family: 'JetBrains Mono', monospace;
1568+
font-size: 0.82rem;
1569+
text-transform: uppercase;
1570+
letter-spacing: 0.08em;
1571+
}
1572+
1573+
.admin-sidebar-mobile-power {
1574+
gap: 0.75rem;
1575+
margin-bottom: 1.5rem;
1576+
}
1577+
1578+
.admin-sidebar-mobile-power-btn {
1579+
align-items: center;
1580+
justify-content: center;
1581+
width: 100%;
1582+
padding: 0.95rem 1rem;
1583+
border-radius: 1rem;
1584+
border: 1px solid rgb(var(--ln-border));
1585+
background: rgb(var(--ln-surface));
1586+
color: rgb(var(--ln-text));
1587+
font-family: 'JetBrains Mono', monospace;
1588+
font-size: 0.82rem;
1589+
text-transform: uppercase;
1590+
letter-spacing: 0.08em;
1591+
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
1592+
}
1593+
1594+
.admin-sidebar-mobile-power-btn:hover,
1595+
.admin-sidebar-mobile-logout:hover,
1596+
.admin-sidebar-close:hover {
1597+
border-color: rgb(var(--ln-pink) / 0.3);
1598+
color: rgb(var(--ln-pink));
1599+
}
1600+
15091601
.admin-page-header {
15101602
margin-bottom: 1.5rem;
15111603
background: linear-gradient(135deg, rgb(var(--ln-card)) 0%, rgb(var(--ln-surface)) 100%);
@@ -1720,37 +1812,75 @@ body.sidebar-open {
17201812
padding: 1rem;
17211813
}
17221814

1815+
.admin-desktop-header {
1816+
display: none;
1817+
}
1818+
17231819
.admin-layout {
17241820
display: block;
17251821
}
17261822

17271823
.admin-mobile-bar {
17281824
display: flex;
1825+
position: sticky;
1826+
top: 1rem;
1827+
z-index: 40;
17291828
}
17301829

17311830
.admin-sidebar {
17321831
position: fixed;
1733-
inset: 0 auto 0 0;
1734-
width: min(20rem, calc(100vw - 2.5rem));
1832+
inset: 0;
1833+
width: 100vw;
1834+
height: 100dvh;
17351835
z-index: 60;
17361836
transform: translateX(-110%);
17371837
transition: transform 0.2s ease;
1738-
padding: 1rem 0 1rem 1rem;
1838+
padding: 0;
1839+
background: linear-gradient(180deg, rgba(7, 8, 18, 0.98) 0%, rgba(5, 6, 14, 0.995) 100%);
1840+
overflow-y: auto;
17391841
}
17401842

17411843
body.sidebar-open .admin-sidebar {
17421844
transform: translateX(0);
17431845
}
17441846

1847+
.admin-sidebar-card {
1848+
min-height: 100dvh;
1849+
border: 0;
1850+
border-radius: 0;
1851+
box-shadow: none;
1852+
padding: 1.25rem 1rem 2rem;
1853+
background: transparent;
1854+
}
1855+
1856+
.admin-sidebar-mobile-header,
1857+
.admin-sidebar-mobile-actions,
1858+
.admin-sidebar-mobile-power {
1859+
display: grid;
1860+
}
1861+
1862+
.admin-sidebar-close,
1863+
.admin-sidebar-mobile-logout,
1864+
.admin-sidebar-mobile-power-btn {
1865+
display: inline-flex;
1866+
}
1867+
1868+
.admin-sidebar-link {
1869+
padding: 1rem;
1870+
border-radius: 1rem;
1871+
}
1872+
1873+
.admin-sidebar-link-label {
1874+
font-size: 1.45rem;
1875+
line-height: 1.2;
1876+
}
1877+
17451878
.admin-sidebar-backdrop {
1746-
position: fixed;
1747-
inset: 0;
1748-
background: rgba(0, 0, 0, 0.4);
1749-
z-index: 55;
1879+
display: none;
17501880
}
17511881

17521882
body.sidebar-open .admin-sidebar-backdrop {
1753-
display: block;
1883+
display: none;
17541884
}
17551885

17561886
.admin-overview-grid {
@@ -1770,4 +1900,4 @@ body.sidebar-open {
17701900

17711901
#tunnel-card {
17721902
border-color: rgb(var(--ln-pink) / 0.6);
1773-
}
1903+
}

‎nixos/admin-app/static/js/admin-shell.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
(function () {
22
const sidebar = document.getElementById('admin-sidebar');
33
const toggle = document.getElementById('admin-sidebar-toggle');
4+
const closeButton = document.getElementById('admin-sidebar-close');
45
const backdrop = document.getElementById('admin-sidebar-backdrop');
5-
const updateLink = document.getElementById('header-update-link');
6+
const updateLinks = document.querySelectorAll('[data-update-link]');
67

78
function closeSidebar() {
89
document.body.classList.remove('sidebar-open');
@@ -14,21 +15,28 @@
1415
});
1516

1617
backdrop.addEventListener('click', closeSidebar);
18+
closeButton?.addEventListener('click', closeSidebar);
1719

1820
sidebar.querySelectorAll('a').forEach(function (link) {
1921
link.addEventListener('click', closeSidebar);
2022
});
2123
}
2224

23-
if (updateLink) {
25+
document.addEventListener('keydown', function (event) {
26+
if (event.key === 'Escape') closeSidebar();
27+
});
28+
29+
if (updateLinks.length) {
2430
fetch('/box/api/update/check')
2531
.then(function (resp) {
2632
if (!resp.ok) return null;
2733
return resp.json();
2834
})
2935
.then(function (data) {
3036
if (!data || !data.update_available) return;
31-
updateLink.classList.add('visible');
37+
updateLinks.forEach(function (link) {
38+
link.classList.add('visible');
39+
});
3240
})
3341
.catch(function () {});
3442
}

‎nixos/admin-app/templates/admin_page.html‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44

55
{% block content %}
66
<div class="admin-shell" id="dashboard-root" data-dev-mode="{{ 'true' if dev_mode else 'false' }}" data-page-key="{{ active_page }}">
7-
<header class="rounded-2xl px-4 sm:px-6 py-4 mb-4 sticky top-4 z-10">
7+
<header class="admin-desktop-header rounded-2xl px-4 sm:px-6 py-4 mb-4 sticky top-4 z-10">
88
<div class="flex items-center justify-between gap-4">
99
<div class="flex items-center gap-3 min-w-0">
1010
{% include "partials/logo.html" %}
1111
</div>
12-
<div class="flex items-center gap-3">
13-
<a href="{{ url_for('maintenance_page') }}" id="header-update-link" class="header-update-link">
12+
<div class="admin-header-actions">
13+
<a href="{{ url_for('maintenance_page') }}" id="header-update-link" data-update-link class="header-update-link">
1414
Update available
1515
</a>
1616
<details class="relative power-menu">
@@ -47,6 +47,30 @@
4747
<div class="admin-layout">
4848
<aside class="admin-sidebar" id="admin-sidebar">
4949
<div class="admin-sidebar-card">
50+
<div class="admin-sidebar-mobile-header">
51+
{% include "partials/logo.html" %}
52+
<button class="admin-sidebar-close" id="admin-sidebar-close" aria-label="Close navigation">
53+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l12 12M18 6L6 18"/></svg>
54+
</button>
55+
</div>
56+
57+
<div class="admin-sidebar-mobile-actions">
58+
<a href="{{ url_for('maintenance_page') }}" data-update-link class="header-update-link admin-mobile-update-link">
59+
Update available
60+
</a>
61+
<a href="{{ url_for('logout') }}" class="admin-sidebar-mobile-logout">
62+
Sign out
63+
</a>
64+
</div>
65+
66+
<div class="admin-sidebar-mobile-power">
67+
<button data-confirm-action="reboot" data-confirm-message="Reboot LNbitsBox?" class="admin-sidebar-mobile-power-btn">
68+
Restart
69+
</button>
70+
<button data-confirm-action="shutdown" data-confirm-message="Shut down LNbitsBox?" class="admin-sidebar-mobile-power-btn">
71+
Power Off
72+
</button>
73+
</div>
5074

5175
<a href="{{ url_for('dashboard') }}" class="admin-sidebar-link {% if active_page == 'overview' %}active{% endif %}">
5276
<span class="admin-sidebar-link-label">Overview</span>

‎nixos/admin-app/templates/partials/power.svg‎

Lines changed: 15 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)