Come aggiungere la colonna “Visualizzazioni” all’elenco degli argomenti.
Non sono uno sviluppatore o un programmatore. Ho passato qualche ora a giocare con il codice CSS utilizzando la funzione Ispeziona elemento in Google Chrome. Sono riuscito a far visualizzare correttamente la colonna delle visualizzazioni e ho anche ridimensionato ogni colonna a mio piacimento. Sentiti libero di modificare la larghezza nel codice CSS sottostante. Ho anche aggiunto commenti nel codice in modo che tu possa facilmente capire quale codice si riferisce a quale colonna. Per ogni colonna, ci sono 2 aree (Intestazione e riga). Queste larghezze devono corrispondere.
Spero che questo aiuti tutti voi: @daming @bksubhuti @eddy2
Istruzioni
1. Crea un nuovo componente.
2. Copia questo CSS
Usa questo CSS aggiornato qui sotto invece del codice fornito da @jordan.vidrine sopra.
Opzione A) Aggiungi la colonna Visualizzazioni solo per Desktop (Consigliato)
- Aggiungi il codice CSS nella scheda
Desktop.
Opzione B) Aggiungi la colonna Visualizzazioni sia per Desktop che per Mobile.
- Aggiungi il codice CSS nella scheda
Common.
Opzione C) Aggiungi la colonna Visualizzazioni solo per Mobile.
- Aggiungi il codice CSS nella scheda
Mobile.
Nota: Se hai scelto l’Opzione B o C…
Su mobile, le 3 colonne (Risposte, Visualizzazioni, Attività) occupano troppo spazio e sono schiacciate. Se hai bisogno di questo per il mobile, ti suggerisco di rimuovere una delle 3 colonne. Puoi farlo aggiungendo Display: none a entrambe le aree (Intestazione, Righe) nel codice CSS sottostante per la colonna che desideri nascondere.
/* [Topic] */
/* Intestazione Argomento */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
width: 66%;
}
/* Riga Argomento */
.full-width .contents .topic-list .topic-list-header .topic-list-data.default {
width: 66%;
}
/* [Replies] */
/* Intestazione Risposte */
.full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
width: 7%;
order: 2;
}
/* Righe Risposte */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
width: 7%;
order: 2;
}
/* [Views] */
/* Intestazione Visualizzazioni */
.full-width .contents .topic-list .topic-list-header .topic-list-data.views {
display: block;
width: 7%;
order: 3;
}
/* Righe Visualizzazioni */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
width: 7%;
order: 3;
display: flex;
justify-content: center;
align-items: center;
}
/* [Activity] */
/* Intestazione Attività */
.full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
display: block;
width: 7%;
order: 4;
}
/* Righe Attività */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
width: 7%;
order: 4;
}
@jordan.vidrine Se hai delle revisioni al CSS che ho scritto, fammelo sapere. Non so bene cosa sto facendo… ma funziona lol.