yoyos/usmt-dash
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demo popup: link the source repo, keep the buttons pinned on screen

Browse Source 
The popup text now scrolls inside the card while the buttons stay at the
bottom, so phone visitors see 'Explore the dashboard' right away (it goes
first and full width on narrow screens). The card height uses dvh so the
top edge isn't cut off behind a phone's address bar.
This commit is contained in:
Johan Sandoval committed 2026-10-07 18:46:44 +00:00
1 parent b478604944
commit 486b57cacb
2 files changed
+20 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/demo/demo.css
+17 -4
View File
@@ -90,16 +90,27 @@
align-items: center; justify-content: center; padding: 16px;
}
.usmt-demo-modal.show { display: flex; }
/* The text scrolls inside the card and the buttons stay pinned at the bottom, so the
"Explore the dashboard" button is always on screen (phones included). dvh follows the
visible area when a phone's address bar is showing, so the top edge isn't cut off. */
.usmt-demo-card {
background: var(--bg-card, #fff); color: var(--text-main, #333); max-width: 640px; width: 100%;
max-height: calc(100vh - 32px); overflow: auto; border-radius: 10px; padding: 26px 28px;
max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
box-shadow: 0 12px 40px rgba(0,0,0,0.45); border-top: 5px solid #f59e0b; line-height: 1.55;
}
.usmt-demo-card h2 { margin: 0 0 10px; }
.usmt-demo-body { overflow-y: auto; min-height: 0; padding: 22px 28px 4px; }
.usmt-demo-card h2 { margin: 0 0 4px; }
.usmt-demo-card p.usmt-demo-src { font-size: 0.85em; margin-bottom: 14px; color: var(--text-muted, #666); }
.usmt-demo-src a { color: #3498db; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.usmt-demo-src a:hover { text-decoration: underline; }
.usmt-demo-card p { margin: 0 0 12px; font-size: 0.95em; }
.usmt-demo-card code { background: rgba(127,127,127,0.18); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.usmt-demo-try { color: var(--text-muted, #666); }
.usmt-demo-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.usmt-demo-actions {
display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; flex-shrink: 0;
padding: 14px 28px 18px; border-top: 1px solid var(--border-color, #ddd);
}
.usmt-demo-actions button { border: 1px solid var(--border-color, #ddd); background: transparent; color: inherit; padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.9em; }
.usmt-demo-actions .usmt-demo-close { background: #3498db; border-color: #3498db; color: #fff; font-weight: 600; }
.usmt-demo-actions .usmt-demo-reset { color: #e74c3c; border-color: #e74c3c; margin-right: auto; }
@@ -113,10 +124,12 @@
.usmt-term { --usmt-term-h: 45vh; }
.usmt-term-body { font-size: 11.5px; padding: 6px 8px 10px 14px; }
.usmt-term-titlebar { font-size: 0.7em; }
.usmt-demo-card { padding: 18px 16px; }
.usmt-demo-body { padding: 16px 16px 4px; }
.usmt-demo-card h2 { font-size: 1.25em; }
.usmt-demo-actions { padding: 12px 16px 14px; gap: 8px; }
.usmt-demo-actions button { flex: 1 1 auto; }
.usmt-demo-actions .usmt-demo-reset { margin-right: 0; }
.usmt-demo-actions .usmt-demo-close { order: -1; flex-basis: 100%; padding: 11px 14px; } /* first and full width */
}
@media (max-height: 500px) {
.usmt-term { --usmt-term-h: 55vh; } /* phones in landscape */