No me gustaba mucho el antiguo panel de Temas/Componentes (https://forum.alltiago.com/admin/customize/components), pero era lo suficientemente bueno en cuanto a espacio y organización (más o menos). Pero el nuevo es un verdadero desastre, en mi opinión.
Aquí está mi alternativa para pasar de esto:
… no me gusta la caja pequeña y apretada de la izquierda, y que oculte la palabra Componentes (quizás esto sea solo un problema de mi pantalla de 13", pero ¿quizás otros tengan el mismo problema?), y el comportamiento de desplazamiento…
… a esto:
Más espacio, sin barras de desplazamiento, los componentes deshabilitados son más fáciles de ver con el fondo rojizo. Cuando pasas el ratón por encima, se vuelve un poco más brillante:
También eliminé ese encabezado adicional, la imagen y el botón de Instalación redundante (ahora solo hay 1 en lugar de 2), y alineé los enlaces a la izquierda y les di un ancho adicional para evitar que se corten.
Aquí está el CSS:
/* Admin - panel de temas/componentes más ancho */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
width: 98%;
}
/* Admin - margen superior del contenido del componente */
.desktop-view .admin-customize .show-current-style {
margin-top: 3rem;
}
/*Admin - eliminar desplazamiento en el contenedor de componentes */
.admin-customize .themes-list-container {
overflow-y: visible;
max-height: none;
height: auto;
}
/* Admin - ocultar H1, botón Instalar, imagen */
.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 - ajustar enlaces inferiores */
.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 - fondo de componentes no utilizados (rojo) */
.admin-customize .themes-list-container__item.inactive-theme {
background-color: #3f2525;
}
.admin-customize .themes-list-container__item.inactive-theme:hover {
background-color: #573535;
}
No soy un gran fan del CSS, así que no sé si esto es bueno o no, pero funciona. Le pedí esto a ChatGPT:
/*Admin - eliminar desplazamiento en el contenedor de componentes */
.admin-customize .themes-list-container {
overflow-y: visible;
max-height: none;
height: auto;
}
Si hay algo redundante o similar, no dudes en compartirlo para que pueda actualizar el código.