docs: optimize code preview in docs

[zetareticoli]

Descrizione

Ridotto il font-size e lo spacing del tag <code> nella documentazione per ottimizzare la lettura di lunghi blocchi di codice e ridurre lo spazio verticale occupato.

Rivisto il posizionamento del pulsante "Copia" per i blocchi di codice.

Checklist

• Le modifiche sono conformi alle linee guida di design.
• Il codice è coerente con le indicazioni di progetto.
• Le modifiche sono state verificate sui Browser supportati e per diverse risoluzioni dello schermo.
• Sono stati effettuati test di accessibilità in ottemperanza a quanto descritto nell'area "Accessibilità" delle linee guida di design.
• La documentazione è stata aggiornata.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
bootstrap-italia	✅ Ready (Inspect)	Visit Preview	Dec 2, 2024 1:28pm

[astagi]

@zetareticoli il problema adesso del bottone riguarda lato mobile il fatto che copre il codice in alcune sezioni, per questo era stato spostato più a destra e nell'angolo

[zetareticoli]

@zetareticoli il problema adesso del bottone riguarda lato mobile il fatto che copre il codice in alcune sezioni, per questo era stato spostato più a destra e nell'angolo

avevo fatto diverse prove su vari componenti, perché ora il codice ha un font-size ridotto e va a capo dopo un tot di lunghezza (così da non dover scrollare orizzontalmente ogni volta).

In quali componenti hai visto sovrapposizione?

[astagi]

@zetareticoli il problema adesso del bottone riguarda lato mobile il fatto che copre il codice in alcune sezioni, per questo era stato spostato più a destra e nell'angolo

avevo fatto diverse prove su vari componenti, perché ora il codice ha un font-size ridotto e va a capo dopo un tot di lunghezza (così da non dover scrollare orizzontalmente ogni volta).

In quali componenti hai visto sovrapposizione?

@zetareticoli il problema si presenta più che altro lato mobile, ad esempio

[zetareticoli]

@zetareticoli il problema adesso del bottone riguarda lato mobile il fatto che copre il codice in alcune sezioni, per questo era stato spostato più a destra e nell'angolo

avevo fatto diverse prove su vari componenti, perché ora il codice ha un font-size ridotto e va a capo dopo un tot di lunghezza (così da non dover scrollare orizzontalmente ogni volta).
In quali componenti hai visto sovrapposizione?

@zetareticoli il problema si presenta più che altro lato mobile, ad esempio

Ok, vedo di fare nuovi test

[zetareticoli]

@zetareticoli il problema adesso del bottone riguarda lato mobile il fatto che copre il codice in alcune sezioni, per questo era stato spostato più a destra e nell'angolo

avevo fatto diverse prove su vari componenti, perché ora il codice ha un font-size ridotto e va a capo dopo un tot di lunghezza (così da non dover scrollare orizzontalmente ogni volta).
In quali componenti hai visto sovrapposizione?

@zetareticoli il problema si presenta più che altro lato mobile, ad esempio

Possiamo rimuoverlo da mobile (50a255d) considerato che il "copy" serve per scenari di editing su device medio-grandi

[Fupete]

Possiamo rimuoverlo da mobile (50a255d) considerato che il "copy" serve per scenari di editing su device medio-grandi

Torna anche a me. Ragionando a voce alta: ma se usassimo — magari solo su mobile, ma ci starebbe anche su desktop — un pulsante meno ingombrante? Ad esempio solo icona come sul sito Designers Italia?

E, seconda idea, ma se rendessimo "collassabili" questi blocchi di codice più che usare un font-size piccolo? Non vorrei infatti che con il testo troppo piccolo diventassero poco inclusivi per developer con una vista non ottima.

[Fupete]

@zetareticoli occhio che la preview con l'ultimo commit si è "rotta"

[zetareticoli]

Possiamo rimuoverlo da mobile (50a255d) considerato che il "copy" serve per scenari di editing su device medio-grandi

Torna anche a me. Ragionando a voce alta: ma se usassimo — magari solo su mobile, ma ci starebbe anche su desktop — un pulsante meno ingombrante? Ad esempio solo icona come sul sito Designers Italia?

E, seconda idea, ma se rendessimo "collassabili" questi blocchi di codice più che usare un font-size piccolo? Non vorrei infatti che con il testo troppo piccolo diventassero poco inclusivi per developer con una vista non ottima.

👍 per il pulsante copia come su Designers Italia, almeno usiamo lo stesso stile. Quel pulsante (icona compresa) provengono da BSI?

Quello che mi sembrava difficile da usare erano le barre di scorrimento orizzontale e verticale per scorrere tutto il codice, rimpicciolendo font e applicando un max-width all'area di testo in codice almeno ti costringe a scorrere solo in una direzione.

[Fupete]

Possiamo rimuoverlo da mobile (50a255d) considerato che il "copy" serve per scenari di editing su device medio-grandi

Torna anche a me. Ragionando a voce alta: ma se usassimo — magari solo su mobile, ma ci starebbe anche su desktop — un pulsante meno ingombrante? Ad esempio solo icona come sul sito Designers Italia?
E, seconda idea, ma se rendessimo "collassabili" questi blocchi di codice più che usare un font-size piccolo? Non vorrei infatti che con il testo troppo piccolo diventassero poco inclusivi per developer con una vista non ottima.

👍 per il pulsante copia come su Designers Italia, almeno usiamo lo stesso stile. Quel pulsante (icona compresa) provengono da BSI?

Quello che mi sembrava difficile da usare erano le barre di scorrimento orizzontale e verticale per scorrere tutto il codice, rimpicciolendo font e applicando un max-width all'area di testo in codice almeno ti costringe a scorrere solo in una direzione.

Sì sì concordo con te. Su Designers abbiamo aggiunto il checkbox per fare il "soft-wrap". Sarebbe da capire se farlo anche qui magari... chissà se è fattibile.

[Fupete]

Il pulsante su DI fondamentalmente è un button con qualche styling ulteriore per renderlo più piccolo.

Così dovrebbe funzionare:

<button class="btn btn-xs btn-primary p-2" type="button" data-focus-mouse="false">
  <span>
    <svg role="img" class="icon icon-sm icon-white align-middle" aria-label=" Copia il codice negli appunti">
    <use href="/svg/sprites.svg#it-copy"></use></svg>
  </span>
</button>

Lo possiamo anche semplificare se serve.