Autore Topic: Modifica Breakpoint in Cassiopeia Template  (Letto 273 volte)

Offline sgiobbio

  • Appassionato
  • ***
  • Post: 238
    • Mostra profilo
Modifica Breakpoint in Cassiopeia Template
« il: 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
« Ultima modifica: 21 Lug 2021, 08:41:01 da sgiobbio »

Offline sgiobbio

  • Appassionato
  • ***
  • Post: 238
    • Mostra profilo
Re:Modifica Breakpoint in Cassiopeia Template
« Risposta #1 il: 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?
« Ultima modifica: 21 Lug 2021, 16:50:30 da sgiobbio »

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3866
  • Sesso: Maschio
    • Mostra profilo
Re:Modifica Breakpoint in Cassiopeia Template
« Risposta #2 il: 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

Offline sgiobbio

  • Appassionato
  • ***
  • Post: 238
    • Mostra profilo
Re:Modifica Breakpoint in Cassiopeia Template
« Risposta #3 il: 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

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3866
  • Sesso: Maschio
    • Mostra profilo
Re:Modifica Breakpoint in Cassiopeia Template
« Risposta #4 il: 23 Lug 2021, 12:06:24 »

Offline sgiobbio

  • Appassionato
  • ***
  • Post: 238
    • Mostra profilo
Re:Modifica Breakpoint in Cassiopeia Template
« Risposta #5 il: 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
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?
« Ultima modifica: 25 Lug 2021, 07:31:37 da sgiobbio »

Offline sgiobbio

  • Appassionato
  • ***
  • Post: 238
    • Mostra profilo
Re:Modifica Breakpoint in Cassiopeia Template
« Risposta #6 il: 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

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3866
  • Sesso: Maschio
    • Mostra profilo
Re:Modifica Breakpoint in Cassiopeia Template
« Risposta #7 il: 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.

Offline sgiobbio

  • Appassionato
  • ***
  • Post: 238
    • Mostra profilo
Re:Modifica Breakpoint in Cassiopeia Template
« Risposta #8 il: 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

 

Host

Torna su