Il mio suggerimento per il pannello Themes/Components (CSS incluso)

UX
1

Non ero un grande fan del vecchio pannello Temi/Componenti (https://forum.alltiago.com/admin/customize/components), ma era abbastanza buono in termini di spazio e organizzazione (più o meno). Ma quello nuovo è davvero un casino, secondo me.

Ecco la mia alternativa per passare da questo:

SCR-20250324-ihkz
SCR-20250324-ihkz979×712 60.5 KB

… non mi piace la casella piccola e angusta a sinistra, e nascondere la parola Componenti (forse è solo un problema del mio schermo da 13", ma forse altri hanno lo stesso problema?), e il comportamento di scorrimento…

… a questo:

SCR-20250324-igwu
SCR-20250324-igwu969×1427 72.6 KB

image
image977×513 29.7 KB

Più spazio, niente barre di scorrimento, i componenti disabilitati sono più facili da vedere con lo sfondo rossastro. Quando ci passi sopra il mouse, diventa un po’ più luminoso:

SCR-20250324-ihsg
SCR-20250324-ihsg965×150 6.92 KB

Ho anche rimosso l’intestazione aggiuntiva, l’immagine e il pulsante Installa ridondante (ora ce n’è solo 1 invece di 2), e ho allineato i collegamenti a sinistra e ho dato loro una larghezza extra per evitare il wrapping.

image
image558×211 11.8 KB

Ecco il CSS:

/* Admin - pannello temi/componenti più ampio */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
    width: 98%;
}

/* Admin - margine superiore contenuto componente */
.desktop-view .admin-customize .show-current-style {
    margin-top: 3rem;
}

/*Admin - rimuovi scorrimento nel contenitore dei componenti */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

/* Admin - nascondi H1, pulsante Installa, immagine */
.admin-contents.admin-customize.admin-customize-themes .content-wrapper h1,
.admin-contents.admin-customize.admin-customize-themes .content-wrapper div.create-actions,
.admin-contents.admin-customize.admin-customize-themes img {
    display: none;
}

/* Admin - regola collegamenti inferiori */
.admin-contents.admin-customize.admin-customize-themes .admin-intro {
    margin: 2rem 0 0;
}

.admin-contents.admin-customize.admin-customize-themes .admin-intro .content-wrapper {
    width: 100%;
}

/* Admin - sfondo componenti non utilizzati (rosso) */
.admin-customize .themes-list-container__item.inactive-theme {
    background-color: #3f2525;
}

.admin-customize .themes-list-container__item.inactive-theme:hover {
    background-color: #573535;
}

Non sono un grande esperto di CSS, quindi non so se questo sia buono o meno, ma funziona. Ho chiesto a ChatGPT questo:

/*Admin - rimuovi scorrimento nel contenitore dei componenti */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

Se c’è qualcosa di ridondante o simile, sentiti libero di condividerlo in modo che possa aggiornare il codice.

2 Mi Piace
2

In realtà è il contrario,

Il vecchio layout (la griglia di rettangoli) a cui ti riferisci è in realtà quello che sarà il nuovo, ma il feedback è stato che non era ancora del tutto pronto, quindi siamo tornati al vecchio. La versione che vedi attualmente verrà sostituita una volta che avremo aggiunto alcune funzionalità mancanti a quella nuova. Comprensibilmente un po’ confuso.

2 Mi Piace
3

Le mie definizioni “vecchie” e “nuove” erano più legate a una linea temporale. “Nuovo” come “ciò che è visibile ora”, anche se ero consapevole che si trattasse della vecchia versione. Semplicemente non volevo renderlo più confuso per qualcuno che non ne era a conoscenza.

2 Mi Piace