@jjlmoya/utils-chrono 1.22.0 → 1.24.0

package/src/tool/telemeter-calculator/telemeter-calculator.css

@@ -56,13 +56,13 @@
 
 .tel-grid {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   gap: 1.5rem;
 }
 
 @media (min-width: 768px) {
   .tel-grid {
-    grid-template-columns: 1.2fr 1fr;
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
   }
 }
 
@@ -77,6 +77,8 @@
   padding: 2rem 1rem;
   position: relative;
   min-height: 380px;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .tel-lightning-overlay {
@@ -108,8 +110,9 @@
 
 .tel-watch-container {
   position: relative;
-  width: 290px;
-  height: 290px;
+  width: min(290px, 100%);
+  aspect-ratio: 1;
+  height: auto;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -169,8 +172,8 @@
 }
 
 .tel-svg-dial {
-  width: 270px;
-  height: 270px;
+  width: min(270px, 100%);
+  height: auto;
   border-radius: 50%;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
   z-index: 1;
@@ -309,6 +312,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
+  min-width: 0;
 }
 
 .tel-trigger-dashboard {
@@ -601,6 +605,8 @@
   letter-spacing: -0.04em;
   font-variant-numeric: tabular-nums;
   line-height: 1;
+  overflow-wrap: anywhere;
+  text-align: center;
 }
 
 .tel-results-subval {
@@ -615,6 +621,7 @@
   display: flex;
   justify-content: space-around;
   padding-top: 0.75rem;
+  gap: 0.75rem;
 }
 
 .tel-detail-item {
@@ -680,6 +687,7 @@
   font-size: 0.75rem;
   font-variant-numeric: tabular-nums;
   animation: slide-in-history 0.25s ease-out;
+  gap: 0.5rem;
 }
 
 @keyframes slide-in-history {
@@ -854,3 +862,40 @@
   fill: var(--text-base);
   opacity: 0.65;
 }
+
+@media (max-width: 520px) {
+  .tel-card {
+    padding: 1rem;
+    border-radius: 0.875rem;
+    max-width: 100%;
+  }
+
+  .tel-visualizer-section {
+    min-height: 0;
+    padding: 1rem 0.25rem;
+  }
+
+  .tel-trigger-dashboard {
+    grid-template-columns: 1fr;
+  }
+
+  .tel-slider-wrapper,
+  .tel-results-details,
+  .tel-history-item {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .tel-speed-badge {
+    align-self: stretch;
+    text-align: center;
+  }
+
+  .tel-results-val {
+    font-size: 2rem;
+  }
+
+  .tel-detail-item {
+    align-items: flex-start;
+  }
+}

package/src/tool/watch-savings-planner/i18n/es.ts

@@ -80,7 +80,7 @@ export const content: ToolLocaleContent<WatchSavingsPlannerUI> = {
     },
     {
       name: 'Celebra',
-      text: '¡Cuando el anillo llegue al 100 %, habrás alcanzado tu meta. Es hora de comprar ese reloj!',
+      text: '¡Cuando el anillo llegue al 100 %, habrás alcanzado tu meta. ¡Es hora de comprar ese reloj!',
     },
   ],
   schemas: [
@@ -145,7 +145,7 @@ export const content: ToolLocaleContent<WatchSavingsPlannerUI> = {
         {
           '@type': 'HowToStep',
           'name': 'Celebra',
-          'text': '¡Cuando el anillo llegue al 100 %, habrás alcanzado tu meta. Es hora de comprar ese reloj!',
+          'text': '¡Cuando el anillo llegue al 100 %, habrás alcanzado tu meta. ¡Es hora de comprar ese reloj!',
         },
       ],
     },

package/src/tool/watch-savings-planner/i18n/pl.ts

@@ -5,7 +5,7 @@ import { bibliography } from '../bibliography';
 export const content: ToolLocaleContent<WatchSavingsPlannerUI> = {
   slug: 'plan-oszczedzania-na-zegarek',
   title: 'Planer Oszczedzania na Zegarek',
-  description: 'Ustawiaj i sledz cele oszczednosciowe na zakup nastepnego zegarka. Wizualizuj postepy, obliczaj harmonogramy i pozostan zmotywowany.',
+  description: 'Ustawiaj i śledź cele oszczędnościowe na zakup następnego zegarka. Wizualizuj postępy, obliczaj harmonogramy i pozostań zmotywowany.',
   ui: {
     title: 'Ustawienia Celu Oszczednosciowego',
     addGoalTitle: 'Nowy Cel Oszczednosciowy',

package/src/tool/wrist-presence-calculator/client.ts

@@ -8,7 +8,7 @@ import {
 import { drawFitVisualizer } from './helpers/canvas';
 import { getRatioText, getCoverageText, getVerdictHtml, formatWristValue, formatRecValue } from './helpers/results';
 
-const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const mainEl = document.querySelector('.wrist-presence-card') as HTMLElement;
 const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
 
 const wristCircSlider = document.getElementById('wrist-circumference') as HTMLInputElement;

package/src/tool/wrist-presence-calculator/component.astro

@@ -10,9 +10,9 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
-  <div class="wrist-calculator-layout">
-    <div class="calc-panel">
+<div class="wrist-presence-card" data-ui={JSON.stringify(ui)}>
+  <div class="wrist-presence-layout">
+    <div class="wrist-presence-calc-panel">
       <CalculatorInputs labels={ui} />
       <Visualizer labels={ui} />
     </div>

package/src/tool/wrist-presence-calculator/wrist-presence-calculator.css

@@ -1,4 +1,4 @@
-.tool-main-card {
+.wrist-presence-card {
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: 1rem;
@@ -32,7 +32,7 @@
   --color-fit-vintage-border: rgba(245, 158, 11, 0.25);
 }
 
-.theme-light .tool-main-card {
+.theme-light .wrist-presence-card {
   --visualizer-wrist-fill: rgba(0, 0, 0, 0.04);
   --visualizer-wrist-stroke: rgba(0, 0, 0, 0.12);
   --visualizer-outer-circle: rgba(0, 0, 0, 0.02);
@@ -56,20 +56,20 @@
   --color-fit-vintage-border: rgba(245, 158, 11, 0.2);
 }
 
-.wrist-calculator-layout {
+.wrist-presence-layout {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 2.5rem;
 }
 
 @media (max-width: 992px) {
-  .wrist-calculator-layout {
+  .wrist-presence-layout {
     grid-template-columns: 1fr;
     gap: 2rem;
   }
 }
 
-.calc-panel {
+.wrist-presence-calc-panel {
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -110,11 +110,11 @@
   color: var(--text-base);
 }
 
-.input-group {
+.wrist-presence-card .input-group {
   margin-bottom: 1.25rem;
 }
 
-.input-group:last-child {
+.wrist-presence-card .input-group:last-child {
   margin-bottom: 0;
 }
 
@@ -210,7 +210,7 @@
   color: var(--color-white);
 }
 
-.canvas-wrapper {
+.wrist-presence-card .canvas-wrapper {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
@@ -370,3 +370,25 @@
   font-weight: 600;
   color: var(--text-base);
 }
+
+@media (max-width: 520px) {
+  .wrist-presence-card {
+    padding: 1rem;
+    border-radius: 0.875rem;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .wrist-presence-card .section-header {
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .wrist-presence-card .canvas-wrapper {
+    aspect-ratio: 4 / 3;
+  }
+
+  .wrist-presence-card .recommendations-table {
+    min-width: 360px;
+  }
+}