@sailingrotevista/rotevista-dash 3.0.2 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/style.css +109 -50
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sailingrotevista/rotevista-dash",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "description": "Public Wind Dashboard with navigation and course aids",
5
5
  "main": "index.js",
6
6
  "publishConfig": {
package/style.css CHANGED
@@ -81,32 +81,82 @@ body {
81
81
  }
82
82
 
83
83
  /* ==========================================================================
84
- 4. TIPOGRAFIA GERARCHICA (REGOLE BASE)
84
+ 4. TIPOGRAFIA GERARCHICA (REGOLE BASE + PROTEZIONE SCHERMI BASSI)
85
85
  ========================================================================== */
86
- .value { color: #000; font-size: clamp(1.2rem, 32cqw, 3.5rem); font-weight: 600; line-height: 0.9; letter-spacing: -1.5px; }
87
86
 
88
- /* Valore MASSIVO (Dati reali): 55% altezza box, larghezza protetta a 22% schermo */
87
+ /* --- VALORI STANDARD (STW, SOG, DEPTH, TWS) --- */
88
+ .value {
89
+ color: #000;
90
+ /* Default Tablet: Usiamo cqw per la larghezza ma controlliamo l'altezza con cqh */
91
+ font-size: clamp(1.2rem, 25cqh, 32cqw);
92
+ font-weight: 600; line-height: 0.85; letter-spacing: -1.5px;
93
+ margin-top: auto; margin-bottom: 2px;
94
+ }
95
+
96
+ /* PROTEZIONE IPHONE LANDSCAPE: Se lo schermo è basso (<450px), riduciamo l'altezza del font */
97
+ @media screen and (max-height: 450px) {
98
+ .value { font-size: clamp(1.1rem, 18cqh, 28cqw) !important; }
99
+ }
100
+
101
+ /* PROTEZIONE SMART: Se il box è stretto (Split View), riduciamo leggermente */
102
+ @container (max-width: 300px) {
103
+ .value { font-size: clamp(1.1rem, 24cqw, 2.8rem) !important; letter-spacing: -1px; }
104
+ }
105
+
106
+ /* --- VALORI MEDIATI (HEADING, COG, TWA, AWA) --- */
89
107
  .value-large {
90
- font-size: clamp(1.5rem, 55cqh, 22cqw) !important;
91
- font-weight: 600; line-height: 0.8; margin: 0 !important;
108
+ font-weight: 600; line-height: 1; margin: auto 0;
109
+ /* Default Tablet: 55% dell'altezza del box */
110
+ font-size: clamp(1.5rem, 55cqh, 25cqw) !important;
111
+ }
112
+
113
+ /* PROTEZIONE IPHONE LANDSCAPE: Se lo schermo è basso, abbassiamo al 40% */
114
+ @media screen and (max-height: 450px) {
115
+ .value-large { font-size: clamp(1.4rem, 40cqh, 22cqw) !important; }
116
+ }
117
+
118
+ @container (max-width: 300px) {
119
+ .value-large { font-size: clamp(1.4rem, 45cqh, 25cqw) !important; }
120
+ }
121
+
122
+ /* --- BOX TWD (Bussola Meteo) --- */
123
+ .value-with-compass {
124
+ display: flex; flex-direction: row; justify-content: space-between;
125
+ align-items: center; width: 100%; height: 85%;
126
+ }
127
+
128
+ .box-twd .mini-compass {
129
+ height: 85cqh !important; width: auto !important; aspect-ratio: 1/1; flex-shrink: 0;
92
130
  }
93
131
 
94
- /* BOX TWD: Bussola a SX, Valore a DX, centrati verticalmente */
95
- .value-with-compass { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 85%; }
96
- .box-twd .mini-compass { height: 85cqh !important; width: auto !important; aspect-ratio: 1/1; flex-shrink: 0; }
97
- .box-twd #twd-avg { font-size: clamp(1.5rem, 55cqh, 20cqw) !important; text-align: right; line-height: 1; }
132
+ /* PROTEZIONE IPHONE LANDSCAPE: Rimpiccioliamo la bussola se il box è basso */
133
+ @media screen and (max-height: 450px) {
134
+ .box-twd .mini-compass { height: 65cqh !important; }
135
+ .box-twd #twd-avg { font-size: clamp(1.4rem, 45cqh, 22cqw) !important; }
136
+ }
98
137
 
99
- /* BOX TACK: HDG a SX, COG a DX, Titoli sopra (Default Landscape/Portrait) */
138
+ /* --- BOX TACK (Mure Opposte) --- */
100
139
  .box-tack .dual-value-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
101
140
  .box-tack .dual-value-col { display: flex; flex-direction: column; justify-content: center; }
102
141
  .box-tack .dual-value-col:first-child { align-items: flex-start; }
103
142
  .box-tack .dual-value-col:last-child { align-items: flex-end; }
104
143
  .box-tack .dual-label { color: #888; font-size: 0.5rem; font-weight: 800; margin-bottom: -2px; }
105
- .box-tack .value.dual-val { font-size: clamp(1rem, 35cqh, 12cqw) !important; line-height: 0.9; }
106
144
 
107
- /* Tag HERCULES: Allineato all'unità (lato interno schermo) */
145
+ .box-tack .value.dual-val {
146
+ font-size: clamp(1rem, 35cqh, 12cqw) !important; line-height: 0.9;
147
+ }
148
+
149
+ /* PROTEZIONE IPHONE LANDSCAPE: TACK ancora più sottile */
150
+ @media screen and (max-height: 450px) {
151
+ .box-tack .value.dual-val { font-size: clamp(0.9rem, 28cqh, 10cqw) !important; }
152
+ }
153
+
154
+ /* --- TAG HERCULES --- */
108
155
  .box-hercules { background: rgba(255, 0, 0, 0.05) !important; }
109
- .box-hercules .unit::before { font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; content: "HERCULES "; }
156
+ .box-hercules .unit::before {
157
+ font-size: 7px; color: #ff4444; font-weight: 900;
158
+ letter-spacing: 1px; text-transform: uppercase; content: "HERCULES ";
159
+ }
110
160
 
111
161
  /* ==========================================================================
112
162
  5. TACTICAL FOCUS MODE
@@ -278,61 +328,70 @@ body {
278
328
  }
279
329
 
280
330
  /* ==========================================================================
281
- 8. RESPONSIVE (PORTRAIT MODE)
331
+ 8. RESPONSIVE (PORTRAIT MODE - Rapporto < 0.85)
282
332
  ========================================================================== */
283
333
  @media screen and (max-aspect-ratio: 0.85/1) {
284
334
  .main-container {
285
- grid-template-areas:
286
- "gauge gauge"
287
- "stw depth"
288
- "sog tws"
289
- "hdg twa"
290
- "cog awa"
291
- "tack twd" !important;
335
+ grid-template-areas: "gauge gauge" "stw depth" "sog tws" "hdg twa" "cog awa" "tack twd" !important;
292
336
  grid-template-columns: 1fr 1fr !important;
293
337
  grid-template-rows: 40vh 1.75fr 1.75fr 0.75fr 0.75fr 1.25fr !important;
294
338
  }
295
339
 
296
- /* Impedisce ai box di collassare in altezza in verticale */
297
340
  .data-box { height: auto !important; }
298
341
 
299
- /* --- FOCUS MODE IN VERTICALE (STACKED) --- */
300
- /* Quando siamo in verticale e attiviamo il focus, impiliamo Sopra/Sotto */
301
- .main-container.focus-active {
302
- grid-template-columns: 1fr !important; /* Colonna singola */
303
- grid-template-rows: 65vh 35vh !important; /* 65% Altezza al dato, 35% alla bussola */
304
- grid-template-areas:
305
- "focused"
306
- "gauge" !important;
342
+ /* --- OTTIMIZZAZIONE COMPATTA PER I BOX CON GRAFICO --- */
343
+ .box-stw, .box-sog, .box-depth, .box-tws {
344
+ justify-content: flex-start !important;
345
+ /* Ridotto lo spazio superiore per avvicinare il valore al titolo */
346
+ padding-top: 1.2rem !important;
307
347
  }
308
348
 
309
- /* Correzione dimensioni box in Focus Verticale */
310
- .focus-active .is-focused {
311
- height: 65vh !important;
312
- width: 100vw !important;
313
- padding: 5vh 5vw !important; /* Più respiro per display curvi */
349
+ /* --- OTTIMIZZAZIONE FONT VALORI CON GRAFICO IN VERTICALE --- */
350
+ .box-stw .value,
351
+ .box-sog .value,
352
+ .box-depth .value,
353
+ .box-tws .value {
354
+ /* Aumentato a 30cqh per pareggiare il peso visivo di HEADING */
355
+ /* Alzato anche il limite cqw a 35 per permettere al numero di allargarsi */
356
+ font-size: clamp(1.2rem, 30cqh, 35cqw) !important;
357
+ line-height: 0.8 !important;
358
+ margin-top: -4px !important; /* Saliamo ancora un briciolo verso il titolo */
359
+ margin-bottom: 4px !important;
360
+ padding-bottom: 0 !important;
361
+ font-weight: 700; /* Leggermente più marcato */
314
362
  }
315
363
 
316
- /* Correzione Bussola in Focus Verticale */
317
- .focus-active .box-gauge {
318
- height: 35vh !important;
319
- width: 100vw !important;
320
- display: flex !important;
321
- align-items: center;
322
- justify-content: center;
364
+ /* Espansione del grafico per occupare tutto il resto del box */
365
+ .box-stw .graph-wrapper,
366
+ .box-sog .graph-wrapper,
367
+ .box-depth .graph-wrapper,
368
+ .box-tws .graph-wrapper {
369
+ margin-top: 0 !important;
370
+ flex-grow: 1 !important;
323
371
  }
324
372
 
325
- /* Ridimensionamento font per Focus Verticale (per non sbordare) */
326
- .focus-active .is-focused .value {
327
- font-size: clamp(4rem, 20cqh, 12rem) !important;
373
+ /* --- ALTRI BOX (HEADING, COG, ecc.) RESTANO CENTRATI --- */
374
+ .box-hdg, .box-cog, .box-twa, .box-awa, .box-twd, .box-tack {
375
+ justify-content: center !important;
376
+ padding-top: 1.2rem !important;
328
377
  }
329
378
 
330
- /* In verticale il box TACK è largo: forziamo i due valori ai bordi */
331
- .box-tack .dual-value-container {
332
- flex-direction: row !important;
333
- justify-content: space-between !important;
334
- align-items: center !important;
379
+ /* --- FOCUS MODE IN VERTICALE --- */
380
+ .main-container.focus-active {
381
+ grid-template-columns: 1fr !important;
382
+ grid-template-rows: 65vh 35vh !important;
383
+ grid-template-areas: "focused" "gauge" !important;
335
384
  }
385
+ .focus-active .is-focused { height: 65vh !important; width: 100vw !important; padding: 5vh 5vw !important; justify-content: center !important; }
386
+ .focus-active .is-focused .value { font-size: clamp(4rem, 20cqh, 15rem) !important; margin-top: 20px !important; }
387
+ .focus-active .box-gauge { height: 35vh !important; width: 100vw !important; display: flex !important; align-items: center; justify-content: center; }
388
+
389
+ /* --- TACK IN VERTICALE --- */
390
+ .box-tack .dual-value-container { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
391
+ .box-tack .dual-value-col { display: flex !important; flex-direction: column !important; justify-content: center; }
392
+ .box-tack .dual-value-col:first-child { align-items: flex-start !important; text-align: left !important; }
393
+ .box-tack .dual-value-col:last-child { align-items: flex-end !important; text-align: right !important; }
394
+ .box-tack .value.dual-val { font-size: clamp(1rem, 38cqh, 15cqw) !important; }
336
395
  }
337
396
 
338
397
  /* ==========================================================================