Joomla.it Forum

Joomla! 4 => Joomla! 4.x => Topic aperto da: sgiobbio - 21 Lug 2021, 07:58:08

Titolo: Modifica Breakpoint in Cassiopeia Template
Inserito da: sgiobbio - 21 Lug 2021, 07:58:08
Template Cassiopeia in Joomla 4.0 rc4
Attualmente il breakpoint per mobile devices interviene a 767px, di conseguenza la sidebar-right rimane visibile su schermi iPad 768px, mostrando la barra di scorrimento inferiore e causando errore di "contenuti troppo grandi per lo schermo" per google.
La mia domanda è: come modificare in user.css il punto di breakpoint di sidebar-right?
Allego screenshot illustrativo del problema
Titolo: Re:Modifica Breakpoint in Cassiopeia Template
Inserito da: sgiobbio - 21 Lug 2021, 13:56:59
Aggiornamento: l'errore dei contenuti laterali troppo grandi l'ho risolto, era un mio errore di override css in cui impostavo (sbagliando) la larghezza dei moduli laterali.
Invece confermo che il breakpoint della sidebar laterale non interviene a 768px.
Il file templates/cassiopeia/scss/tools/variables/_variables.scss indica $grid-breakpoints md a 48em che corrispondono a 768px, ma il breakpoint avviene a 767px, quindi non influisce sul layout di iPad.
Ho provato a cambiare 48 con 49 ma non succede assolutamente nulla lo stesso.
scss dovrebbe compilare css automaticamente... o no?
Qualcuno ha idea di come modificare in maniera che funzioni il breakpoint di sidebar-right?
Titolo: Re:Modifica Breakpoint in Cassiopeia Template
Inserito da: xplosion - 23 Lug 2021, 10:26:35
Verifica se c'e qualche issue aperta per questo problema, se si tratta di un bug
https://github.com/joomla/joomla-cms/issues
Titolo: Re:Modifica Breakpoint in Cassiopeia Template
Inserito da: sgiobbio - 23 Lug 2021, 12:00:00
Grazie xplosion per il suggerimento: non sembrano esserci issue aperte per questo problema, ho trovato soltanto una PR "per rendere configurabile il mobilke-breakpoint di top-a, top-b, bottom-a and bottom-b".
Niente altro.
Però nello screenshot che ho postato in apertura del thread si vede chiaramente che la barra laterale è ancora presente a 768px: infatti collassa a 767.
Basterebbe modificare il breakpoint ed è quello che ho cercato di fare, ma anche intervenendo sul file
 templates/cassiopeia/scss/tools/variables/_variables.scss
non sembra cambiare nulla nel layout
Titolo: Re:Modifica Breakpoint in Cassiopeia Template
Inserito da: xplosion - 23 Lug 2021, 12:06:24
Hai provato questo fix ?
https://issues.joomla.org/tracker/joomla-cms/34780
Titolo: Re:Modifica Breakpoint in Cassiopeia Template
Inserito da: sgiobbio - 25 Lug 2021, 07:23:20
Ciao xplosion,
a quanto mi è dato di capire, scss verrebbe "compilato" soltanto in fase di installazione:
https://github.com/joomla/joomla-cms/issues/31091 (https://github.com/joomla/joomla-cms/issues/31091)
questo spiegherebbe perché, per quanto io modifichi il breakpoint in scss, non ottenga nessun risultato visibile.

Tu quale approccio suggeriresti per adattare il breakpoint alle dimensioni volute, come una sorta di override?
Magari provare l'estensione SCSS Compiler, sempre che si dimostri compatibile con joomla4?
Titolo: Re:Modifica Breakpoint in Cassiopeia Template
Inserito da: sgiobbio - 25 Lug 2021, 12:45:31
Ho trovato un modo per modificare il breakpoint 768px:

nel file templates/cassiopeia/css/template.min.css, rigo 9715,  modificare:

media (min-width:48em)
con
media (min-width:48.01em)

Ovviamente per non perdere le modifiche ad ogni upgrade il template dovrà essere una copia, per esempio my_cassiopeia
Titolo: Re:Modifica Breakpoint in Cassiopeia Template
Inserito da: xplosion - 25 Lug 2021, 18:14:59
Ovviamente per non perdere le modifiche ad ogni upgrade il template dovrà essere una copia, per esempio my_cassiopeia
oppure ti crei un tuo user.css e inserisci li la tua istruzione modificata, aggiungendo un !important alla fine, così stai tranquillo.
Titolo: Re:Modifica Breakpoint in Cassiopeia Template
Inserito da: sgiobbio - 25 Lug 2021, 22:07:24
xplosion,sarò io che faccio confusione... sarà un altro bug...
ma quella istruzione modificata (quella del file template.min.css) non funziona se la inserisco nel mio file user.css (che utilizzo per sovrascrivere tutte le altre istruzioni css che mi serve modificare)
anzi, per vederla in opera, ho avuto bisogno di caricarla sul file template.min.css.gz e poi uploadare anche quello