fix: /expired-link, el botón descuadrado y el mensaje que no se veía
Dos cosas, y la segunda dejaba la página sin contenido:
- El botón "Solicitar nuevo cambio de correo" salía de 250x100 pegado a la
derecha. `.back-to-account` es el botón de la CABECERA de una caja (250px de
ancho, line-height 50, float right); suelto en el CUERPO el float lo pega a un
lado, y el texto no cabe en 250px, se parte en dos líneas y cada una se lleva
sus 50px. Se le deja el aspecto del tema pero ajustado a su texto: pasa a
336x50 y centrado.
- El mensaje rojo ("el enlace ha expirado") NO SE VEÍA: el tema deja
`.alert-message` con display:none porque es el hueco que rellena y revela el
JS, y aquí el aviso es estático. Se pone display:block a mano, igual que hacen
todos los formularios del proyecto. Comprobado que al original le pasa lo
mismo: su página de enlace caducado enseña el título y el botón, y la
explicación queda invisible.
Medido en el navegador: botón 336x50, centrado, sin desbordar, y el mensaje
visible.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -29,7 +29,11 @@ export default async function ExpiredLinkPage({ params }: { params: Promise<{ lo
|
|||||||
<ServiceBox heading={t('expiredLink.pageTitle')}>
|
<ServiceBox heading={t('expiredLink.pageTitle')}>
|
||||||
<div className="centered">
|
<div className="centered">
|
||||||
<br />
|
<br />
|
||||||
<div className="alert-message">
|
{/* `display:block` a mano, como el resto de formularios: el tema deja
|
||||||
|
`.alert-message` OCULTA para que la rellene y la revele el JS. Aquí
|
||||||
|
el aviso es estático y sin esto no se ve NINGUNO — le pasa al
|
||||||
|
original, que enseña esta página con el mensaje invisible. */}
|
||||||
|
<div className="alert-message" style={{ display: 'block' }}>
|
||||||
<span className="red-form-response">{t('expiredLink.message')}</span>
|
<span className="red-form-response">{t('expiredLink.message')}</span>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
|
|||||||
@@ -40,6 +40,19 @@ input[type='number'] {
|
|||||||
table {
|
table {
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
}
|
}
|
||||||
|
/* `.back-to-account` es el botón de la CABECERA de una caja: 250px de ancho,
|
||||||
|
line-height 50 y flotando a la derecha. Cuando se usa suelto en el CUERPO
|
||||||
|
(el "Solicitar nuevo cambio de correo" de /expired-link) sale mal por dos
|
||||||
|
motivos: el float lo pega a la derecha en vez de centrarlo, y el texto no cabe
|
||||||
|
en 250px, se parte en dos líneas y cada una se lleva sus 50px -> un botón de
|
||||||
|
250x100. Aquí se le deja el aspecto del tema pero ajustado a su texto. */
|
||||||
|
.body-box-content .centered a.back-to-account {
|
||||||
|
float: none;
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Mismo caso que .item-box de la tienda: el tema da a `.cc-box` (creadores de
|
/* Mismo caso que .item-box de la tienda: el tema da a `.cc-box` (creadores de
|
||||||
contenido) una altura FIJA de 172px contando con el content-box del navegador,
|
contenido) una altura FIJA de 172px contando con el content-box del navegador,
|
||||||
y el border-box de Tailwind le resta el padding y el borde. Con 24px menos de
|
y el border-box de Tailwind le resta el padding y el borde. Con 24px menos de
|
||||||
|
|||||||
Reference in New Issue
Block a user