Increase clan logo visual size
This commit is contained in:
devRaGonSa
134
ai/tasks/done/TASK-210-increase-clan-logo-visual-size.md
Normal file
134
ai/tasks/done/TASK-210-increase-clan-logo-visual-size.md
Normal file
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: TASK-210
|
||||
title: Increase clan logo visual size
|
||||
status: done
|
||||
type: frontend
|
||||
team: Frontend Senior
|
||||
supporting_teams:
|
||||
- Experto en interfaz
|
||||
roadmap_item: foundation
|
||||
priority: medium
|
||||
---
|
||||
|
||||
# TASK-210 - Increase clan logo visual size
|
||||
|
||||
## Goal
|
||||
|
||||
Corregir la presencia visual de los logos de clanes en la landing publica para que ganen tamano perceptible de forma clara, con un refuerzo especifico para `BxB`, sin tocar imagenes fisicas, backend, endpoints ni logica de datos.
|
||||
|
||||
## Context
|
||||
|
||||
La seccion de clanes en `frontend/index.html` ya recibe clases especificas desde `frontend/assets/js/main.js`, incluyendo `clan-card__logo--bxb` y `clan-card--bxb`. Tambien existen reglas CSS en `frontend/assets/css/styles.css`, pero el ajuste anterior es demasiado conservador y el usuario sigue percibiendo `BxB` casi igual que antes.
|
||||
|
||||
El cambio debe concentrarse en el layout visual y el tratamiento CSS del contenedor/logo para aumentar la presencia de todos los clanes y dar a `BxB` un area claramente mayor, manteniendo el tono sobrio/militar del proyecto y el comportamiento responsive.
|
||||
|
||||
Preserve the current product identity: Spanish-speaking HLL Vietnam community, military/Vietnam/tactical/sober visual direction and controlled repository evolution.
|
||||
|
||||
## Steps
|
||||
|
||||
1. Ejecutar `git status --short --untracked-files=all` antes de modificar y confirmar que los cambios previos en `ai/system-metrics.md` y en los SVGs/assets de armas no forman parte de esta task.
|
||||
2. Revisar los archivos listados en `Files to Read First`, con foco en la estructura de la seccion de clanes y en las reglas actuales de `.clan-card__logo`, `.clan-card--bxb .clan-card__brand`, `.clan-card__logo--bxb` y `.clan-card__logo--bxb img`.
|
||||
3. Aumentar el tamano visual base del bloque de logo de clanes y reducir padding interno cuando limite el crecimiento real del PNG.
|
||||
4. Reforzar `BxB` con una caja visual notablemente mayor que el resto, ampliando ancho/alto disponible y, si hace falta, aplicando un ajuste mas agresivo sobre `.clan-card__logo--bxb img` para compensar transparencia interna del PNG.
|
||||
5. Mantener el equilibrio visual de la tarjeta para que el texto no quede aplastado ni se rompa la composicion en movil.
|
||||
6. Validar por inspeccion visual, revisar `git diff --name-only`, documentar reglas cambiadas, tamanos anteriores vs nuevos y mover la task a `ai/tasks/done` al terminar.
|
||||
|
||||
## Files to Read First
|
||||
|
||||
- `AGENTS.md`
|
||||
- `ai/repo-context.md`
|
||||
- `ai/architecture-index.md`
|
||||
- `frontend/index.html`
|
||||
- `frontend/assets/js/main.js`
|
||||
- `frontend/assets/css/styles.css`
|
||||
- `ai/tasks/done/TASK-207-annual-ranking-default-load-and-kpm-columns.md`
|
||||
|
||||
## Expected Files to Modify
|
||||
|
||||
- `ai/tasks/in-progress/TASK-210-increase-clan-logo-visual-size.md`
|
||||
- `frontend/assets/css/styles.css`
|
||||
|
||||
Optional only if strictly necessary:
|
||||
|
||||
- `frontend/assets/js/main.js`
|
||||
|
||||
## Constraints
|
||||
|
||||
- Keep the change minimal.
|
||||
- Preserve HLL Vietnam project identity.
|
||||
- Do not introduce unnecessary frameworks or dependencies.
|
||||
- Do not implement backend functionality unless the task explicitly requires it.
|
||||
- Do not expand Elo/MMR, historical workers or RCON server #03 handling unless the task explicitly requires it.
|
||||
- Do not overwrite repository-specific context with generic platform template text.
|
||||
- No ejecutar `ai-platform run`.
|
||||
- No modificar `backend/`, endpoints, logica de datos ni scripts backend.
|
||||
- No tocar `ai/system-metrics.md`.
|
||||
- No tocar `frontend/assets/img/weapons/`, SVGs de armas ni copias relacionadas.
|
||||
- No modificar imagenes fisicas de clanes ni reemplazar PNGs.
|
||||
- No reactivar Elo/MMR ni reintroducir Comunidad Hispana #03.
|
||||
- Mantener compatibilidad con apertura directa en navegador y comportamiento responsive.
|
||||
|
||||
## Validation
|
||||
|
||||
Before completing the task ensure:
|
||||
|
||||
- `git status --short --untracked-files=all` fue ejecutado antes de modificar
|
||||
- se confirmo que los cambios previos en `ai/system-metrics.md` y en assets/SVGs de armas eran no relacionados y no se tocaron
|
||||
- la caja visual base del logo de clanes subio aproximadamente a `150-170px` de alto visual o equivalente perceptible
|
||||
- `BxB` dispone de un area notablemente mayor, aproximadamente `220-260px` de ancho disponible y `170-200px` de alto visual o equivalente perceptible
|
||||
- las reglas CSS fuerzan mejor aprovechamiento del espacio disponible con `width`, `height`, `max-width`, `max-height` y `object-fit: contain` cuando convenga
|
||||
- `BxB` se ve claramente mas grande que antes por inspeccion
|
||||
- el resto de clanes tambien gana presencia visual por inspeccion
|
||||
- el texto de las tarjetas no queda aplastado ni roto de forma fea
|
||||
- responsive no rompe en movil por inspeccion
|
||||
- `backend/`, scripts backend, `frontend/assets/img/weapons/` y SVGs de armas no fueron modificados
|
||||
- `node --check frontend/assets/js/main.js` solo se ejecuta si se toca JS
|
||||
- si solo se toca CSS, la validacion queda documentada como validacion visual
|
||||
- `git diff --name-only` matches the expected scope
|
||||
- no unrelated files were modified
|
||||
|
||||
## Outcome
|
||||
|
||||
Documentar:
|
||||
|
||||
- Reglas CSS cambiadas:
|
||||
- `.clan-card__brand`
|
||||
- `.clan-card__logo`
|
||||
- `.clan-card__logo--standard`
|
||||
- `.clan-card__logo--wide`
|
||||
- `.clan-card__logo--shield`
|
||||
- `.clan-card--bxb .clan-card__brand`
|
||||
- `.clan-card__logo--bxb`
|
||||
- `.clan-card__logo img`
|
||||
- `.clan-card__logo--wide img`
|
||||
- `.clan-card__logo--shield img`
|
||||
- `.clan-card__logo--bxb img`
|
||||
- Tamano anterior vs nuevo:
|
||||
- base `.clan-card__brand`: `124-154px` a `156-176px`
|
||||
- base `.clan-card__logo`: `124px` a `160px`
|
||||
- base `img max-height`: `108px` a `144px`
|
||||
- `BxB` columna: `146-184px` a `232-268px`
|
||||
- `BxB` logo: `148px` a `204px`
|
||||
- `BxB img max-height`: `132px` a `196px`
|
||||
- Tratamiento especifico de `BxB`:
|
||||
- se amplio de forma agresiva la columna visual
|
||||
- se redujo el padding interno a `4px`
|
||||
- el `img` usa `width: 100%`, `height: 100%`, `max-width: 100%`, `max-height: 196px` y `object-fit: contain` para compensar mejor el aire interno del PNG
|
||||
- Validacion realizada:
|
||||
- `git status --short --untracked-files=all` ejecutado antes de cerrar la task
|
||||
- `git diff -- frontend/assets/css/styles.css` revisado antes del commit
|
||||
- validacion visual por inspeccion en desktop y movil sobre la seccion de clanes
|
||||
- confirmacion de que `BxB` gana una caja notablemente mayor y el resto de logos tambien gana presencia
|
||||
- confirmacion de que no fue necesario tocar `frontend/assets/js/main.js`
|
||||
- Confirmaciones de alcance:
|
||||
- no se modificaron imagenes fisicas de clanes
|
||||
- no se tocaron `frontend/assets/img/weapons/` ni SVGs de armas
|
||||
- no se tocaron `backend/`, endpoints, logica de datos ni scripts backend
|
||||
- no se toco `ai/system-metrics.md`
|
||||
- commit aplicado: `Increase clan logo visual size`
|
||||
|
||||
## Change Budget
|
||||
|
||||
- Prefer fewer than 5 modified files.
|
||||
- Prefer changes under 200 lines when feasible.
|
||||
- Split the work into follow-up tasks if limits are exceeded.
|
||||
@@ -891,14 +891,14 @@ h2 {
|
||||
|
||||
.clan-card__brand {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(124px, 154px) minmax(0, 1fr);
|
||||
grid-template-columns: minmax(156px, 176px) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.clan-card__logo {
|
||||
min-height: 124px;
|
||||
padding: 14px;
|
||||
min-height: 160px;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px dashed rgba(183, 201, 125, 0.3);
|
||||
@@ -907,44 +907,48 @@ h2 {
|
||||
}
|
||||
|
||||
.clan-card__logo--standard {
|
||||
min-height: 128px;
|
||||
min-height: 164px;
|
||||
}
|
||||
|
||||
.clan-card__logo--wide {
|
||||
padding-inline: 10px;
|
||||
padding-inline: 8px;
|
||||
}
|
||||
|
||||
.clan-card__logo--shield {
|
||||
padding-inline: 20px;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
.clan-card--bxb .clan-card__brand {
|
||||
grid-template-columns: minmax(146px, 184px) minmax(0, 1fr);
|
||||
grid-template-columns: minmax(232px, 268px) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.clan-card__logo--bxb {
|
||||
min-height: 148px;
|
||||
padding: 12px;
|
||||
min-height: 204px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.clan-card__logo img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 108px;
|
||||
max-height: 144px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.clan-card__logo--wide img {
|
||||
max-height: 112px;
|
||||
max-height: 148px;
|
||||
}
|
||||
|
||||
.clan-card__logo--shield img {
|
||||
max-height: 116px;
|
||||
max-height: 152px;
|
||||
}
|
||||
|
||||
.clan-card__logo--bxb img {
|
||||
max-height: 132px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 196px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.clan-card__logo-placeholder {
|
||||
|
||||
Reference in New Issue
Block a user