rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact admin sidebar controls

Browse Source
This commit is contained in:
rajchales-monito
2026-07-24 13:46:50 +02:00
parent b936aede71
commit 8f5779133f
2 changed files with 79 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+68 -7
View File
@@ -69,21 +69,67 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
border-right: 1px solid var(--line);
background: var(--panel);
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr);
grid-template-rows: auto auto minmax(0, 1fr);
min-height: 0;
overflow: hidden;
}
.brand, .sitebar {
.brand {
height: var(--topbar-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
gap: 10px;
padding: 14px;
border-bottom: 1px solid var(--line);
}
.brand h1 { margin: 0; font-size: 20px; }
.brand button, .sitebar button { background: #edf3ef; color: var(--ink); }
.brand-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.brand button { background: #edf3ef; color: var(--ink); }
.icon-button {
width: 32px;
height: 32px;
padding: 0;
display: grid;
place-items: center;
}
.icon-button svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.logout-compact {
height: 32px;
padding: 0 10px;
font-size: 12px;
}
.online-dot-toggle {
width: 28px;
height: 32px;
display: grid;
place-items: center;
cursor: pointer;
}
.online-dot-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.online-dot-toggle span {
width: 11px;
height: 11px;
border-radius: 50%;
background: #c9d4ce;
box-shadow: 0 0 0 4px rgb(201 212 206 / 25%);
}
.online-dot-toggle input:checked + span {
background: #2f9e44;
box-shadow: 0 0 0 4px rgb(47 158 68 / 16%);
}
.switch { display: flex; align-items: center; gap: 8px; }
.switch input { width: auto; }
.setting-switch {
@@ -399,15 +445,30 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.visitor-detail-popover {
position: absolute;
z-index: 20;
top: calc(100% + 8px);
right: 0;
width: min(520px, calc(100vw - 420px));
top: calc(100% + 10px);
right: -8px;
width: min(520px, 64vw);
max-width: calc(100vw - 380px);
max-height: calc(100vh - 118px);
overflow: auto;
padding: 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: white;
box-shadow: 0 14px 32px rgb(0 0 0 / 13%);
}
.visitor-detail-popover:before {
position: absolute;
top: -6px;
right: 12px;
width: 10px;
height: 10px;
transform: rotate(45deg);
border-left: 1px solid var(--line);
border-top: 1px solid var(--line);
background: white;
content: "";
}
.visitor-detail-grid {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
public/admin.html
+11 -7
View File
@@ -23,14 +23,18 @@
<aside class="sidebar">
<div class="brand">
<h1>MaalFlows</h1>
<button id="logoutButton" type="button">Odhlasit</button>
</div>
<div class="sitebar">
<label class="switch">
<div class="brand-actions">
<label class="online-dot-toggle" title="Online stav chatu" aria-label="Online stav chatu">
<input id="onlineToggle" type="checkbox">
<span>Online</span>
</label>
<button id="settingsButton" type="button">Nastaveni</button>
<span></span>
</label>
<button id="settingsButton" class="icon-button" type="button" title="Nastaveni" aria-label="Nastaveni">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M19.4 13.5c.1-.5.1-1 .1-1.5s0-1-.1-1.5l2-1.5-2-3.5-2.4 1a8 8 0 0 0-2.6-1.5L14 2h-4l-.4 2.5A8 8 0 0 0 7 6L4.6 5l-2 3.5 2 1.5a9.7 9.7 0 0 0 0 3l-2 1.5 2 3.5L7 18a8 8 0 0 0 2.6 1.5L10 22h4l.4-2.5A8 8 0 0 0 17 18l2.4 1 2-3.5-2-1.5ZM12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"></path>
</svg>
</button>
<button id="logoutButton" class="logout-compact" type="button">Odhlasit</button>
</div>
</div>
<div class="list-tools">
<label>Filtr