15 537
contributi
Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"
Aiuto:Manuale di stile/Avanzato (visualizza wikitesto)
Versione delle 22:07, 7 ott 2018
, 22:07, 7 ott 2018→Mini sprite e nome del Pokémon negli elenchi di Pokémon
|
# Spostare mini sprite e nome nella stessa cella. Quindi via eventuali <code>colspan="2"</code> dall'header. Questo è necessario per accorpare mini sprite e nome nel layout mobile.
# Wrappare mini sprite e nome in un <code><div class="flex flex-row flex-nowrap flex-items-center"></code> (qui è dove concretamente vengono accorpati) e il nome in uno <code><span class="flex-item-fill"></code>. Così facendo, lo <code>span</code> contenente il nome si allarga ad occupare tutto lo spazio disponibile nella colonna, spingendo il mini sprite all'estrema sinistra: dato che i mini sprite hanno tutti la stessa larghezza, l'effetto visivo è che sembrano incolonnati. Il testo dentro lo <code>span</code> del nome è generalmente centrato dal fatto che l'intera tabella ha il testo centrato, ma in caso non lo fosse, basta aggiungere la classe CSS <code>text-center</code>.
# Aggiungere la classe <code>block-''xx''</code> (laddove <code>''xx''</code> è il breakpoint a cui la riga della tabella non è più una riga) al wrapper di mini sprite e nome, e <code>style="padding-left: 0.3em;"</code> (<code>0.3em</code> è la larghezza di un <code>&nbsp;</code>) allo <code>span</code> che wrappa il nome. Questo sistema la parte mobile. Ciò che serve è fare in modo che lo <code>span</code> contenente il nome non si allarghi ad occupare tutto lo spazio disponibile. Dato che il meccanismo è basato sui <code>flex</code>, basta fare in modo che il parent non sia più un <code>flex</code> al breakpoint desiderato per disattivare i comportamenti <code>flex</code> dei figli. Il <code>padding</code> laterale serve a separare il nome dal mini sprite, e di nuovo, se il tutto non è già centrato così, aggiungere la classe CSS <code>text-center</code> sistema la situazione.<br />'''NOTA''': se il nome va a capo da mobile, è probabilmente perché hai usato un <code>div</code> al posto di uno <code>span</code>. L'uso di un elemento <code>inline</code> o <code>inline-block</code> è fondamentale, poiché in assenza di un parent <code>flex</code> gli elementi <code>block</code> occupano l'intera riga.
| |||