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

Stabilize admin header layout

Browse Source
This commit is contained in:
rajchales-monito
2026-07-24 13:38:16 +02:00
parent a54cc6d1d4
commit 1ff1984ac2
2 changed files with 32 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+22 -6
View File
@@ -7,6 +7,7 @@
--brand: #0f8f6f; --brand: #0f8f6f;
--bg: #f5f7f4; --bg: #f5f7f4;
--panel: #ffffff; --panel: #ffffff;
--topbar-height: 58px;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
@@ -73,6 +74,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
overflow: hidden; overflow: hidden;
} }
.brand, .sitebar { .brand, .sitebar {
min-height: var(--topbar-height);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -258,10 +260,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; overflow: hidden; } .conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; overflow: hidden; }
.conversation-header { .conversation-header {
min-height: 74px; min-height: var(--topbar-height);
max-height: 42vh; max-height: 42vh;
overflow: auto; overflow: visible;
padding: 14px 20px; padding: 12px 20px;
background: white; background: white;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
display: flex; display: flex;
@@ -367,10 +369,11 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
font-size: 12px; font-size: 12px;
} }
.visitor-summary-row .visitor-details { .visitor-summary-row .visitor-details {
position: relative;
max-width: none; max-width: none;
} }
.visitor-summary-row .visitor-details[open] { .visitor-summary-row .visitor-details[open] {
flex-basis: 100%; flex-basis: auto;
} }
.visitor-details summary { .visitor-details summary {
width: fit-content; width: fit-content;
@@ -392,11 +395,23 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
} }
.visitor-detail-popover {
position: absolute;
z-index: 20;
top: calc(100% + 8px);
right: 0;
width: min(520px, calc(100vw - 420px));
padding: 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: white;
box-shadow: 0 14px 32px rgb(0 0 0 / 13%);
}
.visitor-detail-grid { .visitor-detail-grid {
display: grid; display: grid;
grid-template-columns: 76px minmax(0, 1fr); grid-template-columns: 76px minmax(0, 1fr);
gap: 5px 10px; gap: 5px 10px;
margin-top: 8px; margin-top: 0;
} }
.visitor-detail-grid span { color: var(--muted); } .visitor-detail-grid span { color: var(--muted); }
.visitor-detail-grid a, .visitor-detail-grid a,
@@ -416,7 +431,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
white-space: nowrap; white-space: nowrap;
} }
.history-list { .history-list {
margin: 8px 0 0; margin: 10px 0 0;
padding-left: 20px; padding-left: 20px;
display: grid; display: grid;
gap: 4px; gap: 4px;
@@ -445,6 +460,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
background: var(--panel); background: var(--panel);
} }
.visitor-panel header { .visitor-panel header {
min-height: var(--topbar-height);
padding: 14px; padding: 14px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
display: grid; display: grid;
public/admin.js
+10 -8
View File
@@ -530,15 +530,17 @@ function visitorDetails(conversation) {
<summary title="Detail navstevnika"> <summary title="Detail navstevnika">
<span aria-hidden="true">i</span> <span aria-hidden="true">i</span>
</summary> </summary>
<div class="visitor-detail-grid"> <div class="visitor-detail-popover">
<span>Aktualne</span> <div class="visitor-detail-grid">
<a href="${escapeHtml(conversation.currentUrl || "#")}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.currentUrl) || "-")}</a> <span>Aktualne</span>
<span>Prisiel z</span> <a href="${escapeHtml(conversation.currentUrl || "#")}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.currentUrl) || "-")}</a>
${conversation.referrer ? `<a href="${escapeHtml(conversation.referrer)}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.referrer))}</a>` : `<em>primy vstup / nezname</em>`} <span>Prisiel z</span>
<span>Zarizeni</span> ${conversation.referrer ? `<a href="${escapeHtml(conversation.referrer)}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.referrer))}</a>` : `<em>primy vstup / nezname</em>`}
<em>${escapeHtml(deviceLabel(conversation.device, conversation.language, conversation.timezone))}</em> <span>Zarizeni</span>
<em>${escapeHtml(deviceLabel(conversation.device, conversation.language, conversation.timezone))}</em>
</div>
<ol class="history-list">${historyItems}</ol>
</div> </div>
<ol class="history-list">${historyItems}</ol>
</details> </details>
`; `;
} }