/* guscio da applicazione e una vista per volta (sotto i 900px) Parte di un foglio unico diviso in cinque. L'ORDINE dei in index.html E' la cascata: spostare un file piu' su o piu' giu' cambia chi vince fra due regole di pari peso. I tagli cadono tutti fuori dai blocchi (verificato contando le graffe), perche' spezzare dentro un @media romperebbe silenziosamente meta' foglio. */ @media(max-width:900px){ /* Su iOS `height:100%` puo' restare agganciato al layout viewport iniziale, piu' basso o piu' alto della parte realmente visibile dopo che le barre del browser cambiano misura. Il guscio flex finisce allora prima del bordo e sotto al player resta una fascia del fondo pagina. `dvh` segue invece il viewport visibile corrente: il player termina davvero in fondo senza aggiungere spazio o safe-area finti. La dichiarazione in base.css resta il ripiego per browser vecchi. */ @supports(height:100dvh){ html,body{height:100dvh} } body{overflow-y:auto;overflow-x:hidden} /* Safari ingrandisce la pagina da solo quando il campo a fuoco ha un carattere sotto i 16px: non e' un bug dell'utente, e' la soglia con cui decide se stai per "leggere piccolo". Sotto quella soglia lo zoom parte anche se il bersaglio e' gia' comodo al dito. I due campi di testo dell'app restavano a 14px (var(--sans), struttura.css): qui si alza SOLO la dimensione del carattere, non il resto della riga -- non e' una trasformazione grafica che finge un testo piu' piccolo. */ #q,#save-list-name{font-size:16px} /* minmax(0,1fr) e non 1fr: una colonna 1fr ha per minimo il contenuto, quindi si rifiuta di stringersi sotto il pezzo piu' largo che contiene e allarga la pagina. Sul desktop era gia' cosi', qui no. */ /* Guscio da applicazione: la pagina non scorre, scorre la vista dentro. Prima scorreva tutto insieme e serviva incollare la barra di ricerca con 'sticky'; ora non serve piu' e sparisce anche quella contesa. */ body{overflow-y:hidden} /* colonna, non griglia: le viste si impilano e ognuna prende lo spazio che le serve (il globo una fetta fissa, l'elenco il resto) */ main{flex:1;min-height:0;display:flex;flex-direction:column} #panel{border-left:none;min-width:0} #sugg{padding:12px 16px 14px} #tagline{display:none} /* ---------- una vista per volta ---------- Niente elementi spostati da un contenitore all'altro: sta tutto dove stava, e' il CSS a decidere cosa si vede in base a body[data-vista]. Sopra i 900px questi selettori non esistono e il desktop resta quello di prima. */ #nav{display:flex} #stage,#panel,#cassetto{display:none} body[data-vista="casa"] #casa {display:block;overflow-y:auto;flex:1;min-height:0} /* Il globo si prende tutta la vista. Prima ne prendeva 46vh e sotto restava il cassetto -- che pero' tiene i risultati dell'ULTIMA RICERCA, non le emittenti: sotto al globo comparivano i filtri di Internet Archive e Audius, che col globo non c'entrano niente e non sintonizzano nessuna radio. L'elenco delle emittenti si raggiunge dalla ricerca; qui il globo e' il globo. Costo noto e accettato: il raggio segue il lato corto, che in verticale e' la larghezza, quindi il globo non diventa piu' grande -- si aggiunge vuoto sopra e sotto, che pero' e' spazio per trascinarlo. */ body[data-vista="globo"] #stage{display:block;flex:1;min-height:0} body[data-vista="cerca"] #cassetto{display:flex;flex:1;min-height:0} body[data-vista="cerca"] #panel, body[data-vista="tua"] #panel, body[data-vista="ora"] #panel{display:flex} /* order:-1 perche' nel documento il cassetto viene prima del pannello: senza, la casella di ricerca finisce SOTTO ai risultati */ body[data-vista="cerca"] #panel{flex:0 0 auto;order:-1} body[data-vista="tua"] #panel, body[data-vista="ora"] #panel{flex:1;min-height:0} /* La barra di ricerca appartiene alla vista "cerca" e basta: altrove ruberebbe cento pixel per stare a guardare. 'relative' e non 'static': #sugg e' position:absolute con top:100% e ha bisogno che il suo blocco di contenimento sia QUESTO. Con 'static' risaliva fino al primo antenato posizionato e i suggerimenti atterravano in fondo alla pagina -- misurato a 390x844: y=789 su 844, cioe' dietro alla barra di navigazione (che ha z-index 6 contro il 5 di #sugg). I chip dei generi c'erano, ma non li raggiungeva nessuno. 'relative' senza scostamenti non sposta niente di suo: cambia solo rispetto a cosa si misura quel top:100%. Il commento in struttura.css parla di 'sticky' per il telefono: quello sticky non esiste piu' da tempo, e non e' cio' che serve qui. */ #search{display:none;position:relative;padding:9px 16px 10px} body[data-vista="cerca"] #search{display:block} /* Il campo di testo che stava accanto non c'e' piu' (la ricerca e' quella della testata): il pulsante e' rimasto l'unico bersaglio della riga, e i 40px che aveva da sempre sono sotto la soglia del dito. */ #find{min-height:44px} /* "tua" tiene le pieghevoli, "ora" tutto il resto della colonna */ body[data-vista="cerca"] #pane-now{display:none} body[data-vista="tua"] #pane-now > .sec:not(.pieghevole){display:none} body[data-vista="ora"] #pane-now > .pieghevole{display:none} /* La schermata "In ascolto": la sezione riusata da "tua" prende una copertina grande in cima, invece di restare solo testo. */ body[data-vista="ora"] #sec-nowplay{text-align:center} /* Larga quanto la schermata, non un quadrato. Segnalato: i loghi delle radio sono quasi tutti orizzontali (una scritta, non una copertina di disco) e dentro un quadrato con object-fit:cover venivano TAGLIATI ai lati -- si leggeva mezza parola. Qui la tessera prende tutta la larghezza e l'immagine si adatta INTERA (contain), senza ritagli. Costo dichiarato: una copertina quadrata non riempie piu' il riquadro e lascia due margini laterali. E' il verso giusto in cui cedere -- un po' di vuoto attorno a un'immagine intera si guarda meglio di un'immagine tagliata a meta'. */ body[data-vista="ora"] #np-cover-big{display:block; width:100%;height:min(46vw,190px);border-radius:14px; margin:6px 0 20px;background-size:22%} body[data-vista="ora"] #np-cover-big img{object-fit:contain;padding:12px} /* Il lettore ripeteva titolo e artista due dita sotto quelli grandi. Quella riga ha una funzione sola -- si tocca per venire QUI -- e in questa vista non ne ha nessuna: era una riga intera sprecata, proprio dove "Riascoltalo altrove" finiva tagliato sotto la barra. */ body[data-vista="ora"] #nowbox{display:none} /* "Stai ascoltando" sopra una copertina grande e un titolo grande non aggiunge niente che non si veda gia'. Sul desktop resta: li' e' l'etichetta di una sezione fra tante, e toglierla romperebbe il ritmo delle altre. */ body[data-vista="ora"] #sec-nowplay > .lbl{display:none} /* Da dove viene l'emittente fa parte dell'ascolto, non e' una scheda a parte: allineata a sinistra mentre il resto del blocco e' centrato si leggeva come una sezione estranea. */ body[data-vista="ora"] #sec-origine{text-align:center} /* Qui il cassetto non sale piu' da sotto: e' la vista, a pagina intera. Sparisce con esso la contesa di z-index con la barra di ricerca, che prima si disegnava in mezzo ai risultati. */ #cassetto{position:static;width:auto;transform:none;visibility:visible; border-left:none;border-top:1px solid var(--line)} #cassetto-testa,#cassetto-testa .maniglia{display:none} #cassetto-corpo{padding:14px 16px 20px} /* La fascia fissa era tre righe impilate (copertina, transport completo, barra di avanzamento) -- misurato 155px su 844, il 18% dello schermo, per un pezzo di interfaccia SEMPRE visibile. $('nowbox').onclick gia' porta a "In ascolto" a schermo intero (vedi il commento li': "il lettore dice gia' cosa suona: toccarlo porta al resto di quel brano") -- l'infrastruttura per una fascia mini con i dettagli altrove esisteva gia', andava solo usata. Precedente/-15/+15/successivo e barra di avanzamento restano SOLO nella vista "ora": qui restano gli stessi elementi DOM (nessun duplicato), semplicemente nascosti finche' non ci si e' entrati apposta. Play resta sempre visibile: e' l'unico gesto che ha senso fare senza aprire nulla. */ /* flex-wrap resta: nella fascia compatta (nowbox+play) non serve mai, ma nella vista "ora" transport+barra di avanzamento tornano a riempire piu' di una riga -- toltolo per errore nel primo tentativo, si schiacciavano su una riga sola invece di andare a capo (misurato: 218px di transport + 138px di seekwrap in 366px disponibili, un incastro che tecnicamente "ci sta" ma illeggibile). */ /* ---------- il lettore sospeso ---------- Segnalato dal telefono: in Casa, accesa una radio, il lettore non si vedeva, e non era questione di scorrimento. In flusso il lettore e' l'ULTIMA striscia della pagina, sotto perfino alla barra delle icone (nel documento #nav viene prima), e su iOS quegli ultimi settanta pixel finiscono sotto la barra del browser: misurato in emulazione stava a y 861 alto 71 su 932, cioe' esattamente a filo del bordo, e sul telefono vero quel filo e' coperto. Ora, quando c'e' qualcosa da comandare, esce dal flusso e diventa un riquadro sospeso sopra le icone: cosi' non dipende piu' da quanto spazio avanza in fondo. Il vetro non e' decorazione fine a se stessa, serve a far capire che sotto continua il contenuto, che infatti gli scorre sotto. --nav-h e --lettore-h li misura app.js: la barra delle icone contiene env(safe-area-inset-bottom) e non ha un'altezza scrivibile a mano. */ #player{display:none} body.con-lettore #player{ display:block;position:fixed;left:10px;right:10px;z-index:7; bottom:calc(var(--nav-h,56px) + 10px); border:1px solid rgba(255,255,255,.13);border-radius:20px; background:rgba(13,17,21,.94); box-shadow:0 14px 38px rgba(0,0,0,.46) } /* Il vetro solo dove esiste davvero. Il fondo qui sopra e' quasi pieno apposta: senza sfocatura una tinta traslucida non attenua niente, e il testo della pagina passa attraverso e si incrocia con quello del lettore -- provato, "La Patrona FM" finiva sopra il testo dell'articolo e non si leggeva ne' l'uno ne' l'altro. Meglio un riquadro pieno che un vetro finto. Dove la sfocatura c'e', il fondo si alleggerisce e la pagina si intravede sul serio. */ @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ body.con-lettore #player{ background:rgba(13,17,21,.62); -webkit-backdrop-filter:blur(24px) saturate(1.6); backdrop-filter:blur(24px) saturate(1.6) } } /* Il bordo superiore era la riga che separava il lettore dal contenuto quando erano attaccati: da staccato lo disegna gia' il riquadro. */ body.con-lettore #player{border-top-color:rgba(255,255,255,.13)} /* Piu' basso di com'era: 72px su 932 per una fascia sempre in vista erano troppi, e sono spazio tolto al contenuto. Il tasto centrale scende da 50 a 44px -- che resta l'area di tocco raccomandata, non un bersaglio piccolo -- e il riempimento da 10 a 8. */ body.con-lettore #bar{padding:8px 12px} body.con-lettore #transport #play{width:44px;height:44px} /* A lettore acceso la striscia dei messaggi non esiste: il messaggio va DENTRO il lettore, al posto dei metadati (vedi diag() in app.js). Segnalato che il lettore copriva "Sintonizzo...", e il primo rimedio era stato spostare la striscia sopra il riquadro -- ma restava una fascia in mezzo alla pagina che ripeteva a due dita di distanza uno stato riguardante la radio di cui il lettore sta gia' parlando. Toglierla e' meglio che sistemarla. */ body.con-lettore #diag{display:none} /* Il messaggio nella riga secondaria si distingue dai metadati: gli avvisi prendono la stessa tinta che avevano nella striscia. */ body.con-lettore #now-sub.warn{color:var(--lamp)} /* Sotto al riquadro il contenuto deve poter finire: senza questo l'ultima riga di ogni elenco resta sempre nascosta. Si somma cio' che e' stato misurato piu' i due stacchi da dieci. */ body.con-lettore #casa, body.con-lettore .pane, body.con-lettore #cassetto-corpo{ padding-bottom:calc(var(--lettore-h,72px) + 20px) } #bar{flex-wrap:wrap;gap:10px;padding:10px 12px} #nowbox{flex:1;min-width:0;cursor:pointer} #volwrap{display:none} body:not([data-vista="ora"]) #prev, body:not([data-vista="ora"]) #back15, body:not([data-vista="ora"]) #fwd15, body:not([data-vista="ora"]) #next, body:not([data-vista="ora"]) #seekwrap{display:none} #transport{gap:4px} #transport button{width:38px;height:38px} /* con l'id doppio, se no perde contro #transport #play (0,2,0) e la regola non fa niente -- e' la stessa trappola gia' presa una volta */ #transport #play{width:50px;height:50px} /* 44px e' l'area di tocco raccomandata: qui non serve l'id doppio perche' non c'e' nessun'altra regola piu' specifica da battere. */ #transport #back15,#transport #fwd15,#transport #prev,#transport #next{ width:44px;height:44px} /* Preferita/Nascondi/Condividi restano larghi quanto il testo che contengono (gia' oltre i 44px), gli manca solo l'altezza. */ #fav,#hide,#share{min-height:44px} /* la nota appartiene alla scheda Tua: in "ora" non c'entra nulla. Classe e non stile in linea, se no vincerebbe su questa regola. */ #tua-vuota{display:none} #tua-vuota.mostra{display:block} body[data-vista="ora"] #tua-vuota{display:none} /* La nota su licenza e tracciamento e' il piede della colonna, e sul desktop sta in fondo a tutto. Su mobile la colonna e' spezzata in due viste e la nota restava visibile in entrambe, a meta' schermo, con lo stesso peso dei contenuti: resta in "tua", dove una nota sul progetto e' a casa sua, e sparisce da "In ascolto". */ body[data-vista="ora"] #fonte-aperta{display:none} } /* Al dito l'hover non esiste: la manopola dell'avanzamento restava invisibile proprio dove serve trascinarla. */ @media(pointer:coarse){ #knob{opacity:1} }