Pokémon Central Wiki

Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"

Aiuto:Manuale di stile/Avanzato (visualizza wikitesto)

Versione delle 15:08, 23 ott 2018

10 781 byte aggiunti ,  15:08, 23 ott 2018
→‎Tabelle responsive
 
===Tabelle responsive===
L'idea delle tabelle responsive è di trasformare ogni riga in un layout responsive solo quando lo schermo è troppo stretto; si usa la nomenclatura ''card layout''. Per trasformare una riga in una card basta assegnarle la classe <code>flex</code> al di sotto di una certa larghezza: per esempio, se si vuole responsivizzare la riga da <code>mdsm</code> in giù si aggiunge <code>class="flex-mdsm ..."</code> subito dopo il simbolo <code>|-</code> che la delimita. Di seguito si userà <code>mdsm</code> come esempio per brevità, ovviamente basta sostituirlo con il breakpoint opportuno se si vuole usarne uno diverso.
 
Una volta inserita questa classe, si possono aggiungere le altre <code>flex-...</code> già descritte in precedenza: funziona perché il CSS le ignora se l'elemento non è <code>flex</code>, e ciò accade solo sotto il breakpoint specificato. <code>flex-wrap</code> è presente di default ma non fa male aggiungerlo. Dato che il <code>margin</code> viene automaticamente ignorato, aggiungerci <code>style="margin-top: 0.5rem;"</code> sistema la visualizzazione separando le caselle.
 
La ''roundyness'' si aggiunge con un banalissimo <code>class="roundy"</code>, altre cose vanno testate. Se ci sono più righe "collegate" da un <code>rowspan</code>, si può applicare <code>roundy-header</code> alla prima riga, <code>roundy-footer</code> all'ultima e togliere la roundyness alle altre, in modo che su schermi stretti si abbia una casella unica con i bordi arrotondati correttamente.
 
Bisogna poi sistemare le larghezze per far andare a capo le cose. Si possono usare le solite <code>width-__-__</code>, ma esistono anche le <code>min-width</code> che spingono a capo i <code>flex-items</code> se questi diventano troppo piccoli, e funzionano bene se accompagnate da <code>flex-main-stretch</code>.
 
Ultima cosa da tenere a mente sta nel fatto che le intestazioni andranno nascoste, dato che il layout non combacia se la riga diventa una card (basta un banale <code>class="hidden-mdsm"</code>). Di conseguenza, le informazioni non ovvie dovranno essere specificate in ogni singola riga: è sufficiente utilizzare uno <code>span</code> con la classe <code>class="visible-mdsm"</code>.
 
Eventuali caselle vuote possono essere nascoste su schermi stretti semplicemente assegnando loro la classe <code>hidden-sm</code>.
 
Ecco un esempio pratico:
 
<nowiki>
{| class="roundy pullstd-centertable text-center white-rows roundy-cornerssortable" style="{{#invoke: css | horizGrad | type = {{{color|pcwiki}}} alola}} padding: 0.3rem; border-spacing: 03em;"
|- class="hidden-mdsm black-text"
! Alleato !! Luogo !! [[Condizione atmosferica#Pioggia battente|Pioggia]] !! {{DL|Condizione atmosferica|Grandine}} !! [[Condizione atmosferica#Tempesta di sabbia|Sabbia]]
! Mossa !! Tipo !! Cat. !! Gen. !! Effetto aggiuntivo
|- class="roundy flex-mdsm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5em 05rem;"
| class="min-width-mdsm-35100" style="padding: 0.5rem5em;" | {{#invoke: MiniSprite | Static | 061}} [[GeloraggioPoliwhirl]]
| class="min-width-md-35" style="padding: 0.5rem5em;" | {{#invoke:[[Giardino Boxdi |Malie]]<span boxTipo | Ghiaccio |class="visible-sm">: thick}}</span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="min-width-md-30" style="padding: 0.5rem;" | {{#invoke: Box | box | Speciale | Speciale (categoria danno) | Speciale | thick}}
| class="hidden-sm" |
| class="width-md-100" style="padding: 0.5em;" | <span class="visible-md small-text" style="padding-right: 0.3em;">Generazione:</span>{{#invoke: Box | box | Prima | Prima generazione | kanto | thick}}
| class="hidden-sm" |
| 10% di probabilità di congelare il bersaglio
|- class="roundy flex-mdsm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5em 05rem;"
| class="min-width-mdsm-35100" style="padding: 0.5rem5em;" | {{#invoke: MiniSprite | Static | 062}} [[LanciafiammePoliwrath]]
| class="min-width-md-35" style="padding: 0.5rem5em;" | {{#invoke:[[Giardino Boxdi |Malie]]<span boxTipo | Fuoco |class="visible-sm">: thick}}</span>
| style="padding: 0.5em;" | 1%{{tempo|G}}<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="min-width-md-30" style="padding: 0.5rem;" | {{#invoke: Box | box | Speciale | Speciale (categoria danno) | Speciale | thick}}
| class="hidden-sm" |
| class="width-md-100" style="padding: 0.5em;" | <span class="visible-md small-text" style="padding-right: 0.3em;">Generazione:</span>{{#invoke: Box | box | Prima | Prima generazione | kanto | thick}}
| class="hidden-sm" |
| 10% di probabilità di scottare il bersaglio
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 186}} [[Politoed]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%{{tempo|N}}<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy-header" style="margin-top: 0.5rem;"
| rowspan="4" class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 351}} [[Castform]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}}, [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center"
| style="padding: 0.5em;" | {{rt|17|Alola}}, [[Giungla Ombrosa]], [[Isola Exeggutor]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span><span class="visible-sm">, </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}}, [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center"
| style="padding: 0.5em;" | [[Villaggio Tapu]], [[Monte Lanakila]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]], [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span><span class="visible-sm">, </span>
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy-footer"
| style="padding: 0.5em;" | [[Deserto Haina]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]], {{DL|Condizione atmosferica|grandine}})</span><span class="visible-sm">, </span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 444}} [[Gabite]]
| style="padding: 0.5em;" | [[Deserto Haina]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 582}} [[Vanillite]]
| style="padding: 0.5em;" | [[Villaggio Tapu]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 583}} [[Vanillish]]
| style="padding: 0.5em;" | [[Monte Lanakila]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 584}} [[Vanilluxe]]{{#invoke: sup | USUL}}
| style="padding: 0.5em;" | [[Monte Lanakila]] (tranne la base)<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 704}} [[Goomy]]
| style="padding: 0.5em;" | [[Giungla Ombrosa]], {{rt|17|Alola}}<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 705}} [[Sliggoo]]
| style="padding: 0.5em;" | [[Isola Exeggutor]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|}
</nowiki>
 
{| class="roundy pullstd-centertable text-center white-rows roundy-cornerssortable" style="{{#invoke: css | horizGrad | type = {{{color|pcwiki}}} alola}} padding: 0.3rem; border-spacing: 03em;"
|- class="hidden-mdsm black-text"
! Alleato !! Luogo !! [[Condizione atmosferica#Pioggia battente|Pioggia]] !! {{DL|Condizione atmosferica|Grandine}} !! [[Condizione atmosferica#Tempesta di sabbia|Sabbia]]
! Mossa !! Tipo !! Cat. !! Gen. !! Effetto aggiuntivo
|- class="roundy flex-mdsm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5em 05rem;"
| class="min-width-mdsm-35100" style="padding: 0.5rem5em;" | {{#invoke: MiniSprite | Static | 061}} [[GeloraggioPoliwhirl]]
| class="min-width-md-35" style="padding: 0.5rem5em;" | {{#invoke:[[Giardino Boxdi |Malie]]<span boxTipo | Ghiaccio |class="visible-sm">: thick}}</span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="min-width-md-30" style="padding: 0.5rem;" | {{#invoke: Box | box | Speciale | Speciale (categoria danno) | Speciale | thick}}
| class="hidden-sm" |
| class="width-md-100" style="padding: 0.5em;" | <span class="visible-md small-text" style="padding-right: 0.3em;">Generazione:</span>{{#invoke: Box | box | Prima | Prima generazione | kanto | thick}}
| class="hidden-sm" |
| 10% di probabilità di congelare il bersaglio
|- class="roundy flex-mdsm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5em 05rem;"
| class="min-width-mdsm-35100" style="padding: 0.5rem5em;" | {{#invoke: MiniSprite | Static | 062}} [[LanciafiammePoliwrath]]
| class="min-width-md-35" style="padding: 0.5rem5em;" | {{#invoke:[[Giardino Boxdi |Malie]]<span boxTipo | Fuoco |class="visible-sm">: thick}}</span>
| style="padding: 0.5em;" | 1%{{tempo|G}}<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="min-width-md-30" style="padding: 0.5rem;" | {{#invoke: Box | box | Speciale | Speciale (categoria danno) | Speciale | thick}}
| class="hidden-sm" |
| class="width-md-100" style="padding: 0.5em;" | <span class="visible-md small-text" style="padding-right: 0.3em;">Generazione:</span>{{#invoke: Box | box | Prima | Prima generazione | kanto | thick}}
| class="hidden-sm" |
| 10% di probabilità di scottare il bersaglio
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 186}} [[Politoed]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%{{tempo|N}}<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy-header" style="margin-top: 0.5rem;"
| rowspan="4" class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 351}} [[Castform]]
| style="padding: 0.5em;" | [[Giardino di Malie]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}}, [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center"
| style="padding: 0.5em;" | {{rt|17|Alola}}, [[Giungla Ombrosa]], [[Isola Exeggutor]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span><span class="visible-sm">, </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}}, [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center"
| style="padding: 0.5em;" | [[Villaggio Tapu]], [[Monte Lanakila]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]], [[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span><span class="visible-sm">, </span>
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy-footer"
| style="padding: 0.5em;" | [[Deserto Haina]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]], {{DL|Condizione atmosferica|grandine}})</span><span class="visible-sm">, </span>
| class="hidden-sm" style="padding: 0.5em;" | 10%
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ([[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 444}} [[Gabite]]
| style="padding: 0.5em;" | [[Deserto Haina]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Tempesta di sabbia|sabbia]])</span>
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 582}} [[Vanillite]]
| style="padding: 0.5em;" | [[Villaggio Tapu]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 583}} [[Vanillish]]
| style="padding: 0.5em;" | [[Monte Lanakila]]<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 584}} [[Vanilluxe]]{{#invoke: sup | USUL}}
| style="padding: 0.5em;" | [[Monte Lanakila]] (tranne la base)<span class="visible-sm">: </span>
| class="hidden-sm" |
| style="padding: 0.5em;" | 1%<span class="visible-sm small-text"> ({{DL|Condizione atmosferica|grandine}})</span>
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 704}} [[Goomy]]
| style="padding: 0.5em;" | [[Giungla Ombrosa]], {{rt|17|Alola}}<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|- class="flex-sm flex-row flex-wrap flex-main-center flex-items-center roundy" style="margin-top: 0.5rem;"
| class="width-sm-100" style="padding: 0.5em;" | {{#invoke: MiniSprite | Static | 705}} [[Sliggoo]]
| style="padding: 0.5em;" | [[Isola Exeggutor]]<span class="visible-sm">: </span>
| style="padding: 0.5em;" | 10%<span class="visible-sm small-text"> ([[Condizione atmosferica#Pioggia battente|pioggia]])</span>
| class="hidden-sm" |
| class="hidden-sm" |
|}
 
In alcuni casi può essere preferibile rendere queste etichette sempre visibili, per esempio quando la tabella ha tante colonne, oppure quando ci sono righe con <code>colspan</code> diverso da 1 che non sono ben identificabili. In tal caso si può usare, al posto dello <code>span</code>, <code><nowiki><div class="inline-block-md"></nowiki></code>. Ecco un esempio (con breakpoint <code>sm</code>):
 
<nowiki>
Lucas992X
Amministratori
46 258

contributi

Estratto da "https://wiki.pokemoncentral.it/Speciale:DiffMobile/682122"