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:
2026-07-15 07:11:07 +00:00
parent 742567cfbf
commit 8e16ba8391
6 changed files with 142 additions and 92 deletions
+12 -21
View File
@@ -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 {