feat(ui): Material icons in sidebar + stats overview on home
Two pieces of the mockup 2 layout that hadn't landed yet: 1. Sidebar nav icons — emoji glyphs (🧹 ✂️ 🔍 …) swapped for Streamlit's ``:material/<name>:`` syntax, picking the outline Material Symbol that best matches each mockup SVG: Home → :material/home: Fix Missing Values → :material/help_outline: Find Unusual Vals → :material/insights: Clean Text → :material/text_format: Standardize Fmts → :material/format_list_bulleted: Find Duplicates → :material/search: Quality Check → :material/check_circle: Map Columns → :material/view_column: Combine Files → :material/account_tree: Auto Workflows → :material/auto_awesome: Activate → :material/key: Close → :material/close: Streamlit injects the icon name as a literal ligature inside a first-child ``<span>`` of the nav anchor, expected to render through the Material Symbols font. theme.py's base rule was forcing Geist on every span under ``stSidebarNav``, turning the ligatures back into plain text labels — added a structural exception that targets ``[data-testid="stSidebarNavLink"] > span:first-child`` (and any descendant), restoring the Material font family, neutralizing the inherited ``ss01/cv01/cv11`` feature settings, and sizing to 18px. Also stripped the leading emojis from every page title in the en/es i18n packs (``home.title``, ``close_page.title``, ``activation.title``, ``tools.*.page_title``) — the icons live in the sidebar now, the page H1 no longer needs to carry one. 2. Stats overview on home — new ``_render_stats_overview`` in _home.py emits a 4-card grid above the per-file findings panels: Files analyzed, Total findings, Warnings (severity ``warn`` ∪ ``error``), Info (severity ``info``). Card layout follows the mockup §stats verbatim — Geist 28px / 600 / -0.03em for the numeric value (the "Display number" row in spec §4), tiny uppercase tracked label, paper-surface card with the standard warm border + faint shadow. The Warnings / Info cards tint the number with ``--warn`` / ``--info`` when the count is non-zero. CSS for ``.dt-stats / .dt-stat / .dt-stat-label / .dt-stat-value / .dt-stat-unit`` added to ``_DESIGN_TOKENS_CSS``; falls to a 2-column grid below 900px viewport, matching the mockup's media query. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
},
|
||||
"home": {
|
||||
"page_title": "DataTools — Maestría en limpieza de datos",
|
||||
"title": "🧹 DataTools — Maestría en limpieza de datos",
|
||||
"title": "DataTools — Maestría en limpieza de datos",
|
||||
"caption": "Conjunto de 9 herramientas para limpiar, estandarizar y validar datos tabulares. Se ejecuta 100% en local.",
|
||||
"findings_badge_one": "{n} hallazgo",
|
||||
"findings_badge_other": "{n} hallazgos"
|
||||
@@ -57,14 +57,14 @@
|
||||
},
|
||||
"close_page": {
|
||||
"page_title": "DataTools — Cerrar",
|
||||
"title": "🛑 Cerrar DataTools",
|
||||
"title": "Cerrar DataTools",
|
||||
"caption": "Detén la aplicación local y libera la terminal.",
|
||||
"body": "Al pulsar el botón de abajo se cerrará el servidor de DataTools. Cualquier trabajo sin guardar en otras herramientas se perderá. Una vez cerrada la app, puedes cerrar esta ventana.",
|
||||
"button": "Cerrar la app"
|
||||
},
|
||||
"activation": {
|
||||
"page_title": "DataTools — Activar",
|
||||
"title": "🔑 Activar DataTools",
|
||||
"title": "Activar DataTools",
|
||||
"intro": "DataTools debe activarse antes de desbloquear cualquier herramienta. Introduce el nombre y correo asociados a tu compra, y luego pega el código de licencia del correo de entrega.",
|
||||
"name_label": "Nombre completo",
|
||||
"name_help": "Debe coincidir con el nombre en el recibo de compra.",
|
||||
@@ -107,55 +107,55 @@
|
||||
"01_deduplicator": {
|
||||
"name": "Buscar duplicados",
|
||||
"description": "Coincidencia difusa, normalización, selección de superviviente y revisión interactiva.",
|
||||
"page_title": "🔍 Buscar duplicados",
|
||||
"page_title": "Buscar duplicados",
|
||||
"page_caption": "Encuentra y elimina filas duplicadas en archivos CSV, texto delimitado y Excel."
|
||||
},
|
||||
"02_text_cleaner": {
|
||||
"name": "Limpiar texto",
|
||||
"description": "Recorte de espacios, colapso de espacios múltiples, normalización Unicode, manejo de BOM y de finales de línea.",
|
||||
"page_title": "✂️ Limpiar texto",
|
||||
"page_title": "Limpiar texto",
|
||||
"page_caption": "Recorta espacios, normaliza comillas tipográficas, elimina caracteres invisibles y unifica saltos de línea. Se ejecuta localmente — tus datos nunca salen de este equipo."
|
||||
},
|
||||
"03_format_standardizer": {
|
||||
"name": "Estandarizar formatos",
|
||||
"description": "Estandariza fechas, monedas, nombres, números de teléfono y direcciones.",
|
||||
"page_title": "📐 Estandarizar formatos",
|
||||
"page_title": "Estandarizar formatos",
|
||||
"page_caption": "Canoniza fechas, números de teléfono, monedas, nombres, direcciones y booleanos columna por columna. Se ejecuta localmente — tus datos nunca salen de este equipo."
|
||||
},
|
||||
"04_missing_handler": {
|
||||
"name": "Corregir valores faltantes",
|
||||
"description": "Detecta nulos disfrazados, analiza la ausencia de datos y aplica estrategias de imputación.",
|
||||
"page_title": "🕳️ Corregir valores faltantes",
|
||||
"page_title": "Corregir valores faltantes",
|
||||
"page_caption": "Detecta nulos disfrazados, perfila la ausencia de datos y aplica imputación o estrategias de descarte. Se ejecuta localmente — tus datos nunca salen de este equipo."
|
||||
},
|
||||
"05_column_mapper": {
|
||||
"name": "Mapear columnas",
|
||||
"description": "Renombra columnas, aplica un esquema objetivo y fuerza tipos de datos.",
|
||||
"page_title": "🗂️ Mapear columnas",
|
||||
"page_title": "Mapear columnas",
|
||||
"page_caption": "Renombra columnas, aplica un esquema objetivo y fuerza tipos. Se ejecuta localmente — tus datos nunca salen de este equipo."
|
||||
},
|
||||
"06_outlier_detector": {
|
||||
"name": "Detectar valores atípicos",
|
||||
"description": "Detección por Z-score, IQR y MAD con reglas de dominio y winsorización.",
|
||||
"page_title": "📊 Detectar valores atípicos",
|
||||
"page_title": "Detectar valores atípicos",
|
||||
"page_caption": "Detecta y trata valores atípicos en columnas numéricas."
|
||||
},
|
||||
"07_multi_file_merger": {
|
||||
"name": "Combinar archivos",
|
||||
"description": "Combina varios archivos CSV/Excel alineando sus esquemas.",
|
||||
"page_title": "📎 Combinar archivos",
|
||||
"page_title": "Combinar archivos",
|
||||
"page_caption": "Combina varios archivos CSV y Excel en un único conjunto de datos."
|
||||
},
|
||||
"08_validator_reporter": {
|
||||
"name": "Verificación de calidad",
|
||||
"description": "Valida contra reglas y genera informes de calidad en PDF/Excel.",
|
||||
"page_title": "✅ Verificación de calidad",
|
||||
"page_title": "Verificación de calidad",
|
||||
"page_caption": "Valida datos contra reglas y genera informes de calidad."
|
||||
},
|
||||
"09_pipeline_runner": {
|
||||
"name": "Flujos automatizados",
|
||||
"description": "Encadena herramientas en el orden recomendado y pasa la salida entre pasos.",
|
||||
"page_title": "⚙️ Flujos automatizados",
|
||||
"page_title": "Flujos automatizados",
|
||||
"page_caption": "Encadena pasos de limpieza de DataTools en un flujo repetible. La canalización recomienda un orden; tú mantienes el control."
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user