@asd20/ui 3.2.626 → 3.2.628
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.
- package/package.json +1 -1
- package/src/components/molecules/Asd20LanguageTranslation/index.vue +1 -1
- package/src/components/organisms/Asd20VideoHeader/index.vue +1 -1
- package/src/components/templates/Asd20DistrictVideoTemplate/index.vue +3 -2
- package/src/components/templates/Asd20SchoolHomeTemplate/index.vue +16 -10
- package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.stories.js +1 -1
- package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue +125 -99
- package/src/components/templates/Asd20WayfindingImageTemplate/index.vue +14 -1
package/package.json
CHANGED
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
<div class="weather-status-and-translation-container">
|
|
55
55
|
<client-only>
|
|
56
56
|
<a
|
|
57
|
+
v-if="activeNotificationsByType.status.length > 0"
|
|
57
58
|
class="weather-link"
|
|
58
59
|
href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
|
|
59
60
|
>
|
|
@@ -262,13 +263,13 @@ export default {
|
|
|
262
263
|
background: rgba(255, 255, 255, 0.9);
|
|
263
264
|
border-radius: 3rem;
|
|
264
265
|
border: 1px solid var(--website-page__alternate-background-color);
|
|
265
|
-
margin-left: 0.5rem;
|
|
266
|
+
// margin-left: 0.5rem;
|
|
266
267
|
.asd20-select-input {
|
|
267
268
|
padding: 0.25rem 0.25rem;
|
|
268
269
|
color: currentColor;
|
|
269
270
|
font-family: Ariel, Arial, Helvetica, sans-serif;
|
|
270
271
|
&__overlay-label {
|
|
271
|
-
display: none;
|
|
272
|
+
// display: none;
|
|
272
273
|
}
|
|
273
274
|
}
|
|
274
275
|
.asd20-icon {
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
<div class="notification-translation-container">
|
|
65
65
|
<client-only>
|
|
66
66
|
<a
|
|
67
|
+
v-if="activeNotificationsByType.status.length > 0"
|
|
67
68
|
class="weather-link"
|
|
68
69
|
href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
|
|
69
70
|
>
|
|
@@ -227,7 +228,13 @@ export default {
|
|
|
227
228
|
margin-top: space(2.25);
|
|
228
229
|
.weather-link {
|
|
229
230
|
text-decoration: none;
|
|
230
|
-
border-radius:
|
|
231
|
+
border-radius: 3rem;
|
|
232
|
+
border: 1px solid var(--website-page__alternate-background-color);
|
|
233
|
+
padding: 0 0.5rem;
|
|
234
|
+
min-height: 2rem;
|
|
235
|
+
align-items: center;
|
|
236
|
+
display: flex;
|
|
237
|
+
background: white;
|
|
231
238
|
}
|
|
232
239
|
.notification-translation-container {
|
|
233
240
|
display: flex;
|
|
@@ -235,19 +242,21 @@ export default {
|
|
|
235
242
|
align-items: center;
|
|
236
243
|
flex-wrap: wrap;
|
|
237
244
|
justify-content: flex-end;
|
|
238
|
-
margin-right:
|
|
245
|
+
margin-right: 0;
|
|
239
246
|
}
|
|
240
247
|
.asd20-language-translation {
|
|
241
248
|
background: rgba(255, 255, 255, 1);
|
|
242
|
-
border-radius:
|
|
249
|
+
border-radius: 3rem;
|
|
243
250
|
border: 1px solid var(--website-page__alternate-background-color);
|
|
244
|
-
margin-left: 0.05rem;
|
|
245
251
|
.asd20-select-input {
|
|
246
|
-
padding: 0.25rem 0.25rem;
|
|
252
|
+
// padding: 0.25rem 0.25rem;
|
|
247
253
|
color: currentColor;
|
|
248
254
|
font-family: Ariel, Arial, Helvetica, sans-serif;
|
|
249
255
|
&__overlay-label {
|
|
250
|
-
display: none;
|
|
256
|
+
// display: none;
|
|
257
|
+
}
|
|
258
|
+
&__field-wrapper {
|
|
259
|
+
padding: 0 0.5rem;
|
|
251
260
|
}
|
|
252
261
|
}
|
|
253
262
|
.asd20-icon {
|
|
@@ -307,9 +316,6 @@ export default {
|
|
|
307
316
|
.notification-translation-container {
|
|
308
317
|
margin-right: space(1);
|
|
309
318
|
}
|
|
310
|
-
.asd20-language-translation {
|
|
311
|
-
margin-left: 0.5rem;
|
|
312
|
-
}
|
|
313
319
|
}
|
|
314
320
|
}
|
|
315
321
|
|
|
@@ -319,7 +325,7 @@ export default {
|
|
|
319
325
|
margin-left: space(3);
|
|
320
326
|
margin-top: 0;
|
|
321
327
|
.notification-translation-container {
|
|
322
|
-
margin-right: 0
|
|
328
|
+
margin-right: 0;
|
|
323
329
|
}
|
|
324
330
|
.asd20-notification--status {
|
|
325
331
|
.asd20-notification__content {
|
|
@@ -61,41 +61,44 @@
|
|
|
61
61
|
</template>
|
|
62
62
|
|
|
63
63
|
<template>
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
<div class="notification-translation-container">
|
|
65
|
+
<client-only>
|
|
66
|
+
<a
|
|
67
|
+
v-if="activeNotificationsByType.status.length > 0"
|
|
68
|
+
class="weather-link"
|
|
69
|
+
href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
|
|
70
|
+
>
|
|
71
|
+
<asd20-notification-group
|
|
72
|
+
class="asd20-notification-group--status"
|
|
73
|
+
:notifications="activeNotificationsByType.status"
|
|
74
|
+
group-type="status"
|
|
75
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
76
|
+
@toggle-all="$emit('toggle-all')"
|
|
77
|
+
/>
|
|
78
|
+
</a>
|
|
79
|
+
</client-only>
|
|
80
|
+
|
|
81
|
+
<client-only>
|
|
82
|
+
<Asd20LanguageTranslation
|
|
83
|
+
v-if="languageCode"
|
|
84
|
+
reversed
|
|
85
|
+
:languageCode="languageCode"
|
|
86
|
+
v-on="$listeners"
|
|
87
|
+
/>
|
|
88
|
+
</client-only>
|
|
89
|
+
|
|
90
|
+
<!-- Floating Notifications -->
|
|
91
|
+
<client-only>
|
|
69
92
|
<asd20-notification-group
|
|
70
|
-
class="asd20-notification-group--
|
|
71
|
-
:notifications="activeNotificationsByType.
|
|
72
|
-
|
|
93
|
+
class="asd20-notification-group--floating"
|
|
94
|
+
:notifications="activeNotificationsByType.floating"
|
|
95
|
+
:total-dismissed-notifications="totalDismissedNotifications"
|
|
96
|
+
group-type="floating"
|
|
73
97
|
@dismiss="$emit('dismiss-notification', $event)"
|
|
74
98
|
@toggle-all="$emit('toggle-all')"
|
|
75
|
-
|
|
76
|
-
</
|
|
77
|
-
</
|
|
78
|
-
|
|
79
|
-
<client-only>
|
|
80
|
-
<Asd20LanguageTranslation
|
|
81
|
-
v-if="languageCode"
|
|
82
|
-
reversed
|
|
83
|
-
:languageCode="languageCode"
|
|
84
|
-
v-on="$listeners"
|
|
85
|
-
/>
|
|
86
|
-
</client-only>
|
|
87
|
-
|
|
88
|
-
<!-- Floating Notifications -->
|
|
89
|
-
<client-only>
|
|
90
|
-
<asd20-notification-group
|
|
91
|
-
class="asd20-notification-group--floating"
|
|
92
|
-
:notifications="activeNotificationsByType.floating"
|
|
93
|
-
:total-dismissed-notifications="totalDismissedNotifications"
|
|
94
|
-
group-type="floating"
|
|
95
|
-
@dismiss="$emit('dismiss-notification', $event)"
|
|
96
|
-
@toggle-all="$emit('toggle-all')"
|
|
97
|
-
></asd20-notification-group>
|
|
98
|
-
</client-only>
|
|
99
|
+
></asd20-notification-group>
|
|
100
|
+
</client-only>
|
|
101
|
+
</div>
|
|
99
102
|
</template>
|
|
100
103
|
</asd20-school-homepage-video-header>
|
|
101
104
|
|
|
@@ -196,10 +199,81 @@ export default {
|
|
|
196
199
|
flex-shrink: 0;
|
|
197
200
|
overflow-y: auto;
|
|
198
201
|
margin-top: space(2.25);
|
|
199
|
-
.
|
|
200
|
-
|
|
201
|
-
|
|
202
|
+
.notification-translation-container {
|
|
203
|
+
display: flex;
|
|
204
|
+
flex-direction: row;
|
|
205
|
+
align-items: center;
|
|
206
|
+
flex-wrap: wrap;
|
|
207
|
+
justify-content: flex-end;
|
|
208
|
+
margin-right: 0;
|
|
209
|
+
position: absolute;
|
|
210
|
+
top: space(0.5);
|
|
211
|
+
right: space(0.5);
|
|
212
|
+
// max-width: 500px;
|
|
213
|
+
.weather-link {
|
|
214
|
+
text-decoration: none;
|
|
215
|
+
border: 1px solid var(--website-page__alternate-background-color);
|
|
216
|
+
background: white;
|
|
217
|
+
border-radius: 3rem;
|
|
218
|
+
// position: absolute;
|
|
219
|
+
// right: space(6);
|
|
220
|
+
// top: 0 !important;
|
|
221
|
+
}
|
|
222
|
+
.asd20-notification-group--status {
|
|
223
|
+
// position: absolute;
|
|
224
|
+
// right: space(2);
|
|
225
|
+
// top: space(0.5) !important;
|
|
226
|
+
}
|
|
227
|
+
.asd20-language-translation {
|
|
228
|
+
// position: absolute;
|
|
229
|
+
// right: space(0.5);
|
|
230
|
+
// top: space(0.5) !important;
|
|
231
|
+
z-index: 2;
|
|
232
|
+
background: rgba(255, 255, 255, 1);
|
|
233
|
+
border-radius: 3rem;
|
|
234
|
+
border: 1px solid var(--website-page__alternate-background-color);
|
|
235
|
+
margin: 0 0.05rem;
|
|
236
|
+
max-height: 2rem;
|
|
237
|
+
.asd20-select-input {
|
|
238
|
+
padding: 0.25rem 0.25rem;
|
|
239
|
+
color: currentColor;
|
|
240
|
+
font-family: Arial, Arial, Helvetica, sans-serif;
|
|
241
|
+
&__overlay-label {
|
|
242
|
+
// display: none;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
.asd20-icon {
|
|
246
|
+
width: 24px !important;
|
|
247
|
+
height: 24px !important;
|
|
248
|
+
--line-color: currentColor !important;
|
|
249
|
+
--fill-color: var(--color__accent) !important;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
.asd20-language-loader {
|
|
253
|
+
order: 1;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.asd20-notification-group--floating {
|
|
257
|
+
// position: absolute;
|
|
258
|
+
// right: space(0.5);
|
|
259
|
+
// top: space(2) !important;
|
|
260
|
+
// .bell {
|
|
261
|
+
// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
|
|
262
|
+
// svg {
|
|
263
|
+
// fill: var(--color__accent) !important;
|
|
264
|
+
// }
|
|
265
|
+
// span {
|
|
266
|
+
// background: var(--color__accent) !important;
|
|
267
|
+
// top: inherit !important;
|
|
268
|
+
// right: inherit !important;
|
|
269
|
+
// width: 1.2rem !important;
|
|
270
|
+
// height: 1.2rem !important;
|
|
271
|
+
// font-size: 0.75rem !important;
|
|
272
|
+
// }
|
|
273
|
+
// }
|
|
274
|
+
}
|
|
202
275
|
}
|
|
276
|
+
|
|
203
277
|
.pickerContainer {
|
|
204
278
|
display: none;
|
|
205
279
|
}
|
|
@@ -220,58 +294,6 @@ export default {
|
|
|
220
294
|
.asd20-feeds-section {
|
|
221
295
|
margin-top: space(0);
|
|
222
296
|
}
|
|
223
|
-
.asd20-notification-group--status {
|
|
224
|
-
position: absolute;
|
|
225
|
-
right: space(2);
|
|
226
|
-
top: space(0.5) !important;
|
|
227
|
-
}
|
|
228
|
-
.asd20-language-translation {
|
|
229
|
-
position: absolute;
|
|
230
|
-
right: space(0.5);
|
|
231
|
-
top: space(0.5) !important;
|
|
232
|
-
z-index: 2;
|
|
233
|
-
background: rgba(255, 255, 255, 1);
|
|
234
|
-
border-radius: 50%;
|
|
235
|
-
border: 1px solid var(--website-page__alternate-background-color);
|
|
236
|
-
margin: 0 0.05rem;
|
|
237
|
-
.asd20-select-input {
|
|
238
|
-
padding: 0.25rem 0.25rem;
|
|
239
|
-
color: currentColor;
|
|
240
|
-
font-family: Ariel, Arial, Helvetica, sans-serif;
|
|
241
|
-
&__overlay-label {
|
|
242
|
-
display: none;
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
.asd20-icon {
|
|
246
|
-
width: 24px !important;
|
|
247
|
-
height: 24px !important;
|
|
248
|
-
--line-color: currentColor !important;
|
|
249
|
-
--fill-color: var(--color__accent) !important;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
.asd20-language-loader {
|
|
253
|
-
order: 1;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.asd20-notification-group--floating {
|
|
257
|
-
position: absolute;
|
|
258
|
-
right: space(0.5);
|
|
259
|
-
top: space(2) !important;
|
|
260
|
-
// .bell {
|
|
261
|
-
// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
|
|
262
|
-
// svg {
|
|
263
|
-
// fill: var(--color__accent) !important;
|
|
264
|
-
// }
|
|
265
|
-
// span {
|
|
266
|
-
// background: var(--color__accent) !important;
|
|
267
|
-
// top: inherit !important;
|
|
268
|
-
// right: inherit !important;
|
|
269
|
-
// width: 1.2rem !important;
|
|
270
|
-
// height: 1.2rem !important;
|
|
271
|
-
// font-size: 0.75rem !important;
|
|
272
|
-
// }
|
|
273
|
-
// }
|
|
274
|
-
}
|
|
275
297
|
|
|
276
298
|
.asd20-quicklinks-menu {
|
|
277
299
|
position: relative;
|
|
@@ -281,16 +303,16 @@ export default {
|
|
|
281
303
|
@media (min-width: 667px) {
|
|
282
304
|
.asd20-school-home-video-template {
|
|
283
305
|
.asd20-notification-group--status {
|
|
284
|
-
right: space(2.5);
|
|
285
|
-
top: space(0.5) !important;
|
|
306
|
+
// right: space(2.5);
|
|
307
|
+
// top: space(0.5) !important;
|
|
286
308
|
}
|
|
287
309
|
.asd20-language-translation {
|
|
288
|
-
right: space(1);
|
|
289
|
-
top: space(0.5) !important;
|
|
310
|
+
// right: space(1);
|
|
311
|
+
// top: space(0.5) !important;
|
|
290
312
|
}
|
|
291
313
|
.asd20-notification-group--floating {
|
|
292
|
-
right: space(1);
|
|
293
|
-
top: space(2) !important;
|
|
314
|
+
// right: space(1);
|
|
315
|
+
// top: space(2) !important;
|
|
294
316
|
}
|
|
295
317
|
}
|
|
296
318
|
}
|
|
@@ -308,6 +330,10 @@ export default {
|
|
|
308
330
|
margin-left: space(1);
|
|
309
331
|
}
|
|
310
332
|
}
|
|
333
|
+
.notification-translation-container {
|
|
334
|
+
top: space(5.5);
|
|
335
|
+
right: space(3.5);
|
|
336
|
+
}
|
|
311
337
|
|
|
312
338
|
.asd20-quicklinks-menu {
|
|
313
339
|
padding-bottom: space(1);
|
|
@@ -323,8 +349,8 @@ export default {
|
|
|
323
349
|
}
|
|
324
350
|
}
|
|
325
351
|
.asd20-notification-group--floating {
|
|
326
|
-
right: space(4);
|
|
327
|
-
top: space(7.5) !important;
|
|
352
|
+
// right: space(4);
|
|
353
|
+
// top: space(7.5) !important;
|
|
328
354
|
// .bell {
|
|
329
355
|
// span {
|
|
330
356
|
// background: var(--color__accent);
|
|
@@ -335,12 +361,12 @@ export default {
|
|
|
335
361
|
}
|
|
336
362
|
.asd20-notification-group--status {
|
|
337
363
|
order: 0;
|
|
338
|
-
right: space(5.5) !important;
|
|
339
|
-
top: space(6) !important;
|
|
364
|
+
// right: space(5.5) !important;
|
|
365
|
+
// top: space(6) !important;
|
|
340
366
|
}
|
|
341
367
|
.asd20-language-translation {
|
|
342
|
-
right: space(4) !important;
|
|
343
|
-
top: space(6) !important;
|
|
368
|
+
// right: space(4) !important;
|
|
369
|
+
// top: space(6) !important;
|
|
344
370
|
}
|
|
345
371
|
}
|
|
346
372
|
}
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
:primary-messages="wayFindingPrimaryMessages"
|
|
87
87
|
:secondary-messages="secondaryMessages"
|
|
88
88
|
omit-body-content
|
|
89
|
-
|
|
89
|
+
grid
|
|
90
90
|
/>
|
|
91
91
|
|
|
92
92
|
<!-- Feed Section -->
|
|
@@ -320,6 +320,19 @@ export default {
|
|
|
320
320
|
}
|
|
321
321
|
}
|
|
322
322
|
}
|
|
323
|
+
.asd20-page-content {
|
|
324
|
+
&--grid {
|
|
325
|
+
.primary-messaging-section,
|
|
326
|
+
.secondary-messaging-section {
|
|
327
|
+
--minimum-column-width: 480px;
|
|
328
|
+
--gutter: #{space(1)};
|
|
329
|
+
display: flex;
|
|
330
|
+
flex-wrap: wrap;
|
|
331
|
+
margin: calc(var(--gutter) * -1);
|
|
332
|
+
padding: space(2) space(3);
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
}
|
|
323
336
|
// .intro-message {
|
|
324
337
|
// width: 90%;
|
|
325
338
|
// }
|