Template Pokémon degli allenatori da spezzare in sottotemplate

[Cruifer]

Descrizione

Mi è stato suggerito di spezzare quei template in vari sottotemplate. La proposta mi sembra abbastanza buona teoricamente, ma vorrei un po' più di dettagli. In quanti sottotemplate andrebbe spezzato? I template alla fine rimarebbero così come sono, o si modificherebbe il layout? È fattibile da realizzare? Ha senso farlo adesso che abbiamo appena iniziato a sistemarli, o è meglio finire tutto e poi spezzarli?

Pingo @lucas992 e @davla che mi avevano suggerito l'idea.

Pagine affette

Tutte quelle in Categoria:Template Pokémon allenatori

[flavio-a]

Io penso farei così:

• Header, che contenga l'intestazione ("Pokémon di tizio")
• Group, che corrisponda ad un gruppo di Pokémon, non ad una riga. Intendo dire tutti quelli che stanno di fianco ad una stessa "etichetta" (tipo "In mano", "liberati", etc...). Un'etichetta può essere più lunga di una riga (per esempio i Pokémon di Ash temporanei)
• Entry, che corrisponda al singolo Pokémon (in pratica il div che contiene l'NPartyPoké)
• Div (o un altro nome), che corrisponda alla riga dove metti il [comprimi]
• Footer, per chiudere il numero giusto di div lasciati aperti invece di farlo a mano nelle pagine

Con questa struttura mi immagino che un template sarebbe fatto così:

{{header|nome|colore}}
{{group|In mano|{{entry|pkmn1}} {{entry|pkmn2}} ... {{entry|pkmnN}} }}
{{div}}
{{group|Trovati| ... }}
{{group|amici| ... }}
...
{{group|Liberati| ... }}
{{footer}}

Notare che tutte le entry sono lo stesso parametro nel group, così se ne possono mettere quante si vuole senza cambiarlo. Il trucco per fare questo è tipo di mettere quel parametro come contenuto di un flex-wrap, mentre le entry hanno le larghezze giuste per andare a capo quando serve. Ovviamente il div non è obbligatorio.

Questa è solo l'idea che mi è venuta, forse si riesce a fare con meno pezzi e/o in modo più elegante. Inoltre io sono rimasto attaccato al tuo layout (quello per esempio del Team Poképals), magari a qualcuno ne viene in mente uno più bello.

[Cruifer]

Proposta di Luca: https://wiki.pokemoncentral.it/Utente:Lucas992/ProveTemplate https://wiki.pokemoncentral.it/Utente:Lucas992/ProveTemplate/AltreProveTemplate https://wiki.pokemoncentral.it/Utente:Lucas992/ProveTemplate/AltreProveTemplate2

Mi sembra di capire che tutti e due proponete una cosa del tipo header - riga - pkmn - riga ... - footer, giusto? Come idea mi sembra buona, ora cerco di capire se è conciliabile con il codice attuale o se c'è da cambiare roba. @lucas992 le modifiche al layout/stile sono volute, nel senso che ti piacerebbe così il template? Grazie a tutti e due btw

[lucas992x]

@Cruifer L'ho fatto così perché userei in linea di massima questo layout, discutendo poi le cose secondarie (per esempio se mettere i Pokémon al centro o a sinistra, oppure un eventuale contorno ai loro box).

[lucas992x]

Alcune cose da dire.

Allineamento verticale delle voci "In mano", "Liberati", etc. Con una riga o al massimo due va benissimo al centro, ma se i Pokémon in quel gruppo sono tanti (per esempio Ash ne ha decine al laboratorio del prof. Oak) è molto più comprensibile metterlo in alto, come è già ora. Ecco l'esempio di Ash:

I box fatti come sono ora (con sfondo gradientoso del tipo/tipi del Pokémon in questione) diventano poco visibili se lo sfondo è di colore uguale o simile. Per esempio Misty che ha lo sfondo color acqua e tanti Pokémon d'Acqua, o Iris che ha lo sfondo color drago e diversi Pokémon di questo tipo. Le due possibilità che mi vengono in mente sono:

• Aggiungere un bordino bianco al box del Pokémon.
• Mettere sfondo bianco e colorare solo il MiniSprite, come per esempio nei vari template catch/entry.

[Cruifer]

Non ho capito la prima parte del tuo discorso. Nel senso, non vorresti vedere le scritte allineate verticalmente, giusto? Ma ti riferisci al template nella tua sandbox? Perché attualmente anche nei template "nuovi" dovrebbe essere comunque così.

Per la seconda parte invece credo che l'idea migliore sia la seconda. Metto qualche screen che mi sembrano molto esplicativi:

Proposta 1 desktop:

Proposta 1 mobile:

Proposta 2 desktop:

Proposta 2 mobile:

Mi spiego: la prima proposta non mi sembra ottima, primo perché si era deciso di eliminare i bordi, e secondo perché da mobile viene fuori un doppio bordo terribile. La seconda proposta invece mi piace già di più.

[flavio-a]

L'osservazione di Luca sull'allineamento verticale delle etichette ("In mano", etc.) mi sembra molto sensata, non avevo pensato assolutamente a questo problema ma concordo con lui (l'ideale sarebbe allinearlo al centro della prima riga, non so quanto sia fattibile ma forse ho una mezza idea).

[lucas992x]

@Cruifer In realtà io vorrei le scritte allineate in alto verticalmente, proprio come succede negli attuali template. Lo dico perché Flavio le aveva centrate, probabilmente non sapendo che ci sarebbero stati anche casi "enormi" dove starebbero male, come appunto Ash.

[Cruifer]

Anche a me sembra meglio come dici tu Luca, anche perché è già così anche nei template nuovi. L'unica cosa è che per farlo serve probabilmente un div cuscinetto che occupi lo spazio vuoto. Ma non dovrebbe essere troppo problematico, credo. Ditemi la vostra sulla questione del background bianco, che mi sembra la soluzione migliore (bravo Luca). Ah, a proposito, posso occuparti le sandbox temporaneamente o ti servono per altra roba? Mi verrebbe più comodo perché c'è già qui i link e non ho voglia di crearmi altre 2/3 sottopagine rischiando anche di fare lavoro doppio.

[lucas992x]

Ma certo che potete usare quelle, ho messo apposta il work in progress lì per poterci lavorare tutti assieme comodamente. Non preoccupatevi che faccio prezzi modici per il noleggio :P Scherzi a parte, ho appena sistemato in modo da seguire il suggerimento di Flavio per l'inserimento dei Pokémon di uno stesso gruppo: basta metterli uno dopo l'altro come parametro {{{1}}} visto che sono contenuti in un flex che li allinea da solo, così non serve neanche aggiungere a mano i due

[Cruifer]

Allora, ho provato a mettere il codice attuale e al contrario di quel che pensassi funziona tutto. Come prima cosa ho usato l'ultima sandbox di Luca per fare da header (se ti serve la sandbox annulla pure senza pietà), non c'è bisogno del footer perché il contenuto è gestito da un parametro, quindi alla chiusura del template si chiude tutto il div grande. Per quanto riguarda la riga ho messo il codice attuale; per andare a capo quando i Pokémon sono più di 6 bisogna usare un'altra riga con contenuto   (ovvero lo spazio indivisibile; inoltre il template nasconde la riga su mobile con un ifeq per non lasciare degli spazi bianchi). Per quanto riguarda la cella anche qui ho messo il codice attuale, con alcuni cambiamenti: ho messo il background bianco e il box dello sprite del Pokémon col gradiente (ty Luca per avermi fatto scoprire il getType, ne ero all'oscuro e così risparmio due parametri).

L'unica perplessità che mi rimane sono le width, non so come gestirle. Con dei parametri per ognuna? o un parametro solo e poi uno ci scrive le width che gli pare?

Se avete suggerimenti per la grafica/layout ditelo, così abbiamo tutto il tempo di lavorarci.

[lucas992x]

Riguardandolo lascerei un massimo di 5 Pokémon per riga, così anche i nomi lunghi con shiny ci stanno senza andare a capo. La stellina degli shiny l'ho messa di fianco al MiniSprite e nascosta in sm.

Ho però forti dubbi sul fatto di dover dividere in questo modo, cioè mettendo a mano un gruppo per ogni riga. Sempre in riferimento al template dei Pokémon di Ash, lì quelli da nascondere sono a decine e oltre a doverlo implementare a mano nel codice, il risultato finale vedrebbe tanti "espandi" ognuno dei quali se cliccato mostra una sola riga dello stesso gruppo. Penso che sarebbe decisamente meglio se ogni gruppo fosse una cosa unica.

[Cruifer]

Non mi convince molto la scelta di 5 pkmn per riga, ci sono comunque problemi con le larghezze:

A questo punto quindi ne metterei 4 per riga, anche perché ci sono nomi particolarmente lunghi (vedi qui).

Per l'espandi, hai ragione. Ce ne dovrebbe essere solo uno, quindi probabilmente bisognerà fare un altro template solo per quello, in modo che venga richiamato solo una volta e che raccolga tutte le righe sotto di sé. Per quanto riguarda i gruppi non saprei come altrimenti gestire la cosa, non mi viene in mente nessuna alternativa sensata.

[lucas992x]

Ho sistemato quasi tutto (il problema sopra derivava dal fatto che non c'erano i wrap e quindi lui metteva a forza tutto in un'unica riga stringendo dove necessario), manca una sola cosa: per i gruppi nascosti penso abbia più senso mostrare l'etichetta a sinistra e nascondere solo i Pokémon, ma mi sta dando problemi. Vedo se riesco a sistemare anche questa cosa prima di cena.

[lucas992x]

UPDATE: ce l'ho fatta, ora mancherebbe da piazzare l'etichetta in cima al gruppo anziché in mezzo, magari non proprio in cima cima ma appena più sotto in modo che sembri all'altezza della prima riga. Per il resto dovrebbe essere tutto ok.

[flavio-a]

@lucas992 Basta togliere la classe vert-middle e aggiungere un po' di padding-top

[Cruifer]

Sicuro che non sia troppo sbatti aprire tutti gli espandi per cercare un dato Pokémon così? Aggiungo che c'è un po' troppo spazio tra una riga e l'altra, dovrebbe bastarne tipo la metà. Ah e non ho capito come mai hai spostato la stellina degli shiny, a me piaceva più prima ma vabbè questo non importa molto.

[lucas992x]

@Cruifer Lo spazio da mobile effettivamente è grosso, meglio ridurlo. La stellina mi sembrava stesse meglio dopo lo sprite, ma forse va meglio dopo il nome, boh. Qui diventa una cosa soggettiva, mi sa che andremo a votazione XD Il primo punto non l'ho capito: intendi dire che bisognerebbe comprimere tutti i gruppi in un unico Espandi anziché ognuno nel suo espandi?

[Cruifer]

Anche lo spazio tra la scritta e i pkmn è decisamente troppa da mobile (ma questo soltanto in quelli nascosti, quindi mi sa che è colpa del <div>&nbsp;</div>, forse andrebbe aggiunta la class hidden-md). Sì, mi riferivo a quello riguardo all'espandi. Cioè, personalmente non cambia nulla perché non li uso, però magari uno potrebbe trovarcisi male e mi sembra un po' scomodo com'è ora. Però boh, anche questo forse è un po' soggettivo.

[lucas992x]

Quello specifico div l'ho nascosto da mobile, ma continua ad esserci un po' troppo spazio anche tra una riga di Pokémon e l'altra: Il problema è che il div contenente il box bianco è inspiegabilmente alto, anche se ho messo forzatamente padding 0 sopra e sotto e height auto:

[Cruifer]

Dovrei aver risolto il problema dello spazio (vedi qui), credo dipendesse dal fatto che si stava usando uno span e non un div. A quanto pare risolve sia il problema dello spazio fra righe che quello dello spazio fra gruppi nascosti, anche se non ho capito bene perché.

[flavio-a]

@Cruifer non ci metto la mano sul fuoco, ma probabilmente il parser di Mediawiki interpretava la riga di soli span come riga di testo e quindi aggiungeva un p a caso, causando tutti i problemi perché i p hanno un sacco di margin top e bottom. Mettendoci un div invece lo interpreta come una riga di HTML e quindi non aggiunge più il p. Avete provato a guardare con l'inspector se appariva questo p misterioso?

[lucas992x]

Con l'inspector appariva questo p apparentemente inspiegabile, non pensavo fosse dovuto all'uso di span (che in teoria uno dovrebbe usare proprio per evitare i p). Comunque la versione attuale mi convince, penso restino da definire solo i dettagli, ossia:

• Stellina dei cromatici prima o dopo il nome.
• Abbassare leggermente le scritte del nome del gruppo.

Personalmente, a me entrambe le cose piacciono così come sono ora.

[Cruifer]

Allora, ripensandoci la stellina dello shiny andrebbe tolta. Dato che, giustamente, la stellina scompare da mobile, andrebbe rimesso lo sprite shiny (che è stato tolto non so quando in mezzo alle decine di edit). Così la stellina è ridondante quindi per me si potrebbe direttamente togliere. Per le scritte invece non mi convincono come sono adesso: non sono uniformi, nel senso che alcuni fluttuano in mezzo alla prima riga, mentre altri sono proprio sopra la riga, quindi rubano addirittura dello spazio a sinistra inutilmente. Prima di caricare i vari template comunque c'è ancora da decidere se vanno bene gli espandi così e decidere come gestire le width del box grande. E poi dovremmo anche fare qualche test per sicurezza.

[lucas992x]

@Cruifer ma sei sicuro che esistano i MiniSprite cromatici? Perché io non li trovo proprio.

[CiaobyDany]

@lucas992 I mini sprite cromatici non esistono, lel. Ne esistono solo alcuni su Bulba ma sono fan made.

[lucas992x]

@CiaobyDany Ecco, allora l'idea di Crusca di metterli è irrealizzabile, come immaginavo. Bisognerà tornare alla stellina.

[Cruifer]

"irrealizzabile" non è, perché di fatto è già così. Avevo dato per scontato che ci fossero perché ho visto questo e quest'altro, ma non ricordavo fossero fanmade. Ad ogni modo occhio a toglierli del tutto, perché poi su mobile si rischia di avere perdita di informazione. La stellina se proprio va messa io la metterei dopo il nome comunque, visto che sta per cromatico.

[lucas992x]

Per ora ho messo la stellina subito dopo il nome. Poi se avete idee migliori ne discutiamo e vediamo che fare.

[Cruifer]

Un paio di idee mi sono venute, ma hanno tutte dei grossi contro. All'inizio avevo pensato a mettere la scritta del nome colorata per i cromatici, ma anche così si avrebbe perdita di informazione da mobile e comunque potrebbe non risultare molto chiaro. Altrimenti si potrebbe mettere lo sfondo colorato anziché bianco, solo che potrebbe confondersi con il background dello sprite o anche con quello del box in caso di tipi elettro o simili.

[lucas992x]

@Cruifer Da mobile si ha già perdita di informazione, visto che vengono nascosti i nomi. Non penso sia grave perdere pure l'info della cromaticità. Anche perché ce l'hanno in pochissimi.

[Cruifer]

ok per gli shiny. Ora dovremmo sistemare pensare alle scritte. Nel senso, come sono adesso non vanno molto bene, come ho già spiegato prima. A questo punto forse conviene non affiancare scritta e pkmn ma mettere la scritta sopra e i pkmn sotto, anche perché per com'è adesso ruba soltanto spazio a sinistra.

[lucas992x]

@Cruifer Con scritta intendi il nome dei vari gruppi giusto? Mettere direttamente la scritta sopra al suo gruppo a pelle non mi convince molto, però ci penso un po' su, magari poi cambio idea.

[flavio-a]

Scusate se non ho seguito tutta la discussione e quindi mi intrometto adesso che avete quasi finito, però preferivo un solo "espandi" per tutto invece di uno per ogni etichetta. Inoltre credo che prima ci fossero sei Pokémon per riga per rispecchiare il fatto che un allenatore di può portare quelli dietro, ma questo non è fondamentale a mio avviso.

[lucas992x]

@flavio-a Io in generale preferisco che ci sia un Espandi per ogni gruppo, perché la maggior parte degli Allenatori ne ha pochi e così sono visibili a colpo d'occhio, però mi rendo conto che con Ash probabilmente sarebbe meglio un Espandi unico o almeno 2-3 Espandi, visto che ha 9 gruppi da nascondere.

[Cruifer]

preferivo un solo "espandi" per tutto invece di uno per ogni etichetta

idem, sto cercando di capire se la cosa sia fattibile o meno (ma credo di sì).

EDIT: sì, funziona bene, basta inserire un altro parametro.

credo che prima ci fossero sei Pokémon per riga per rispecchiare il fatto che un allenatore di può portare quelli dietro

effettivamente questa cosa ha senso, visto che il limite di sei Pokémon vale anche per l'anime. Che si fa?

[lucas992x]

Bravissimo per il nascondino, l'ho scritto anche nella documentazione. Mettere 6 Pokémon per riga concettualmente ha senso per il motivo che dici, però all'atto pratico mi sa che funzionerebbe solo su schermi grandi e impostando width-xl-100, altrimenti certi nomi lunghi poi vanno a capo. Volendo possiamo pensare di metterne 3 per riga lasciando uno o più box vuoti in caso di squadra "incompleta", ma non mi convince come soluzione.

[Cruifer]

Non sono sicuro di aver capito bene, in pratica una cosa simile al trainerlist?

Comunque intanto ho inserito i parametri per le width, xl e lg, facilmente intuibili. Ho preferito lasciare 100 su schermi md visto com'è fatto il template, ma volendo si può aggiungere anche quello.

[lucas992x]

Sì, intendevo una cosa simile al Trainerlist, ma come detto non mi convince. Però mi è venuta un'altra idea: mettere subito sotto all'etichetta "In mano" le 6 Poké Ball piene/vuote che si trovano nel template delle squadre, ecco un esempio: Secondo voi è attuabile? Ci starebbe bene?

Concordo sulle width, non vedo motivi per mettere meno di 100 in md.

[Cruifer]

@lucas992 Intanto fai una prova in Sandbox poi vediamo se sta bene o meno, così su due piedi non saprei risponderti.

[flavio-a]

Secondo voi è attuabile? Ci starebbe bene?

Medio perché c'è gente che invece di avere "in mano" ha "in rotazione" e l'elenco contiene più di 6 Pokémon. E comunque a me non entusiasma l'idea perché sarebbe solo sotto "in mano", non lo so, dovrei provare a vederlo. @lucas992 Per realizzarlo ti consiglio di guardare come veniva fatto nel template:Squadra e copiare da lì il codice (almeno per le prove, poi vediamo se si può migliorare).

[Cruifer]

Allora, ho fatto un paio di fix a quello che aveva messo Luca (erano giusto un paio di allineamenti del testo), ma in effetti se ce ne sono alcuni con più di sei non ha senso tenerlo.

[lucas992x]

@Cruifer Infatti l'ho messo nascosto di default così si decide di volta in volta se e dove dove metterlo, senza includerlo automaticamente nel gruppo "In mano".

[Cruifer]

Ah, ok, sì non ci avevo fatto troppo caso allora per me può anche andare.

Nel frattempo ho notato un problema che non so come risolvere, c'è decisamente troppo spazio vuoto a destra

[lucas992x]

@Cruifer Forse basta aggiungere un flex-main-center al posto giusto, adesso sono da telefono e non riesco a guardarci bene (tralasciamo il fatto che sto aspettando di fare un esame lol)

[flavio-a]

flex-main-center però sposta al centro anche quando ci sono meno di 6 Pokémon. Non puoi dire al flex "ehi, fai sempre finta che ci siano sei cerchietti e allineameli al centro tutti e sei, poi però mettimi a destra di questo allineamento al centro i cerchietti che ci sono davvero". In generale qualsiasi layout che centri i sei cerchi centrerà anche quando ce ne sono pochi (tipo nella foto centrerebbe anche i due Pokémon "evaporati"). E il problema principale è che questo flex-main-center (io consiglierei piuttosto un flex-main-space-around, però vedete qual'è più bello) si estende anche su desktop, dove secondo me fa un po' schifo. L'altra possibilità è di mettere davvero sempre sei cerchietti, solo che alcuni sono trasparenti.

[Cruifer]

@flavio-a A pensarci bene basterebbe un po' di margin fra un pkmn e l'altro. Solo che poi potrebbe dare problemi da desktop, quindi servirebbe un modo per far vedere il margin solo da mobile, ma non credo sia possibile o sbaglio?

[CiaobyDany]

@Cruifer Considerando che il margin collassa in caso di mancanza di spazio non si riesce a giostrare la cosa con width apposite?

[lucas992x]

Ho provato a risolvere così:

<div style="padding: 0 0.1em; margin: 0.2em 0;" class="width-xl-25 width-md-33 width-sm-15"> <div style="background: #fff; border-radius: 3.2rem;" class="width-sm-auto text-left pull-center"> [...] </div></div>

In pratica l'idea era impostare alla casella del Pokémon (primo div) width-sm-15 anziché l'attuale width-sm-auto, e poi fare in modo che la parte bianca (secondo div) avesse larghezza auto su schermi piccoli. Ma il risultato è questo (qui ovviamente è applicato solo al primo): Dunque il problema è che il contenitore prende giustamente la larghezza 15% mentre la casella bianca al suo interno non si restringe automaticamente. Dove sbaglio? Non posso metterci un inline-block per la larghezza automatica perché altrimenti questa si applica anche in modalità desktop "accorciando" le caselle bianche, cosa che ovviamente non vogliamo.

[flavio-a]

Prova inline-block width-xl-100 width-sm-15. Un inline-block ti serve, altrimenti non c'è speranza che il div sia largo come il contenuto e non il contenitore. Però tu vuoi che su schermi grossi, nonostante l'inline-block, il div sia largo, quindi gli schiaffi width-xl-100. Questa soluzione (ammesso che funzioni, non l'ho provata) potrebbe avere dei problemi dato che il parent ha del padding, serve davvero? Non si può mettere solo margin? PS: invece di border-radius: 3.2rem prova a mettere la classe roundy-full.

[lucas992x]

roundy-full non va bene perchè mette l'intera casella bianca a forma di ellisse su schermi più grandi, quindi border-radius: 3.2rem va lasciato. Ho provato a togliere il padding, "spostandolo" nel secondo div come margin, e ad aggiungere ciò che dici, ma continua a non funzionare: inline-block restringe la casella bianca a prescindere, anche con un width-xl-100 (e sembra anche che elimini il margin).