@sailingrotevista/rotevista-dash 2.0.3 → 2.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 (3) hide show
  1. package/index.html +5 -5
  2. package/package.json +1 -1
  3. package/style.css +49 -30
package/index.html CHANGED
@@ -40,13 +40,13 @@
40
40
 
41
41
  <!-- HEADING MEAN -->
42
42
  <div class="data-box">
43
- <div class="label-row"><span class="label">HEADING MEAN</span></div>
43
+ <div class="label-row"><span class="label">HEADING (MEAN)</span></div>
44
44
  <span class="value value-large" id="hdg">000&deg;</span>
45
45
  </div>
46
46
 
47
47
  <!-- COG MEAN -->
48
48
  <div class="data-box">
49
- <div class="label-row"><span class="label">COG MEAN</span></div>
49
+ <div class="label-row"><span class="label">COG (MEAN)</span></div>
50
50
  <span class="value value-large" id="cog">000&deg;</span>
51
51
  </div>
52
52
 
@@ -136,19 +136,19 @@
136
136
 
137
137
  <!-- TWA MEAN -->
138
138
  <div class="data-box">
139
- <div class="label-row"><span class="label">TWA MEAN</span></div>
139
+ <div class="label-row"><span class="label">TWA (MEAN)</span></div>
140
140
  <span class="value value-large" id="twa-avg">---&deg;</span>
141
141
  </div>
142
142
 
143
143
  <!-- AWA MEAN -->
144
144
  <div class="data-box">
145
- <div class="label-row"><span class="label">AWA MEAN</span></div>
145
+ <div class="label-row"><span class="label">AWA (MEAN)</span></div>
146
146
  <span class="value value-large" id="awa-avg">---&deg;</span>
147
147
  </div>
148
148
 
149
149
  <!-- TWD MEAN con Bussola -->
150
150
  <div class="data-box">
151
- <div class="label-row"><span class="label">TWD MEAN</span></div>
151
+ <div class="label-row"><span class="label">TWD (MEAN)</span></div>
152
152
  <div class="value-with-compass">
153
153
  <svg class="mini-compass" viewBox="0 0 40 40">
154
154
  <circle cx="20" cy="20" r="19" fill="#151515" stroke="#444" stroke-width="1.5"/>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sailingrotevista/rotevista-dash",
3
- "version": "2.0.3",
3
+ "version": "2.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
@@ -20,7 +20,7 @@ body {
20
20
  width: 100%; height: 100%;
21
21
  padding: 5px; box-sizing: border-box;
22
22
  gap: 8px;
23
- grid-template-columns: 1.7fr 3fr 1.7fr; /* Rapporto scelto dall'utente */
23
+ grid-template-columns: 1.7fr 3fr 1.7fr;
24
24
  grid-template-rows: 100%;
25
25
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
26
26
  }
@@ -43,7 +43,6 @@ body {
43
43
  container-type: size;
44
44
  flex: 1;
45
45
  overflow: hidden;
46
- /* Impedisce ogni azione nativa del browser sul tocco */
47
46
  -webkit-touch-callout: none;
48
47
  -webkit-user-select: none;
49
48
  user-select: none;
@@ -54,8 +53,12 @@ body {
54
53
  .data-box:nth-child(1), .data-box:nth-child(2) { height: 25vh; }
55
54
  .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 16.666vh; }
56
55
 
56
+ /* Allineamento Speculare Data Box */
57
+ .left-panel .data-box { align-items: flex-start; text-align: left; }
58
+ .right-panel .data-box { align-items: flex-end; text-align: right; }
59
+
57
60
  /* ==========================================================================
58
- 3. TACTICAL FOCUS MODE (ORIZZONTALE)
61
+ 3. TACTICAL FOCUS MODE (ORIZZONTALE) E INGRANDIMENTI
59
62
  ========================================================================== */
60
63
  .focus-active { grid-template-columns: 1fr 1fr !important; }
61
64
  .focus-active .side-panel:not(.has-focus) { display: none !important; }
@@ -67,17 +70,35 @@ body {
67
70
  .focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
68
71
 
69
72
  .focus-active .has-focus .data-box:not(.is-focused) { display: none !important; }
70
- .focus-active .has-focus .data-box.is-focused { height: 100vh !important; border: none; background: rgba(255, 255, 255, 0.05); }
73
+ .focus-active .has-focus .data-box.is-focused { height: 100vh !important; border: none; background: rgba(255, 255, 255, 0.05); padding: 20px; }
74
+
75
+ /* Ingrandimenti in Focus Mode */
76
+ .focus-active .is-focused .value { font-size: clamp(4rem, 25cqh, 10rem) !important; margin-top: 15px; }
77
+ .focus-active .is-focused .scale-labels { font-size: 24px !important; min-width: 60px !important; line-height: 1.2; }
78
+ .focus-active .is-focused .label-row .label { font-size: 1.5rem !important; }
79
+ .focus-active .is-focused .label-row .unit { font-size: 1.5rem !important; }
80
+
81
+ /* Ingrandimento scritta Hercules */
82
+ .focus-active .is-focused.box-hercules .unit::before,
83
+ .focus-active .is-focused.box-hercules .unit::after,
84
+ .focus-active .is-focused.box-hercules .label::before,
85
+ .focus-active .is-focused.box-hercules .label::after {
86
+ font-size: 14px !important;
87
+ letter-spacing: 2px;
88
+ }
71
89
 
72
- /* Tipografia e Grafica in Focus */
73
- .focus-active .is-focused .value { font-size: clamp(3rem, 18cqh, 8rem) !important; margin-top: 10px; }
74
- .focus-active .is-focused .scale-labels { font-size: 22px !important; min-width: 40px !important; }
75
90
  .focus-active .is-focused .sparkline path { stroke-width: 0.8px !important; }
76
91
 
77
92
  /* ==========================================================================
78
- 4. TIPOGRAFIA DINAMICA (CQH)
93
+ 4. TIPOGRAFIA DINAMICA E SIMMETRIA
79
94
  ========================================================================== */
80
95
  .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
96
+
97
+ /* Simmetria Titoli/Unità */
98
+ .left-panel .label-row { justify-content: space-between; }
99
+ .right-panel .label-row { justify-content: space-between; flex-direction: row; }
100
+ .right-panel .label-row .label:only-child { margin-left: auto; }
101
+
81
102
  .label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
82
103
  .unit { color: #888; font-size: 0.6rem; font-weight: bold; }
83
104
  .value { color: #fff; font-size: clamp(1.2rem, 22cqh, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -1px; padding-bottom: 5px; }
@@ -112,12 +133,23 @@ body {
112
133
  #depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
113
134
  #tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.12); }
114
135
 
136
+ /* ==========================================================================
137
+ 6. HERCULES MODE (LABEL TOP E SIMMETRIA)
138
+ ========================================================================== */
115
139
  .line-hercules { filter: drop-shadow(0 0 5px #ff0000); stroke-width: 1.8px !important; }
116
140
  .box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
117
- .box-hercules::after { content: "HERCULES"; position: absolute; bottom: 4px; right: 35px; font-size: 7px; color: #ff4444; font-weight: 900; opacity: 0.8; }
141
+
142
+ /* Simmetria Scritta Hercules */
143
+ .box-hercules .unit::before, .box-hercules .unit::after,
144
+ .box-hercules .label::before, .box-hercules .label::after {
145
+ font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
146
+ }
147
+ .left-panel .box-hercules .unit::before { content: "HERCULES "; }
148
+ .right-panel .box-hercules .unit::after { content: " HERCULES"; }
149
+ .right-panel .box-hercules .label:only-child::before { content: "HERCULES "; }
118
150
 
119
151
  /* ==========================================================================
120
- 6. STATI E ANIMAZIONI
152
+ 7. STATI E ANIMAZIONI
121
153
  ========================================================================== */
122
154
  #status { position: absolute; top: 5px; right: 15px; font-size: 0.5rem; text-transform: uppercase; z-index: 1000; }
123
155
  .online { color: #2ecc71; opacity: 0.5; }
@@ -131,7 +163,7 @@ body {
131
163
  #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
132
164
 
133
165
  /* ==========================================================================
134
- 7. RESPONSIVE (PORTRAIT) - FIX DEFINITIVO 2x2 E FOCUS
166
+ 8. RESPONSIVE (PORTRAIT)
135
167
  ========================================================================== */
136
168
  @media (max-aspect-ratio: 0.9 / 1) {
137
169
  .main-container {
@@ -139,29 +171,16 @@ body {
139
171
  grid-template-rows: 45vh 55vh !important;
140
172
  }
141
173
 
142
- /* Ordine Standard Portrait: Vento (1), SX (2), DX (3) */
143
- .center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; }
174
+ .center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; padding: 5px 0; }
144
175
  .left-panel { grid-row: 2 !important; grid-column: 1 !important; }
145
176
  .right-panel { grid-row: 2 !important; grid-column: 2 !important; }
146
177
 
147
- /* FOCUS MODE IN VERTICALE: Abbandoniamo la Grid, usiamo Flex per sicurezza */
148
- .main-container.focus-active {
149
- display: flex !important;
150
- flex-direction: column !important;
151
- }
152
- .focus-active .center-panel {
153
- flex: 0 0 45vh !important;
154
- width: 100% !important;
155
- }
156
- .focus-active .side-panel.has-focus {
157
- flex: 0 0 55vh !important;
158
- width: 100% !important;
159
- display: flex !important;
160
- }
178
+ .main-container.focus-active { display: flex !important; flex-direction: column !important; }
179
+ .focus-active .center-panel { flex: 0 0 45vh !important; width: 100% !important; }
180
+ .focus-active .side-panel.has-focus { flex: 0 0 55vh !important; width: 100% !important; display: flex !important; }
161
181
 
162
- /* Calibrazione altezze box per Portrait */
163
182
  .data-box:nth-child(1), .data-box:nth-child(2) { height: 13.5vh; }
164
183
  .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 9.3vh; }
165
-
166
- .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); }
184
+ .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); margin: auto 0; }
185
+ .value.dual-val { font-size: clamp(0.9rem, 30cqh, 1.4rem); }
167
186
  }