From 1719e79723abcbe8891a67b4d447a068c41d9e57 Mon Sep 17 00:00:00 2001 From: dmolinari Date: Thu, 2 Oct 2025 13:38:28 -0300 Subject: [PATCH] Fix Styles --- .../legislativas/nacionales/PanelNacional.css | 56 ++++++------------- .../ResultadosNacionalesCardsWidget.css | 5 +- .../nacionales/components/MapaNacional.tsx | 2 +- Elecciones-Web/frontend/src/main.tsx | 2 + 4 files changed, 24 insertions(+), 41 deletions(-) diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.css index f1f9b76..46cfbc4 100644 --- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.css +++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.css @@ -6,17 +6,15 @@ border: 1px solid #e0e0e0; border-radius: 8px; position: relative; + padding: 10px; } .panel-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e0e0e0; position: relative; - /* Necesario para que z-index funcione */ z-index: 20; - /* Un número alto para ponerlo al frente */ background-color: white; - /* Asegura que no sea transparente */ } /* Contenedor para alinear título y selector */ @@ -34,10 +32,8 @@ /* El contenedor principal del selector (la parte visible antes de hacer clic) */ .categoria-selector__control { border-radius: 8px !important; - /* Coincide con el radio de los otros elementos */ border: 1px solid #e0e0e0 !important; box-shadow: none !important; - /* Quitamos la sombra por defecto */ transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } @@ -156,31 +152,26 @@ transition: all 0.5s ease-in-out; } -/* Columna del mapa */ .mapa-column { flex: 2; - /* Por defecto, ocupa 2/3 del espacio */ position: relative; transition: flex 0.5s ease-in-out; } -/* Columna de resultados */ .resultados-column { flex: 1; - /* Por defecto, ocupa 1/3 */ overflow-y: auto; - padding: 1.5rem; + padding: 1.25rem; /* ANTES: 1.5rem */ transition: all 0.5s ease-in-out; min-width: 320px; - /* Un ancho mínimo para que no se comprima demasiado */ } -/* --- NUEVO LAYOUT PARA TARJETAS DE PARTIDO --- */ +/* --- AJUSTES EN FILAS DE PARTIDOS --- */ .partido-fila { display: flex; align-items: center; - gap: 1rem; - padding: 1rem 0; + gap: 0.75rem; /* ANTES: 1rem */ + padding: 0.75rem 0; /* ANTES: 1rem 0 */ border-bottom: 1px solid #f0f0f0; border-left: 5px solid; border-radius: 12px; @@ -189,8 +180,8 @@ .partido-logo { flex-shrink: 0; - width: 75px; - height: 75px; + width: 65px; /* ANTES: 75px */ + height: 65px; /* ANTES: 75px */ } .partido-logo img { @@ -203,32 +194,24 @@ .partido-main-content { flex-grow: 1; display: grid; - /* CAMBIO: De flex a grid */ grid-template-columns: 1fr auto; - /* Columna 1 (nombre) flexible, Columna 2 (stats) se ajusta al contenido */ grid-template-rows: auto auto; - /* Dos filas: una para la info, otra para la barra */ align-items: center; - /* Alinea verticalmente el contenido de ambas filas */ - gap: 0.25rem 1rem; - /* Espacio entre filas y columnas (0.25rem vertical, 1rem horizontal) */ + gap: 0.25rem 0.75rem; /* ANTES: gap: 0.25rem 1rem */ } .partido-top-row { - /* Hacemos que este contenedor sea "invisible" para el grid, - promoviendo a sus hijos (info y stats) a la cuadrícula principal. */ display: contents; } .partido-info-wrapper { - /* Ocupa el espacio disponible a la izquierda */ min-width: 0; text-align: left; } .partido-nombre { font-weight: 700; - font-size: 1.05rem; + font-size: 1rem; /* ANTES: 1.05rem */ color: #212529; white-space: nowrap; overflow: hidden; @@ -237,7 +220,7 @@ } .candidato-nombre { - font-size: 0.8rem; + font-size: 0.75rem; /* ANTES: 0.8rem */ color: #6c757d; text-transform: uppercase; font-weight: 500; @@ -248,27 +231,25 @@ flex-shrink: 0; text-align: right; padding-left: 1rem; - /* Ya no necesita ser un contenedor flex, el grid lo posiciona */ } .partido-porcentaje { - font-size: 1.5rem; + font-size: 1.35rem; /* ANTES: 1.5rem */ font-weight: 700; display: block; } .partido-votos { - font-size: 1rem; + font-size: 0.9rem; /* ANTES: 1rem */ color: #666; display: block; } .partido-barra-background { - height: 20px; + height: 12px; /* ANTES: 20px */ background-color: #f0f0f0; border-radius: 4px; grid-column: 1 / 3; - /* Le indicamos que ocupe ambas columnas (de la línea 1 a la 3) */ } .partido-barra-foreground { @@ -277,24 +258,23 @@ transition: width 0.5s ease-in-out; } -/* ------------------------------------------- */ - +/* --- AJUSTES EN CÍRCULOS DE ESTADÍSTICAS --- */ .panel-estado-recuento { display: flex; justify-content: space-around; - padding-bottom: 1.5rem; - margin-bottom: 1.5rem; + padding-bottom: 1rem; /* ANTES: 1.5rem */ + margin-bottom: 1rem; /* ANTES: 1.5rem */ border-bottom: 1px solid #e0e0e0; } .estado-item { - width: 100px; + width: 95px; /* ANTES: 100px */ text-align: center; } .estado-item span { margin-top: 0.5rem; - font-size: 0.9rem; + font-size: 0.85rem; /* ANTES: 0.9rem */ color: #666; display: block; } diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.css index f6d3b4a..48a6a62 100644 --- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.css +++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.css @@ -4,7 +4,7 @@ :root { --card-border-color: #e0e0e0; --card-bg-color: #ffffff; - --card-header-bg-color: #f8f9fa; + --card-header-bg-color: #e6f1fd; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --text-primary: #212529; --text-secondary: #6c757d; @@ -77,7 +77,7 @@ flex-shrink: 0; border-radius: 4px; overflow: hidden; - background-color: #e9ecef; + background-color: #f7fbff; padding: 0.25rem; box-sizing: border-box; /* Para que el padding no aumente el tamaño total */ } @@ -86,6 +86,7 @@ .map-svg-container, .map-placeholder { width: 100%; height: 100%; + border-radius: 16px; } /* Estilo para el SVG renderizado */ diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx index 4d77e8f..a695354 100644 --- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx +++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx @@ -21,7 +21,7 @@ type PointTuple = [number, number]; const PROVINCE_VIEW_CONFIG: Record = { "BUENOS AIRES": { center: [-60.5, -37.3], zoom: 5 }, - "SANTA CRUZ": { center: [-69.5, -48.8], zoom: 5 }, + "SANTA CRUZ": { center: [-69.5, -49.3], zoom: 5 }, "CIUDAD AUTONOMA DE BUENOS AIRES": { center: [-58.45, -34.6], zoom: 85 }, "CHUBUT": { center: [-68.5, -44.5], zoom: 5.5 }, "SANTA FE": { center: [-61, -31.2], zoom: 6 }, diff --git a/Elecciones-Web/frontend/src/main.tsx b/Elecciones-Web/frontend/src/main.tsx index f281026..1a7e3ca 100644 --- a/Elecciones-Web/frontend/src/main.tsx +++ b/Elecciones-Web/frontend/src/main.tsx @@ -27,6 +27,7 @@ import { ResultadosRankingMunicipioWidget } from './features/legislativas/provin import { HomeCarouselWidget } from './features/legislativas/nacionales/HomeCarouselWidget'; import { PanelNacionalWidget } from './features/legislativas/nacionales/PanelNacionalWidget'; import { ResultadosNacionalesCardsWidget } from './features/legislativas/nacionales/ResultadosNacionalesCardsWidget'; +import { CongresoNacionalWidget } from './features/legislativas/nacionales/CongresoNacionalWidget'; import { DevAppLegislativas } from './features/legislativas/DevAppLegislativas'; @@ -58,6 +59,7 @@ const WIDGET_MAP: Record = { 'home-carousel': HomeCarouselWidget, 'panel-nacional': PanelNacionalWidget, 'resultados-nacionales-cards': ResultadosNacionalesCardsWidget, + 'composicion-congreso-nacional': CongresoNacionalWidget, }; // Vite establece `import.meta.env.DEV` a `true` cuando ejecutamos 'npm run dev'