Nicolas
ff664f2c2b
Every message this app ever showed the client - the host-handoff notice, every "couldn't start/join a party" error - went through a blocking alert(), freezing the tab for what's usually just a heads-up. New toast.ts is a self-mounting singleton (no per-party state, so it doesn't need Shell.ts wiring like musicBar/MusicBar does) styled after Player.css's own .requestBanner, with an 'error' variant that's still just a plain left accent, not a red banner - even a failed click doesn't need this app to suddenly shout. All ten alert() call sites across Player/MusicBar/tiles/Home/Series/Playlist/Artist/Album now go through it. Also fixes a real reported bug while in the area: the library/artist grid's minmax(160px, 1fr) floor left no room for a second column once a real phone's padding was subtracted, unlike everything else mobile in this app (the sidebar, the music bar) which already got a narrow-screen treatment. Switched to a fluid clamp(100px, 28vw, 160px) floor instead of a fixed breakpoint, confirmed at seven real widths via an iframe (its own independent viewport for vw units, sidestepping this sandbox's own unreliable viewport-resize emulation). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
46 lines
1.5 KiB
CSS
46 lines
1.5 KiB
CSS
/* ---- Global toast notifications - see toast.ts. Same light-pill,
|
|
auto-dismiss visual language as views/player/Player.css's own
|
|
.requestBanner, generalized to work from any page (position: fixed
|
|
against the viewport, not the player specifically) since this is
|
|
used well beyond it now (host handoff, every "couldn't start/join a
|
|
party" error that used to be a blocking alert()). ---- */
|
|
.toastContainer {
|
|
position: fixed;
|
|
top: max(16px, env(safe-area-inset-top, 0px));
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
max-width: calc(100% - 32px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast {
|
|
max-width: 100%;
|
|
background: var(--bg-header);
|
|
color: var(--text);
|
|
padding: 10px 18px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
transition: opacity .2s ease, transform .2s ease;
|
|
}
|
|
|
|
.toast.toastIn { opacity: 1; transform: translateY(0); }
|
|
.toast.toastOut { opacity: 0; }
|
|
|
|
/* Only variant beyond the default light/neutral pill above - a plain
|
|
left accent, not a loud red fill: still meant to be noticed without
|
|
the app suddenly shouting at you (see toast.ts's own comment on why
|
|
this stays this restrained even for errors). */
|
|
.toast--error { border-left: 3px solid var(--danger); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.toast { transition: none; transform: none; }
|
|
}
|