Modulo Party da rendere mobile friendly

[Cruifer]

Descrizione

Il modulo Party, che dovrebbe essere quello definitivo, non è mobile friendly (anche se credo fosse stato creato apposta per questo). O almeno non è compatibile né col template Pokémon né col template nPokémon (vedi qui). Oltre a questo, nelle pagine sono usati il modulo Squadra e il template Squadra, entrambe delle vecchie versioni che non dovrebbero più essere usate (da quel che ho capito) e quindi bisognerà eliminarli dalle pagine. Dulcis in fundo, andrebbe anche un po' risistemata la grafica togliendo i gradienti di troppo, oppure mettere un gradiente radiale nel box dello sprite dell'allenatore.

[CiaobyDany]

@Cruifer Imo si potrebbero fare i box interni bianchi e #fuckthesystem. Un conto è se hai un Pokémon di un determinato tipo che ha senso che stai a specificare, perché magari è diverso dal contenitore (vedi Evobox), ma qui si tratta solo di abbellimenti grafici dal dubbio gusto (lo so che li ho proposti io inizialmente, non state a specificarlo). Se vai a scartabellare tra le mie cronologie delle sandbox (probabilmente la 2) avevo fatto una bozza di lavoro di aggiornamento, ma probabilmente mancavano un po' di strumenti odierni che sicuramente funzioneranno meglio, quindi non so quanto sia utile andare a guardare quella. Avendoci lavorato per un po' posso già esporre alcune criticità: -Le ricompense vanno messe nel box centrale perché sotto il boxettino dello sprite/modello dell'Allenatore fanno asimmetria per le lotte in doppio e per risolvere il problema bisogna fare bordelli immani. Non so perché non ci avessi pensato prima, ma è il modo più facile. -Nelle lotte in doppio rimane il problema del mostrare quale allenatore ha certi Pokémon e quale allenatore abbia gli altri. -Attualmente l'NPokémon dovrebbe essere compatibile con l'inserimento in un flex wrap. Se così non è è da rivedere in tal senso.

Varie ed eventuali mi verranno in mente a tempo debito.

[lucas992x]

Il cerchio/ellisse e il rettangolo che attualmente hanno un controgradiente io li metterei bianchi e via, trovo inutile il gradiente interno oltre che brutto in alcuni casi.

[CiaobyDany]

@CiaobyDany Ah, giusto, un altro problema è come allineare nelle lotte in doppio i due allenatori con le informazioni sulla lotta, perché nella versione desktop hai allenatore-info-allenatore e su mobile dovrai avere allenatore-allenatore-(a capo)-info. Immagino che si farà con un ignorantissimo show/hide responsive, ma magari trovate altre soluzioni che sono più meglio.

[lucas992x]

Da desktop, trovate proprio brutto mettere prima i due Allenatori e poi a destra il rettangolo delle info? Se si potesse passare da box tondo/elissoidale a rettangolare e affiancare i due sprite in un rettangolo unico, penso che non sarebbe male.

[CiaobyDany]

@lucas992 Idealmente mettevi due colori diversi sullo sfondo degli allenatori e poi li ripetevi nell'elenco Pokémon sotto. (es: Max rosso, Ivan Blu, sotto i Pokémon di Max in un box rosso e i Pokémon di Ivan in un box blu). Non che la cosa non si possa ripetere anche così in effetti, fai un horizgrad da un colore all'altro e diventa abbastanza intuitivo

[lucas992x]

Se fai l'horizGrad per distinguerli in questo modo sei a posto da desktop, ma non da mobile dove verranno impilati anziché affiancati (se ho capito bene cosa intendi).

[CiaobyDany]

@lucas992 Sinceramente pensavo di tenerli affiancati anche da mobile gli allenatori perché pensavo agli sprite fino alla quinta generazione, ma in effetti forse dalla sesta non ci stanno più bene affiancati. Qualcuno può confermare/smentire?

[lucas992x]

In VI/VII gen gli sprite sono 400*240px, decisamente troppo larghi per affiancarli da mobile senza doverli rimpicciolire troppo.

[Cruifer]

ho inizato a fare una prova qui. Come prima cosa ho tolto quei graidenti inutili e ho messo il background bianco. Poi ho messo un flex-sm-wrap in modo tale da far impilare i Pokémon.

desktop:

prima

dopo

mobile:

prima

dopo

da mobile ancora non va del tutto bene, quindi andranno impilati anche il box dell'allenatore e il rettangolo grande.

EDIT: ho messo la ricompensa nel box rettangolare e un altro flex-sm-wrap, risultato:

desktop:

mobile:

già meglio da mobile, ma ancora non ci siamo del tutto. A sto giro però non ho idea di quale possa essere il problema, idee?

NB: a chiunque poi caricherà il modulo: ho tolto un gradiente e una class roundy al contenitore dei Pokémon, era uguale al gradiente del box grande quindi era inutile.

[CiaobyDany]

https://wiki.pokemoncentral.it/Utente:Cruifer/Sandbox/3 Link per comodità Due cose: -Il wrap lo metterei da subito sinceramente, almeno inizia ad andare a capo anche con schermi medi perché altrimenti ti ritrovi cose di questo tipo: e non credo che siano il nostro obiettivo. -No, niente seconda cosa, pensavo di aver capito il bug ma è molto più complesso di quanto credessi, quindi al momento mi astengo da commenti di sorta perché non ho abbastanza tempo per indagarci.

[Cruifer]

allora, secondo me mettere il flex-wrap sin da subito non è una buona idea perché poi da desktop ti ritrovi questo: quindi ho messo il breakpoint a md, dimmi se noti comunque problemi.

[lucas992x]

Quest'ultimo screen mi convince ancora di più a rendere rettangolari i box attualmente elissoidali degli Allenatori. Per il resto sono d'accordo, meglio wrappare prima i Pokémon.

[lucas992x]

Altro problema: ma immagino sia dovuto al fatto che è un work in progress.

[Cruifer]

Quest'ultimo screen mi convince ancora di più a rendere rettangolari i box attualmente elissoidali degli Allenatori.

a me non convince:

ma immagino sia dovuto al fatto che è un work in progress.

In realtà boh, non saprei nemmeno come sistemarla sta cosa. Può essere che sia colpa del nPokémon?

[CiaobyDany]

Be', @Cruifer, lì il problema è che li devi mettere centrati, non il fatto che vadano a capo. Cioè, affiancati non vengono schiacciati? Io il wrap lo lascerei, ma sentiamo gli altri. Questione box sprite/modelli tondo: era tondo perché fino alla quinta avevamo gli sprite 80x80 pixel degli allenatori e se guardi le prime generazioni non viene male. Provare con un roundy 80 anziché un roundy full? Perché il roundy 10 non mi convince granché. AH, forse ho trovato un problema: mi sa che il box con le descrizioni della lotta ha una width fissa, e questo potrebbe creare problemi. Non escludo errori di sorta nell'nPokémon, li ho fatti praticamente appena usciti i flex, quindi non li sapevo usare così bene.

[Cruifer]

roundy 80 non esiste nel css, massimo 20 che viene così: ma comunque si può mettere nello style, l'equivalente in proporzione sarebbe 5rem ovvero questo: btw, col subst mi metto a vedere se c'è da sistemare nel nPokémon.

ok, l'allineamento sballato era colpa di alcuni    messi a caso.

[CiaobyDany]

A me con il 5 rem piace. Che poi era come doveva essere in origine prima di scoprire che il roundy-full non funzionava come credevo.

[Cruifer]

A me con il 5 rem piace. Che poi era come doveva essere in origine prima di scoprire che il roundy-full non funzionava come credevo.

a me non piace molto, perché si vede che non è allineato con l'altro box, mentre col roundy-full la cosa era grosso modo impercettibile. Allineato come penso io verrebbe così:

non è meglio?

[CiaobyDany]

Ah, sì, così viene meglio, conta che prima sotto c'era la ricompensa, quindi veniva allineato giusto. A proposito di ricompensa, è così necessario mandare a capo dopo i due punti? Anzi, è così necessario scrivere che è la ricompensa? Non viene scritta nessuna altra informazione e oggettivamente trovo difficile fraintendere i soldi/PL/ilcazzocheè per qualcosa che non sia la ricompensa.

[lucas992x]

Concordo con Bany sia sulla nuova forma del box sia sulla ricompensa. Poi pensavo che si potrebbe spostare il rettangolino delle Poké Ball sotto il box dello sprite, così da mobile si vedrebbe subito quello prima delle altre info. Che ne dite? (Ovviamente facendo così si allungherebbe leggermente l'altro rettangolo in modo da averlo alto come gli altri due messi assieme.)

[CiaobyDany]

@lucas992 Se poi effettivamente mettiamo anche il secondo sprite/modello nello stesso box non è un'idea malvagia e ha anche il suo senso.

[lucas992x]

A pensarci meglio, forse le Ball starebbero meglio direttamente dentro allo stesso box dello sprite, e non in un box separato immediatamente sottostante.

[CiaobyDany]

@lucas992

[CiaobyDany]

@CiaobyDany Avevo mandato uno sticker da Telegram ma non l'ha preso. Idea GENIALE. Peccato che con gli sprite di quinta ci vada a mignotte. Vorrei vedere una prova prima di decidere.

[Cruifer]

AH, forse ho trovato un problema: mi sa che il box con le descrizioni della lotta ha una width fissa, e questo potrebbe creare problemi.

"impossibile sia questo". E invece era quello. Però poi si vede da schifo. Quindi ho messo tanto padding, anche se sono abbastanza sicuro che poi dedalo mi direbbe che questa soluzione puzza. Ok, ero concentrato su questo che ho perso di vista il resto della discussione sui due allenatori, pls riassumete quello che avete detto prima @CiaobyDany e/o @lucas992 e altre eventuali cose che mi sono perso.

[CiaobyDany]

@Cruifer Ma le width percentuali fanno tanto schifo? Eventualmente lasciando una width fissa minima per il box esterno onde evitare situazioni di mega-shrink del tutto con la squadra collassata.

Basically, l'idea è di mettere lo sprello (termine che userò da qui all'infinito per indicare sprite/modello) secondo allenatore della lotta in doppio nello stesso box in cui c'è lo sprello del primo allenatore. E per evitare problemi di allineamenti a cazzo con il box delle info e le Ball sotto di esso potremmo mettere le Ball sempre nel box degli sprelli. Il punto è che per i modelli gen 6+ la cosa va bene perché sono già larghi, mentre per gli sprite gen 1-5 viene fuori il coso molto allargato rispetto allo sprite, quindi vorrei vedere un esempio pratico.

[Cruifer]

Ma le width percentuali fanno tanto schifo? Eventualmente lasciando una width fissa minima per il box esterno onde evitare situazioni di mega-shrink del tutto con la squadra collassata.

Le width in quel box venivano beatamente ignorate quindi boh. Ho messo un min-width-xl-33 alla table btw.

Per il resto ho provato a fare quello che hai detto ma non sono sicuro di aver capito bene, dacci un occhiata quando vuoi.

[CiaobyDany]

Meglio di quanto pensassi, puoi fare un ultimo tentativo quando hai tempo di una lotta singola con gli sprite gen I-V?

[Cruifer]

puoi fare un ultimo tentativo quando hai tempo di una lotta singola con gli sprite gen I-V?

Non mi sono dimenticato, ovviamente. No no. Se riesco lo faccio di pomeriggio/stasera.

Nel frattempo che mi dimenticavo del commento di dany, mi sono messo a migliorare un po' il layout. Visto che l'allineamento veniva comunque sballato in qualche modo, ho trovato un'altra soluzione. Ovvero, il box più piccolo dei due si allunga fino ad essere come l'altro, e il contenuto viene centrato verticalmente. (non ho scopiazzato dal Template:AnimePokémonInfobox, macché).

Cioè, siamo tutti d'accordo che questo:

sia meglio di questo, sì?

[CiaobyDany]

Sì, siamo tutti d'accordo. Dove con tutti d'accordo intendo che io e il mio OCD siamo d'accordo e non me ne frega un cazzo di cosa pensino gli altri. Già che ci sei, ci sarebbe da sistemare nel box bianco delle scritte un po' di padding/margin/line-height che messi così a cdc non mi hanno mai convinto.

[Cruifer]

puoi fare un ultimo tentativo quando hai tempo di una lotta singola con gli sprite gen I-V?

Ok, ho messo una carrellata di prove in sandbox.

ci sarebbe da sistemare nel box bianco delle scritte un po' di padding/margin/line-height

Ho tolto uno style="line-height: 10px" nella classe allenatore che mi sembrava peggio che meglio messo lì, e la scritta Ricompensa:. Il resto tutto sommato non mi sembra male.

[lucas992x]

Per casi come questo ci vuole una larghezza minima del box bianco: Se lo ingrandissimo a sufficienza secondo me verrebbe bene anche con questi sprite.

[CiaobyDany]

IDEA: e se il boxettino della fuffa a parole diventasse un flex column? Adesso ci sono ancora un po' di differenze di margin/padding che non mi entusiasmano, ma se diventasse un flex non ci sarebbero problemi. Per il box sprello allenatore sì, con un min-width: 10em o il cazzo che è mi andrà bene così.

[Cruifer]

@lucas992 ho messo un min-width-xl-40, dimmi se va meglio.

@CiaobyDany è già un flex-column, e no, non ci sono altri margin o padding ma solo big-text o text-small, al limite può essere quello.

[CiaobyDany]

@Cruifer Io la min-width la setterei fissa piuttosto che in percentuale, perché date le diverse dimensioni degli schermi con cui andrai a lavorare potresti avere problemi.

Oh... Allora boh, saranno paranoie mie

[lucas992x]

Per quelli delle vecchie gen mi sembra che vada bene. Però bisogna allargare anche per i nuovi, vedi Diantha (forse non hai visto l'edit del mio commento).

[lucas992x]

@CiaobyDany Sai che questa è un'ottima idea? Tanto sappiamo a priori la dimensione in pixel degli sprelli, quindi...

[CiaobyDany]

@lucas992 Più che degli sprelli direi che il problema sono le ball. Contiamo quanto sono larghe ad occhio, decidiamo un minimo di spazio vuoto che vogliamo metterci intorno e impostiamo la min-width. Senza fare troppi conti farei una prova con uno sprite di prima mettendo grandezze a caso finché non si arriva ad un intorno sufficientemente approssimato e poi si decide.

[Cruifer]

No wait, non si può lavorare sulle Ball perché non sono quelle che danno problema nel caso specifico di Diantha. E no, la width minima fissa non mi sembra una buona idea perché la width fissa era proprio quella che non rendeva il modulo mobile friendly. Piuttosto andrebbe provato un img-fluid in modo che il box si allarghi quanto basta adattandosi al caso specifico, ma preferisco guardarci con più calma domani.

[flavio-a]

Non ho seguito un cazzo del resto, ho letto adesso solo la questione degli spirte: per quelli nuovi grossi se si riesce l'ideale è del padding, così anche i bordi arrotondati (approvati da Giovanni Muciaccia) non intersecano lo sprite. Ho dovuto fare la stessa cosa con l'Evobox (e non ho risolto tutti i problemi). In ogni caso un img-fluid mi sembra sempre un'ottima idea per evitare sprite megaenormi che intasano la visualizzazione.

[Cruifer]

Allora, mi sono reso conto di un problema per cui il min-width-xl-40 non si può usare:

E boh, ho provato ad usare l'img-fluid e non ho ottenuto i risultati sperati, se qualcuno più bravo di me ci può dare un'occhiata mi fa un piacere.

Nel mentre stavo pensando che lo spazio fra i Pokémon può essere gestito molto meglio con un flex-main-space-evenly:

ditemi che vi sembra, a me pare molto meglio.

[CiaobyDany]

Che era il motivo per cui ti avevo detto di usare le min-width fisse. Se non va bene nessuna delle due la situazione inizia a diventare un problema. Hai provato con un min-width-xl-20 min-width-md-40? Gli iMac 5k full screen continueranno a vederlo male ma sti gran cazzi onestamente. Dovremmo tenere da conto range umani di utilizzo, quindi fino al Full HD. Per il resto lo space evenly mi piace.

[Cruifer]

Messo lo space evenly e le min-width. E boh, non mi sembra che risolvano particolarmente il problema. Mi inventerò qualcosa.

[davla]

Scrivete troppo. In ordine sparso:

• Mi sono accorto che 1rem = 10px distrugge il senso del rem. Quindi, in linea di massima, 1rem = 16px, perché quello è il default del browser. Ho già cambiato le classi roundy per rispecchiare questa cosa, e nessuno fino ad ora se n'è accorto, quindi ho fatto le cose bene.
• Vedo che un roundy solo in orizzontale piace molto. Vedo se riesco a inventarmi cose per farlo facile.
• Nelle primissime versioni di Crusca, modello + info non ci stavano da mobile perché vengono centrati in un div che è più largo dello schermo per colpa dei Pokémon sotto. Risolvendo cotal problema, dovrebbe entrarci decentemente. In ogni caso, sono comunque più favorevole a metterlo sotto da mobile.
• Le min-width vengono bene con i wrapper. Fai un <div class="min-width-xl-128"> e dentro ci metti la tua cosa. Potrebbe funzionare ma anche no.

[davla]

UPDATE: È un casino della madonna