4sp-dv 1.0.28 → 1.0.30

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.
@@ -6,7 +6,7 @@
6
6
  <title>4SP - VERSION 5 CLIENT</title>
7
7
  <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo.png">
8
8
 
9
- <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.28/logged-in/">
9
+ <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.29/logged-in/">
10
10
  <script src="https://cdn.tailwindcss.com"></script>
11
11
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
12
12
 
@@ -778,7 +778,7 @@
778
778
  const displayUsername = document.getElementById('display-username');
779
779
  const displayEmail = document.getElementById('display-email');
780
780
 
781
- const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.28/logged-in/';
781
+ const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.29/logged-in/';
782
782
 
783
783
  // Preload Logos
784
784
  const preloadImgs = [
@@ -70,11 +70,12 @@
70
70
  display: flex;
71
71
  align-items: center;
72
72
  justify-content: center;
73
- gap: 3.5rem;
73
+ /* gap: 3.5rem; REMOVED: Using margins on divider for better hiding animation */
74
74
 
75
75
  /* Enable absolute positioning for spinner */
76
76
  position: relative;
77
- min-height: 200px; /* Ensure height stability */
77
+ height: 220px; /* Forced fixed height for stability */
78
+ overflow: hidden;
78
79
  }
79
80
 
80
81
  .dashboard-widget:hover {
@@ -126,7 +127,8 @@
126
127
  width: 1px;
127
128
  height: 100px;
128
129
  background-color: #262626;
129
- transition: opacity 0.5s ease, width 0.5s ease;
130
+ margin: 0 3.5rem; /* Replaces widget gap */
131
+ transition: opacity 0.5s ease, width 0.5s ease, margin 0.5s ease;
130
132
  }
131
133
  .vertical-divider.hidden-anim {
132
134
  opacity: 0;
@@ -141,21 +143,26 @@
141
143
  flex-direction: column;
142
144
  justify-content: center;
143
145
  gap: 0.5rem;
144
- transition: opacity 0.5s ease, transform 0.5s ease;
146
+ transition: opacity 0.5s ease, transform 0.5s ease, width 0.5s ease, margin 0.5s ease, height 0.5s ease;
145
147
  opacity: 1;
146
148
  transform: translateY(0);
149
+ overflow: visible;
147
150
  }
148
151
  .weather-section.hidden-anim {
149
152
  opacity: 0;
153
+ width: 0;
154
+ height: 0;
155
+ margin: 0;
150
156
  transform: translateY(10px);
151
157
  pointer-events: none;
152
- position: absolute; /* Take out of flow when hidden */
158
+ overflow: hidden;
153
159
  }
154
160
 
155
161
  .weather-main {
156
162
  display: flex;
157
163
  align-items: center;
158
164
  gap: 1.2rem;
165
+ min-width: 150px; /* Keep width during animation if possible */
159
166
  }
160
167
 
161
168
  .weather-icon {
@@ -231,34 +238,35 @@
231
238
 
232
239
  /* Retry Button */
233
240
  #retry-weather-btn {
234
- position: fixed;
235
- bottom: 2rem;
236
- right: 2rem;
237
- width: 40px;
238
- height: 40px;
239
- border-radius: 14px;
240
- border: 1px solid #4b5563;
241
- background: transparent;
242
- color: #d1d5db;
243
- display: flex;
244
- align-items: center;
245
- justify-content: center;
246
- cursor: pointer;
247
- z-index: 100;
248
- opacity: 0;
249
- pointer-events: none;
250
- transition: opacity 0.5s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
251
- transform: scale(0.8) translateY(20px);
241
+ position: fixed !important;
242
+ bottom: 2rem !important;
243
+ right: 2rem !important;
244
+ width: 40px !important;
245
+ height: 40px !important;
246
+ border-radius: 14px !important;
247
+ border: 1px solid #4b5563 !important;
248
+ background-color: #040404 !important;
249
+ color: #d1d5db !important;
250
+ display: flex !important;
251
+ align-items: center !important;
252
+ justify-content: center !important;
253
+ cursor: pointer !important;
254
+ z-index: 99999 !important;
255
+ opacity: 0 !important;
256
+ pointer-events: none !important;
257
+ transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, border-color 0.2s !important;
258
+ transform: scale(0.8) !important;
252
259
  }
253
260
  #retry-weather-btn:hover {
254
- background-color: #374151;
255
- color: white;
256
- transform: scale(1.1) translateY(0);
261
+ background-color: #374151 !important;
262
+ border-color: #ffffff !important;
263
+ color: white !important;
264
+ transform: scale(1.1) !important;
257
265
  }
258
266
  #retry-weather-btn.visible {
259
- opacity: 1;
260
- pointer-events: auto;
261
- transform: scale(1) translateY(0);
267
+ opacity: 1 !important;
268
+ pointer-events: auto !important;
269
+ transform: scale(1) !important;
262
270
  }
263
271
 
264
272
  /* Font Awesome's base spin animation (needed for custom speed) */
@@ -349,16 +357,16 @@ body:not(.no-animations) .btn-toolbar-style:active, body:not(.no-animations) .bt
349
357
  </div>
350
358
  </div>
351
359
 
352
- <button id="retry-weather-btn" onclick="retryWeather()" title="Retry Weather">
353
- <i class="fa-solid fa-cloud-sun"></i>
354
- </button>
355
-
356
360
  <div id="weather-loader">
357
361
  <i class="fa-solid fa-circle-notch fa-spin-slow"></i>
358
362
  </div>
359
363
  </div>
360
364
  </div>
361
365
 
366
+ <button id="retry-weather-btn" onclick="retryWeather()" title="Retry Weather">
367
+ <i class="fa-solid fa-cloud-sun"></i>
368
+ </button>
369
+
362
370
  <script type="module">
363
371
  import { firebaseConfig } from '../firebase-config.js';
364
372
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "4sp-dv",
3
- "version": "1.0.28",
3
+ "version": "1.0.30",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "homepage": "https://github.com/v5-4simpleproblems/v5-4simpleproblems-dv#readme",