store: iguala el carrito y el cuadro de ítem al diseño original
Comparado contra el store original (ultimowow /es/store-bennu) con una sesión real: markup, CSS y clases que aplica su power.js. Cinco causas distintas: - Los nombres de ítem salían azules: el layout declaraba `const whTooltips`, que queda en el ámbito léxico del script y NO crea propiedad en `window`, que es de donde tooltips.js lee la config -> se ignoraba entera. Ahora `window.whTooltips`, con colorLinks+iconizeLinks (el original no define whTooltips y usa esos defaults; sus enlaces acaban con clases `icontinyl q4`). renameLinks sigue en false: el texto sale de nuestra BD, en español. - tooltips.js solo recorre el DOM al cargar, así que los enlaces que monta React (hoja del árbol, carrito) no se teñían. Se pasan por $WowheadPower.refreshLinks(), igual que hace el original tras cada AJAX. - globals.css redefinía .item-box/.item-name/.item-img-box/.max-left-table2, que el tema nw-ryu ya trae del original, y con más especificidad ganaba la cascada. El peor: un `border-collapse` que anulaba el `border-spacing: 0 8px` del tema, que es lo que separa las filas del carrito. - Faltaban la caja "Carrito - <REINO>" y "Personaje seleccionado: <nombre>" (coloreado por clase), que el original sí tiene. - El total de la columna "Cant" mostraba el número de líneas en vez de la suma de cantidades: un ítem que entrega un mazo de 20 debe contar 20, no 1. Verificado con navegador contra un build de producción: el nombre del ítem sale con clases `icontinyl q4` y color rgb(163,53,238), el mismo valor exacto que devuelve el original. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+12
-21
@@ -538,38 +538,29 @@ textarea:focus {
|
||||
#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) */
|
||||
/* Rejilla de objetos dentro de una hoja. El tema YA define .item-box, .item-name,
|
||||
.item-img-box y .item-box hr igual que el original: no se redefinen aquí (hacerlo
|
||||
con `#store-list ...` gana la cascada y descuadra el cuadro del ítem). Lo único
|
||||
que hace falta es deshacer el `display:none` con el que el tema oculta .item-list
|
||||
(el original la revelaba con jQuery; aquí la monta React) y reponer el hueco entre
|
||||
cajas: el PHP dejaba espacios en blanco entre los inline-block y JSX no los emite,
|
||||
así que se imita con column-gap (el vertical ya lo da el margin del tema). */
|
||||
#store-list .item-list {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 0 5px;
|
||||
margin: 8px 0 8px 10px;
|
||||
}
|
||||
#store-list .item-box {
|
||||
width: 150px;
|
||||
border: 2px solid #352e2b;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
#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; }
|
||||
/* 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; }
|
||||
#cart-list table.max-left-table2 { width: 100%; max-width: 620px; margin: 0 auto; border-collapse: collapse; }
|
||||
#cart-list th, #cart-list td { padding: 6px 8px; }
|
||||
#cart-list th.justified, #cart-list td.justified { text-align: left; }
|
||||
#cart-list .icon-td { text-align: center; width: 42px; }
|
||||
#cart-list .width-50-td { width: 50%; }
|
||||
/* Carrito: el tema ya trae .max-left-table2 (width 95% + border-spacing 0 8px, que
|
||||
es lo que separa las filas), .icon-td, .width-50-td y .justified del original.
|
||||
No se pisan: el `border-collapse` que había aquí anulaba ese border-spacing. */
|
||||
|
||||
/* Modal de resultado */
|
||||
.modal-div {
|
||||
|
||||
Reference in New Issue
Block a user