Fix: /store no mostraba nada al elegir personaje
El selector funcionaba: el fetch del catálogo respondía y React montaba el árbol entero, pero el tema lo tenía oculto y no se veía nada en pantalla. Son reglas del store original (BENNU), que ocultaba estos elementos y los revelaba con jQuery (.show()/slideToggle()). En el port a React la visibilidad la decide el montaje del componente, y el tema nw-ryu se carga el último para ganar la cascada, así que hay que deshacerlas con !important: - #store-div: ocultaba el árbol completo (el síntoma reportado). - #store-list li ul: habría ocultado las subcategorías al desplegarlas. Además, el <ul> anidado comparte clase con el <span> que lo abre (igual que en el markup original), así que el display:inline-block de los spans deformaba la lista. Esas reglas pasan a ir atadas a `span`. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+18
-10
@@ -519,21 +519,25 @@ textarea:focus {
|
||||
|
||||
/* ==== Tienda (/store) ==== */
|
||||
#store-list, #store-list ul { list-style: none; margin: 0; padding-left: 14px; }
|
||||
#store-list ul { display: block !important; }
|
||||
#store-list > li { margin: 4px 0; }
|
||||
#store-list .store-cat,
|
||||
#store-list .store-subcat,
|
||||
#store-list .store-sub-subcat {
|
||||
/* Ojo: como en el markup original, el <ul> anidado comparte clase con el <span>
|
||||
que lo abre (store-subcat/store-sub-subcat), así que estas reglas van atadas a
|
||||
`span` para no convertir la lista en inline-block ni teñirla al pasar el ratón. */
|
||||
#store-list span.store-cat,
|
||||
#store-list span.store-subcat,
|
||||
#store-list span.store-sub-subcat {
|
||||
display: inline-block !important;
|
||||
cursor: pointer;
|
||||
padding: 3px 0;
|
||||
user-select: none;
|
||||
}
|
||||
#store-list .store-cat:hover,
|
||||
#store-list .store-subcat:hover,
|
||||
#store-list .store-sub-subcat:hover { color: #fff; }
|
||||
#store-list .store-cat i,
|
||||
#store-list .store-subcat i,
|
||||
#store-list .store-sub-subcat i { transition: transform .2s; margin-right: 4px; }
|
||||
#store-list span.store-cat:hover,
|
||||
#store-list span.store-subcat:hover,
|
||||
#store-list span.store-sub-subcat:hover { color: #fff; }
|
||||
#store-list span.store-cat i,
|
||||
#store-list span.store-subcat i,
|
||||
#store-list span.store-sub-subcat i { transition: transform .2s; margin-right: 4px; }
|
||||
/* Rejilla de objetos dentro de una hoja (visible: React solo la monta al abrir) */
|
||||
#store-list .item-list {
|
||||
display: flex !important;
|
||||
@@ -553,7 +557,11 @@ textarea:focus {
|
||||
#store-list .item-box .item-img-box { width: 44px; height: 44px; border-radius: 6px; }
|
||||
#store-list .item-box .item-name { margin: 4px 0; min-height: 32px; }
|
||||
#store-list .item-box hr { margin: 6px 0; border-color: #352e2b; }
|
||||
#store-div { margin-top: 14px; }
|
||||
/* El tema esconde #store-div y los <ul> anidados (`display:none`) porque el store
|
||||
original los revelaba con jQuery (.show()/slideToggle()). Aquí la visibilidad la
|
||||
decide React montándolos, así que hay que deshacer ese display:none del tema
|
||||
(que se carga después y gana la cascada). */
|
||||
#store-div { margin-top: 14px; display: block !important; }
|
||||
|
||||
/* Carrito */
|
||||
#cart-list { margin-top: 16px; }
|
||||
|
||||
Reference in New Issue
Block a user