17 214
contributi
Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"
Aiuto:Manuale di stile/Avanzato (visualizza wikitesto)
Versione delle 21:34, 7 ott 2018
, 21:34, 7 ott 2018nessun oggetto della modifica
|
| style="padding: 0.5em;" colspan="3" | <div class="inline-block-sm">'''0-255''': </div>Reset a 90
|}
== Pattern ricorrenti ==
=== Mini sprite e nome del Pokémon negli elenchi di Pokémon ===
Avere il Mini sprite a sinistra del nome di un Pokémon è lo standard degli elenchi di Pokémon, come per esempio [[Cicli uovo]]. Notevoli eccezione è roba come [[Elenco Pokémon per peso]].
Nonostante a prima vista possa sembrare facile ed intuitivo, la responsivizzazione non lo è. Infatti, laddove su Desktop i Mini Sprite sono incolonnati e i nomi centrati nello spazio rimanente a destra, su Mobile è carino che l'accorpamento dei due sia centrato. Per esempio:
<div class="flex flex-row flex-nowrap flex-items-center flex-main-space-evenly">
<div>
<div class="text-center">'''Desktop'''</div>
{{fiore/h}}
{{fiorepkmn|076|Golem|Roccia|Distruzione|3|15}}
|- class="roundy flex-xs flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="min-width-xs-50" style="padding: 0.3ex;" | <div class="flex flex-row flex-nowrap flex-items-center block-xs">{{#invoke: MiniSprite | static | 124 }}<span class="roundy flex-item-fill" style="padding-left: 0.3em; background: peachpuff;">{{colore2|000|Jynx}} {{#ifeq: no | yes | {{tt|*|}} }}</span></div><div class="text-small visible-xs">Pokémon</div>
| class="min-width-xs-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Psico | Poké Tattica#Psico | {{#switch: Psico | Shock = Elettro | Psico }} | thick }}<div class="text-small black-text visible-xs">[[Poké Tattica]]</div>
| class="min-width-xs-50" style="padding: 0.3ex;" | {{#invoke: Wc/Util | rep | Nessuna | [[File:fm.png]] }} {{#switch: {{lc: Nessuna }} | nessuna | shock = {{ucfirst: Nessuna }} }}<div class="text-small black-text visible-xs">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xs-50" style="padding: 0.3ex;" | 9<div class="text-small visible-xs">Cerchi</div>
{{fiorepkmn|169|Crobat|Veleno||Nessuna|4}}
{{fiorepkmn|202|Wobbuffet|Psico||Nessuna|8}}
{{fiorepkmn|208|Steelix|Terra||Nessuna|10|yes|Solo missione}}
{{fiorepkmn|215|Sneasel|Buio|Taglio|2|3}}
|}
</div>
<div>
<div class="text-center">'''Mobile'''</div>
{| class="std-table white-rows" style="padding: 0.5ex; {{#invoke: Css | horiz-grad | type = ranger }};"
|- class="roundy flex-xl flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="min-width-xl-50" style="padding: 0.3ex;" | <div>{{#invoke: MiniSprite | static | 076 }}<span class="flex-item-fill" style="padding-left: 0.3em;">{{colore2|000|Golem}} {{#ifeq: no | yes | {{tt|*|}} }}</span></div><div class="text-small">Pokémon</div>
| class="min-width-xl-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Roccia | Poké Tattica#Roccia | {{#switch: Roccia | Shock = Elettro | Roccia }} | thick }}<div class="text-small black-text">[[Poké Tattica]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | {{#invoke: Wc/Util | rep | 3 | [[File:Distruzionefm.png]] }} {{#switch: {{lc: 3 }} | nessuna | shock = {{ucfirst: 3 }} }}<div class="text-small black-text visible-xl">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | 15<div class="text-small">Cerchi</div>
|- class="roundy flex-xl flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="roundy min-width-xl-50" style="padding: 0.3ex; background: peachpuff;" | <div>{{#invoke: MiniSprite | static | 124 }}<span class="flex-item-fill" style="padding-left: 0.3em;">{{colore2|000|Jynx}} {{#ifeq: no | yes | {{tt|*|}} }}</span></div><div class="text-small">Pokémon</div>
| class="min-width-xl-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Psico | Poké Tattica#Psico | {{#switch: Psico | Shock = Elettro | Psico }} | thick }}<div class="text-small black-text">[[Poké Tattica]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | {{#invoke: Wc/Util | rep | Nessuna | [[File:fm.png]] }} {{#switch: {{lc: Nessuna }} | nessuna | shock = {{ucfirst: Nessuna }} }}<div class="text-small black-text">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | 9<div class="text-small">Cerchi</div>
|- class="roundy flex-xl flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="min-width-xl-50" style="padding: 0.3ex;" | <div>{{#invoke: MiniSprite | static | 169 }}<span class="flex-item-fill" style="padding-left: 0.3em;">{{colore2|000|Crobat}} {{#ifeq: no | yes | {{tt|*|}} }}</span></div><div class="text-small">Pokémon</div>
| class="min-width-xl-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Veleno | Poké Tattica#Veleno | {{#switch: Veleno | Shock = Elettro | Veleno }} | thick }}<div class="text-small black-text">[[Poké Tattica]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | {{#invoke: Wc/Util | rep | Nessuna | [[File:fm.png]] }} {{#switch: {{lc: Nessuna }} | nessuna | shock = {{ucfirst: Nessuna }} }}<div class="text-small black-text">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | 4<div class="text-small">Cerchi</div>
|- class="roundy flex-xl flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="min-width-xl-50" style="padding: 0.3ex;" | <div>{{#invoke: MiniSprite | static | 202 }}<span class="flex-item-fill" style="padding-left: 0.3em;">{{colore2|000|Wobbuffet}} {{#ifeq: no | yes | {{tt|*|}} }}</span></div><div class="text-small">Pokémon</div>
| class="min-width-xl-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Psico | Poké Tattica#Psico | {{#switch: Psico | Shock = Elettro | Psico }} | thick }}<div class="text-small black-text">[[Poké Tattica]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | {{#invoke: Wc/Util | rep | Nessuna | [[File:fm.png]] }} {{#switch: {{lc: Nessuna }} | nessuna | shock = {{ucfirst: Nessuna }} }}<div class="text-small black-text">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | 8<div class="text-small">Cerchi</div>
|- class="roundy flex-xl flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="min-width-xl-50" style="padding: 0.3ex;" | <div>{{#invoke: MiniSprite | static | 208 }}<span class="flex-item-fill" style="padding-left: 0.3em;">{{colore2|000|Steelix}} {{#ifeq: yes | yes | {{tt|*|Solo missione}} }}</span></div><div class="text-small">Pokémon</div>
| class="min-width-xl-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Terra | Poké Tattica#Terra | {{#switch: Terra | Shock = Elettro | Terra }} | thick }}<div class="text-small black-text">[[Poké Tattica]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | {{#invoke: Wc/Util | rep | Nessuna | [[File:fm.png]] }} {{#switch: {{lc: Nessuna }} | nessuna | shock = {{ucfirst: Nessuna }} }}<div class="text-small black-text">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | 10<div class="text-small">Cerchi</div>
|- class="roundy flex-xl flex-row flex-wrap flex-main-stretch flex-items-center" style="margin: 0.5ex 0; padding: 0.3ex;"
| class="min-width-xl-50" style="padding: 0.3ex;" | <div>{{#invoke: MiniSprite | static | 215 }}<span class="flex-item-fill" style="padding-left: 0.3em;">{{colore2|000|Sneasel}} {{#ifeq: no | yes | {{tt|*|}} }}</span></div><div class="text-small">Pokémon</div>
| class="min-width-xl-50" style="padding: 0.3ex 0.7ex;" | {{#invoke: Box | box | Buio | Poké Tattica#Buio | {{#switch: Buio | Shock = Elettro | Buio }} | thick }}<div class="text-small black-text">[[Poké Tattica]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | {{#invoke: Wc/Util | rep | 2 | [[File:Tagliofm.png]] }} {{#switch: {{lc: 2 }} | nessuna | shock = {{ucfirst: 2 }} }}<div class="text-small black-text">[[Mossa (Ranger)|Mossa]]</div>
| class="min-width-xl-50" style="padding: 0.3ex;" | 3<div class="text-small">Cerchi</div>
|}
</div>
</div>
Notare la differenza su Jynx: nella versione desktop il nome è centrato nello spazio colorato in <code>peachpuff</code>, che è largo abbastanza da contenere anche ''Wobbuffet''; nella versione mobile è separato da un po' di spazio vuoto dal mini sprite, e l'agglomerato mini sprite-nome è centrato nel box colorato anche qui in <code>peachpuff</code>.
Come si implementa una cosa del genere? Con i seguenti tre passi:
# 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-lert: 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.
Un esempio? La riga di Jynx nella tabella di desktop di questo stesso tutorial ;D (ignorare la parte del coloramento <code>peachpuff</code>, ovviamente).
| |||