feat: site-wide Swing Music player, persistent storage, mobile UX polish
- SiteWideMusicDock component at app level; persists across all routes - Dock + player merged into single expandable panel - Remove non-functional Hide button; one Minimize/Open control - Swing Music label and action button on same row - Mobile: dock z-index above player, larger touch target on iPad - entrypoint.sh: seeds admin-content.json only on first boot/fresh volume - Dockerfile: seed in /app/data-seed; live data in /app/data (volume) - shell-with-music-bar padding on project and admin pages
This commit is contained in:
nmemmert
+345
@@ -7,6 +7,10 @@
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.shell-with-music-bar {
|
||||
padding-bottom: calc(6.2rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.hero {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-panel);
|
||||
@@ -299,6 +303,313 @@ h1 {
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.weather-widget {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.weather-hero-card {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-note);
|
||||
background: linear-gradient(150deg, rgba(10, 61, 92, 0.98) 0%, rgba(18, 30, 43, 0.97) 100%);
|
||||
color: #f8fbff;
|
||||
padding: 0.95rem;
|
||||
}
|
||||
|
||||
.weather-hero-row {
|
||||
display: flex;
|
||||
gap: 0.65rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weather-hero-icon {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 0.6rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.weather-hero-card .weather-hero-location,
|
||||
.weather-hero-card .weather-hero-desc,
|
||||
.weather-hero-card .weather-hero-sub,
|
||||
.weather-hero-card .weather-hero-updated {
|
||||
margin: 0;
|
||||
color: rgba(248, 251, 255, 0.96);
|
||||
}
|
||||
|
||||
.weather-hero-card .weather-hero-location {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.weather-hero-card .weather-hero-desc {
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.weather-hero-main-temp {
|
||||
margin-top: 0.7rem;
|
||||
font-family: var(--display);
|
||||
font-size: 2.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.weather-hero-card .weather-hero-sub {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.weather-hero-hilo {
|
||||
margin-top: 0.65rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.weather-hero-hilo > div {
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 10px;
|
||||
padding: 0.45rem 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.weather-hero-label {
|
||||
display: block;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(248, 251, 255, 0.9);
|
||||
}
|
||||
|
||||
.weather-hero-hilo strong {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.weather-hero-card .weather-hero-updated {
|
||||
margin-top: 0.55rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.weather-widget-actions {
|
||||
margin-top: 0.65rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.weather-widget-actions a {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.weather-widget-actions a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.music-dock {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
width: min(560px, calc(100vw - 1rem));
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: stretch;
|
||||
gap: 0.45rem;
|
||||
padding: 0.48rem 0.8rem calc(0.48rem + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
background: linear-gradient(95deg, rgba(16, 24, 34, 0.97) 0%, rgba(28, 36, 49, 0.96) 100%);
|
||||
backdrop-filter: blur(8px);
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
transition: transform 180ms ease, opacity 180ms ease;
|
||||
}
|
||||
|
||||
.music-dock.is-hidden {
|
||||
transform: translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom)));
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.music-dock-main {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.music-dock-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.music-dock-title-row,
|
||||
.music-dock-now-playing,
|
||||
.music-dock-status {
|
||||
margin: 0;
|
||||
color: #f4f8ff;
|
||||
}
|
||||
|
||||
.music-dock-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.music-dock-indicator {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: #6de39d;
|
||||
box-shadow: 0 0 0 4px rgba(109, 227, 157, 0.2);
|
||||
}
|
||||
|
||||
.music-dock-now-playing {
|
||||
font-size: 0.76rem;
|
||||
color: rgba(244, 248, 255, 0.88);
|
||||
}
|
||||
|
||||
.music-dock-status {
|
||||
margin-top: 0.05rem;
|
||||
font-size: 0.73rem;
|
||||
color: #b9f0cf;
|
||||
}
|
||||
|
||||
.music-dock.is-minimized .music-dock-now-playing,
|
||||
.music-dock.is-minimized .music-dock-status {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.music-dock.is-minimized {
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: calc(0.4rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.music-dock-player {
|
||||
grid-column: 1 / -1;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: max-height 220ms ease, opacity 180ms ease;
|
||||
}
|
||||
|
||||
.music-dock-player.is-visible {
|
||||
max-height: min(72vh, 820px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.music-player-frame {
|
||||
width: 100%;
|
||||
height: min(70vh, 720px);
|
||||
border: 1px solid rgba(120, 131, 150, 0.45);
|
||||
border-radius: 18px;
|
||||
background: #101722;
|
||||
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.music-dock-actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.music-dock-actions a,
|
||||
.music-dock-actions button,
|
||||
.music-login-modal-actions a,
|
||||
.music-login-modal-actions button {
|
||||
border: 1px solid rgba(244, 248, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
padding: 0.34rem 0.62rem;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #f4f8ff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
font-family: var(--body);
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.music-dock-actions a:hover,
|
||||
.music-dock-actions button:hover,
|
||||
.music-login-modal-actions a:hover,
|
||||
.music-login-modal-actions button:hover {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.music-login-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 70;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.music-login-modal {
|
||||
width: min(460px, 100%);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-panel);
|
||||
background: var(--surface);
|
||||
padding: 1rem;
|
||||
box-shadow: var(--shadow-elevated);
|
||||
}
|
||||
|
||||
.music-login-modal h3 {
|
||||
margin: 0;
|
||||
font-family: var(--display);
|
||||
}
|
||||
|
||||
.music-login-modal p {
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.music-login-modal-actions {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.music-login-modal-actions a,
|
||||
.music-login-modal-actions button {
|
||||
border-color: var(--line);
|
||||
color: var(--ink);
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
|
||||
.music-login-modal-actions a:hover,
|
||||
.music-login-modal-actions button:hover {
|
||||
background: var(--chip-bg);
|
||||
}
|
||||
|
||||
.downloads-grid {
|
||||
margin-top: 0.9rem;
|
||||
display: grid;
|
||||
@@ -737,6 +1048,10 @@ code {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.shell-with-music-bar {
|
||||
padding-bottom: calc(6.8rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
@@ -757,6 +1072,36 @@ code {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.weather-hero-main-temp {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.music-dock {
|
||||
left: 50%;
|
||||
width: min(560px, calc(100vw - 0.6rem));
|
||||
z-index: 60;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: stretch;
|
||||
padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.music-dock-main {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.music-dock-title-row {
|
||||
font-size: 0.83rem;
|
||||
}
|
||||
|
||||
.music-player-frame {
|
||||
height: min(64vh, 620px);
|
||||
}
|
||||
|
||||
.music-dock-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user