Ma suggestion pour le panneau Thèmes/Composants (CSS à l'intérieur)

UX
1

Je n’étais pas un grand fan de l’ancien panneau Thèmes/Composants (https://forum.alltiago.com/admin/customize/components), mais il était suffisant en termes d’espace et d’organisation (en quelque sorte). Mais le nouveau est vraiment un désordre, à mon avis.

Voici mon alternative pour passer de ceci :

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

… je n’aime pas la petite boîte exiguë à gauche, et le fait de cacher le mot Composants (peut-être que ce n’est qu’un problème avec mon écran de 13 pouces, mais peut-être que d’autres ont le même problème ?), et le comportement de défilement…

… à ceci :

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

image
image977×513 29.7 KB

Plus d’espace, pas de barres de défilement, les composants désactivés sont plus faciles à voir avec l’arrière-plan rouge. Lorsque vous passez la souris dessus, il devient un peu plus lumineux :

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

J’ai également supprimé ce titre supplémentaire, l’image et le bouton Installer redondant (il n’y en a maintenant qu’un au lieu de deux), et j’ai aligné les liens à gauche et leur ai donné une largeur supplémentaire pour éviter le retour à la ligne.

image
image558×211 11.8 KB

Voici le CSS :

/* Admin - panneau thèmes/composants plus large */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
    width: 98%;
}

/* Admin - marge supérieure du contenu des composants */
.desktop-view .admin-customize .show-current-style {
    margin-top: 3rem;
}

/* Admin - supprimer le défilement sur le conteneur des composants */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

/* Admin - masquer H1, bouton Installer, image */
.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 - ajuster les liens du bas */
.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 - arrière-plan des composants inutilisés (rouge) */
.admin-customize .themes-list-container__item.inactive-theme {
    background-color: #3f2525;
}

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

Je ne suis pas très doué en CSS, donc je ne sais pas si c’est bien ou pas, mais ça fonctionne. J’ai demandé à ChatGPT ceci :

/* Admin - supprimer le défilement sur le conteneur des composants */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

S’il y a quelque chose de redondant ou autre, n’hésitez pas à le partager pour que je puisse mettre à jour le code.

2 « J'aime »
2

C’est en fait l’inverse,

L’ancien agencement (la grille de rectangles) auquel vous faites référence est en fait ce qui sera le nouveau, mais les commentaires indiquaient qu’il n’était pas encore tout à fait prêt — nous sommes donc revenus à l’ancien. La version que vous voyez actuellement sera remplacée une fois que nous aurons ajouté quelques fonctionnalités manquantes à la nouvelle. C’est compréhensiblement un peu déroutant.

2 « J'aime »
3

Mes définitions « anciennes » et « nouvelles » étaient davantage liées à une chronologie. « Nouvelles » comme « ce qui est visible maintenant », même si j’étais conscient qu’il s’agissait de l’ancienne version. Je ne voulais pas rendre les choses plus confuses pour quelqu’un qui n’était pas au courant de cela.

2 « J'aime »