@asd20/ui 3.2.1034 → 3.2.1036
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/Asd20BlockSchedule/index.stories.js +19 -0
- package/src/components/molecules/Asd20BlockSchedule/index.vue +58 -0
- package/src/components/organisms/Asd20FactoidsSection/index.vue +3 -3
- package/src/components/organisms/Asd20NotificationGroup/index.vue +3 -1
- package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue +36 -40
- package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue +2 -1
- package/src/components/organisms/Asd20SwiperFeed/index.vue +25 -19
- package/src/components/templates/Asd20DetailAlternateTemplate/index.vue +17 -17
- package/src/components/templates/Asd20DistrictVideoTemplate/index.vue +1 -1
- package/src/components/templates/Asd20SchoolHomeTemplate/index.vue +98 -38
- package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue +125 -47
- package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue +17 -17
- package/src/components/templates/Asd20WayfindingImageTemplate/index.vue +16 -16
- package/src/data/events/district-events.json +27 -0
package/package.json
CHANGED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { storiesOf } from '@storybook/vue'
|
|
2
|
+
import Asd20BlockSchedule from '.'
|
|
3
|
+
|
|
4
|
+
const info = {
|
|
5
|
+
summary: 'Asd20BlockSchedule',
|
|
6
|
+
}
|
|
7
|
+
const wrapper = {
|
|
8
|
+
components: { Asd20BlockSchedule },
|
|
9
|
+
data: () => ({}),
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
storiesOf('Molecules - Asd20BlockSchedule', module).add(
|
|
13
|
+
'Default',
|
|
14
|
+
() => ({
|
|
15
|
+
...wrapper,
|
|
16
|
+
template: `<Asd20BlockSchedule />`,
|
|
17
|
+
}),
|
|
18
|
+
{ info }
|
|
19
|
+
)
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div v-if="blockDay" class="asd20-block-schedule">
|
|
3
|
+
<a href="/schedules">
|
|
4
|
+
<asd20-icon size="md" name="calendar" title="Block Day" />
|
|
5
|
+
<span>{{ blockDay }}</span>
|
|
6
|
+
</a>
|
|
7
|
+
</div>
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<script>
|
|
11
|
+
import Asd20Icon from '../../atoms/Asd20Icon'
|
|
12
|
+
export default {
|
|
13
|
+
name: 'Asd20BlockSchedule',
|
|
14
|
+
components: {
|
|
15
|
+
Asd20Icon,
|
|
16
|
+
},
|
|
17
|
+
props: {
|
|
18
|
+
blockEvent: { type: Object, default: () => ({}) },
|
|
19
|
+
},
|
|
20
|
+
data: () => ({}),
|
|
21
|
+
computed: {
|
|
22
|
+
blockDay() {
|
|
23
|
+
const e = this.blockEvent
|
|
24
|
+
if (!e || !Array.isArray(e.calendarKeywords)) return ''
|
|
25
|
+
return e.calendarKeywords.includes('Block Schedule')
|
|
26
|
+
? e.summary || ''
|
|
27
|
+
: ''
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
}
|
|
31
|
+
</script>
|
|
32
|
+
|
|
33
|
+
<style lang="scss" scoped>
|
|
34
|
+
@import '../../../design/_variables.scss';
|
|
35
|
+
.asd20-block-schedule {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: row;
|
|
38
|
+
align-items: center;
|
|
39
|
+
margin-bottom: 0;
|
|
40
|
+
height: 2.75rem;
|
|
41
|
+
background: #fff;
|
|
42
|
+
border-radius: 2rem;
|
|
43
|
+
border: 1px solid var(--website-page__alternate-background-color);
|
|
44
|
+
padding: 0 0.75rem 0 0.5rem;
|
|
45
|
+
a {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
align-items: center;
|
|
49
|
+
color: var(--color__primary);
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
font-family: sans-serif;
|
|
52
|
+
flex-grow: 1;
|
|
53
|
+
.asd20-icon {
|
|
54
|
+
margin-right: space(0.5);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
</style>
|
|
@@ -48,7 +48,7 @@ $factoids-header-fg: var(--color__primary);
|
|
|
48
48
|
font-size: 1.25rem;
|
|
49
49
|
padding: space(0.5) space(1) space(0.5) space(1);
|
|
50
50
|
z-index: -1;
|
|
51
|
-
border-top: 2px solid var(--color__tertiary);
|
|
51
|
+
// border-top: 2px solid var(--color__tertiary);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
|
|
@@ -56,8 +56,8 @@ $factoids-header-fg: var(--color__primary);
|
|
|
56
56
|
.asd20-factoids-section {
|
|
57
57
|
grid-column: 1 / -1;
|
|
58
58
|
h2 {
|
|
59
|
-
width: calc(100% - #{space(
|
|
60
|
-
margin-left: space(
|
|
59
|
+
width: calc(100% - #{space(3)});
|
|
60
|
+
margin-left: space(3);
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
}
|
|
@@ -316,6 +316,7 @@ export default {
|
|
|
316
316
|
.pagination {
|
|
317
317
|
display: flex;
|
|
318
318
|
justify-content: flex-end;
|
|
319
|
+
width: max-content;
|
|
319
320
|
align-items: center;
|
|
320
321
|
font-size: 0.85rem;
|
|
321
322
|
z-index: 15;
|
|
@@ -356,8 +357,9 @@ export default {
|
|
|
356
357
|
|
|
357
358
|
&--floating .pagination {
|
|
358
359
|
margin-right: 0.5rem;
|
|
359
|
-
background: rgba(255, 255, 255,
|
|
360
|
+
background: rgba(255, 255, 255, 1);
|
|
360
361
|
align-self: stretch;
|
|
362
|
+
width: max-content;
|
|
361
363
|
margin-right: -2rem;
|
|
362
364
|
z-index: 8;
|
|
363
365
|
padding-right: 2rem;
|
|
@@ -117,9 +117,9 @@ export default {
|
|
|
117
117
|
display: block;
|
|
118
118
|
position: absolute;
|
|
119
119
|
top: 0;
|
|
120
|
-
bottom: space(
|
|
120
|
+
bottom: space(2);
|
|
121
121
|
left: 0;
|
|
122
|
-
right:
|
|
122
|
+
right: 0;
|
|
123
123
|
z-index: -1;
|
|
124
124
|
background: var(--website-header__background-style);
|
|
125
125
|
background-color: var(--website-header__background-color);
|
|
@@ -147,26 +147,17 @@ export default {
|
|
|
147
147
|
--fill-two: rgba(255, 255, 255, 0.625);
|
|
148
148
|
width: 100%;
|
|
149
149
|
position: absolute;
|
|
150
|
-
right: 0;
|
|
151
150
|
z-index: 101;
|
|
152
|
-
// background: white;
|
|
153
151
|
display: flex;
|
|
154
|
-
justify-content:
|
|
152
|
+
// justify-content: space-around;
|
|
155
153
|
flex-direction: row;
|
|
156
154
|
align-items: center;
|
|
157
|
-
padding: space(0.25) space(0.25);
|
|
158
155
|
margin-top: space(0.5);
|
|
159
|
-
// width: 95vw;
|
|
160
156
|
&::v-deep .asd20-picker {
|
|
161
157
|
display: none;
|
|
162
158
|
}
|
|
163
159
|
|
|
164
160
|
&::v-deep .notification-group--status {
|
|
165
|
-
// margin-left: 0.5rem;
|
|
166
|
-
// .asd20-notification {
|
|
167
|
-
// margin: 0;
|
|
168
|
-
// padding: 0 !important;
|
|
169
|
-
// }
|
|
170
161
|
.notifications {
|
|
171
162
|
border-radius: space(0.5);
|
|
172
163
|
}
|
|
@@ -175,16 +166,14 @@ export default {
|
|
|
175
166
|
margin-left: 1rem;
|
|
176
167
|
}
|
|
177
168
|
&::v-deep .notification-group--floating {
|
|
178
|
-
|
|
169
|
+
width: max-content;
|
|
170
|
+
float: right;
|
|
179
171
|
.bell {
|
|
180
172
|
z-index: 1000;
|
|
181
173
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
|
|
182
174
|
svg {
|
|
183
175
|
fill: var(--color__accent) !important;
|
|
184
176
|
}
|
|
185
|
-
// span {
|
|
186
|
-
// background: var(--color__on-primary) !important;
|
|
187
|
-
// }
|
|
188
177
|
}
|
|
189
178
|
}
|
|
190
179
|
}
|
|
@@ -203,7 +192,7 @@ export default {
|
|
|
203
192
|
}
|
|
204
193
|
|
|
205
194
|
&__content {
|
|
206
|
-
margin-top: space(2);
|
|
195
|
+
margin-top: space(2.5);
|
|
207
196
|
background: var(--website-header__background-color);
|
|
208
197
|
}
|
|
209
198
|
|
|
@@ -219,12 +208,14 @@ export default {
|
|
|
219
208
|
}
|
|
220
209
|
|
|
221
210
|
&__call-to-action {
|
|
222
|
-
margin: space(1)
|
|
211
|
+
margin: space(1);
|
|
223
212
|
z-index: 1;
|
|
224
213
|
display: flex;
|
|
214
|
+
flex-direction: column;
|
|
225
215
|
.asd20-button {
|
|
226
216
|
flex-grow: 1;
|
|
227
|
-
|
|
217
|
+
width: calc(100% - space(3));
|
|
218
|
+
margin-bottom: space(0.5);
|
|
228
219
|
font-size: 1rem !important;
|
|
229
220
|
background-color: var(
|
|
230
221
|
--website-header__button-background-color,
|
|
@@ -269,7 +260,7 @@ export default {
|
|
|
269
260
|
}
|
|
270
261
|
|
|
271
262
|
&:not(:last-child) {
|
|
272
|
-
margin-
|
|
263
|
+
margin-bottom: space(0.5);
|
|
273
264
|
}
|
|
274
265
|
}
|
|
275
266
|
}
|
|
@@ -278,8 +269,6 @@ export default {
|
|
|
278
269
|
img {
|
|
279
270
|
display: block;
|
|
280
271
|
width: 100%;
|
|
281
|
-
// height: 100%;
|
|
282
|
-
// object-fit: cover;
|
|
283
272
|
object-position: center;
|
|
284
273
|
}
|
|
285
274
|
.image-credits {
|
|
@@ -294,15 +283,7 @@ export default {
|
|
|
294
283
|
font-size: 0.8rem !important;
|
|
295
284
|
}
|
|
296
285
|
}
|
|
297
|
-
// Hide images on mobile
|
|
298
|
-
// &__image {
|
|
299
|
-
// display: none;
|
|
300
|
-
// }
|
|
301
|
-
|
|
302
|
-
// Add a bit more space at the bottom
|
|
303
|
-
// if cta is present
|
|
304
286
|
&--has-cta {
|
|
305
|
-
margin-bottom: space(3);
|
|
306
287
|
&::after {
|
|
307
288
|
bottom: space(-1.5);
|
|
308
289
|
}
|
|
@@ -313,9 +294,14 @@ $min: 3rem;
|
|
|
313
294
|
$max: 4rem;
|
|
314
295
|
@media (min-width: 667px) {
|
|
315
296
|
.asd20-school-homepage-header {
|
|
297
|
+
&::before {
|
|
298
|
+
right: space(3);
|
|
299
|
+
bottom: space(2);
|
|
300
|
+
border-top-right-radius: var(--website-shape__radius-l);
|
|
301
|
+
}
|
|
316
302
|
&__top {
|
|
317
303
|
flex-direction: row;
|
|
318
|
-
justify-content: flex-end;
|
|
304
|
+
// justify-content: flex-end;
|
|
319
305
|
// padding: space(0.25) space(1);
|
|
320
306
|
align-items: center !important;
|
|
321
307
|
}
|
|
@@ -325,6 +311,19 @@ $max: 4rem;
|
|
|
325
311
|
bottom: 0;
|
|
326
312
|
}
|
|
327
313
|
}
|
|
314
|
+
&__call-to-action {
|
|
315
|
+
flex-direction: row;
|
|
316
|
+
margin: space(1);
|
|
317
|
+
.asd20-button {
|
|
318
|
+
flex-grow: 0;
|
|
319
|
+
width: max-content;
|
|
320
|
+
min-width: 4rem;
|
|
321
|
+
margin-bottom: 0 !important;
|
|
322
|
+
&:not(:last-child) {
|
|
323
|
+
margin-right: space(0.5);
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
}
|
|
328
327
|
}
|
|
329
328
|
}
|
|
330
329
|
|
|
@@ -370,8 +369,6 @@ $max: 4rem;
|
|
|
370
369
|
background: var(--website-quick-links__background-color);
|
|
371
370
|
}
|
|
372
371
|
|
|
373
|
-
// Provide space between logo and breadcrumb
|
|
374
|
-
// TODO: Revisit for school logo
|
|
375
372
|
&::v-deep .asd20-logo {
|
|
376
373
|
& + .asd20-breadcrumb {
|
|
377
374
|
margin-top: space(2);
|
|
@@ -390,6 +387,11 @@ $max: 4rem;
|
|
|
390
387
|
&::v-deep .asd20-picker {
|
|
391
388
|
display: flex;
|
|
392
389
|
}
|
|
390
|
+
// &::v-deep .notification-group--floating {
|
|
391
|
+
// position: absolute;
|
|
392
|
+
// top: 9rem;
|
|
393
|
+
// right: 5.5rem;
|
|
394
|
+
// }
|
|
393
395
|
}
|
|
394
396
|
|
|
395
397
|
&::v-deep .asd20-notification-group--status {
|
|
@@ -398,12 +400,6 @@ $max: 4rem;
|
|
|
398
400
|
grid-row: 3 / 5;
|
|
399
401
|
padding-right: 0;
|
|
400
402
|
}
|
|
401
|
-
&::v-deep .asd20-notification-group--floating {
|
|
402
|
-
// position: absolute;
|
|
403
|
-
// right: space(3);
|
|
404
|
-
// top: space(3.5);
|
|
405
|
-
// margin-right: 0;
|
|
406
|
-
}
|
|
407
403
|
|
|
408
404
|
&__content {
|
|
409
405
|
margin-top: 0;
|
|
@@ -430,7 +426,7 @@ $max: 4rem;
|
|
|
430
426
|
height: min-content;
|
|
431
427
|
align-self: end;
|
|
432
428
|
.asd20-button {
|
|
433
|
-
min-height: space(
|
|
429
|
+
min-height: space(1);
|
|
434
430
|
font-size: 1.25rem !important;
|
|
435
431
|
}
|
|
436
432
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<component :is="tag" class="asd20-swiper-feed">
|
|
3
|
-
<h2 aria-label="Feed title">
|
|
3
|
+
<h2 class="swiper-title" aria-label="Feed title">
|
|
4
4
|
<asd20-icon v-if="icon" :name="icon" size="lg" /><span
|
|
5
5
|
v-html="title"
|
|
6
6
|
></span>
|
|
@@ -142,9 +142,9 @@ export default {
|
|
|
142
142
|
display: flex;
|
|
143
143
|
flex-direction: column;
|
|
144
144
|
position: relative;
|
|
145
|
-
margin: 0;
|
|
146
|
-
padding: space(
|
|
147
|
-
background: var(--website-page__alternate-background-color);
|
|
145
|
+
margin: space(2) 0 space(0.5) 0;
|
|
146
|
+
// padding: space(1) space(2) space(1) 0;
|
|
147
|
+
// background: var(--website-page__alternate-background-color);
|
|
148
148
|
|
|
149
149
|
--color__fade-overlay-left: var(--website-page__background-color);
|
|
150
150
|
--color__fade-overlay-right: var(--website-page__alternate-background-color);
|
|
@@ -157,17 +157,18 @@ export default {
|
|
|
157
157
|
display: block;
|
|
158
158
|
position: absolute;
|
|
159
159
|
left: 0;
|
|
160
|
-
right:
|
|
161
|
-
top:
|
|
162
|
-
bottom:
|
|
163
|
-
background: var(--website-
|
|
164
|
-
border-radius:
|
|
165
|
-
border-
|
|
166
|
-
border-
|
|
160
|
+
right: 0;
|
|
161
|
+
top: 30%;
|
|
162
|
+
bottom: 30%;
|
|
163
|
+
background: var(--website-page__alternate-background-color);
|
|
164
|
+
border-radius: 0;
|
|
165
|
+
// border-radius: var(--website-shape__radius-m);
|
|
166
|
+
// border-top-left-radius: 0;
|
|
167
|
+
// border-bottom-left-radius: 0;
|
|
167
168
|
z-index: 0;
|
|
168
169
|
}
|
|
169
170
|
|
|
170
|
-
|
|
171
|
+
.swiper-title {
|
|
171
172
|
display: flex;
|
|
172
173
|
font-size: 1.5rem;
|
|
173
174
|
line-height: 1;
|
|
@@ -175,6 +176,9 @@ export default {
|
|
|
175
176
|
text-align: left;
|
|
176
177
|
margin: 0 0 0 space(1);
|
|
177
178
|
align-items: center;
|
|
179
|
+
border-bottom: 3px solid var(--color__accent);
|
|
180
|
+
padding-bottom: space(0.5);
|
|
181
|
+
width: 100%;
|
|
178
182
|
}
|
|
179
183
|
|
|
180
184
|
.asd20-icon {
|
|
@@ -191,12 +195,13 @@ export default {
|
|
|
191
195
|
.asd20-swiper {
|
|
192
196
|
flex-shrink: 0;
|
|
193
197
|
margin: 0 0;
|
|
194
|
-
width: 100%;
|
|
198
|
+
// width: 100%;
|
|
195
199
|
z-index: 2;
|
|
196
200
|
}
|
|
197
201
|
.feed-buttons {
|
|
198
202
|
display: flex;
|
|
199
203
|
flex-direction: column;
|
|
204
|
+
padding-bottom: space(0.5);
|
|
200
205
|
}
|
|
201
206
|
|
|
202
207
|
.asd20-button {
|
|
@@ -224,17 +229,18 @@ export default {
|
|
|
224
229
|
|
|
225
230
|
@media (min-width: 1024px) {
|
|
226
231
|
.asd20-swiper-feed {
|
|
227
|
-
|
|
228
|
-
margin
|
|
232
|
+
.swiper-title {
|
|
233
|
+
margin: 0 space(1) 0 space(3);
|
|
234
|
+
width: inherit;
|
|
229
235
|
}
|
|
230
236
|
|
|
231
|
-
&::after {
|
|
232
|
-
|
|
233
|
-
}
|
|
237
|
+
// &::after {
|
|
238
|
+
// right: space(3);
|
|
239
|
+
// }
|
|
234
240
|
|
|
235
241
|
.asd20-swiper {
|
|
236
242
|
// margin-left: space(1);
|
|
237
|
-
width: calc(100% - #{space(
|
|
243
|
+
width: calc(100% - #{space(4)});
|
|
238
244
|
}
|
|
239
245
|
.asd20-button {
|
|
240
246
|
font-size: 1rem !important;
|
|
@@ -256,23 +256,23 @@ export default {
|
|
|
256
256
|
top: space(2.0375);
|
|
257
257
|
}
|
|
258
258
|
|
|
259
|
-
.asd20-feeds-section--top {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
}
|
|
259
|
+
// .asd20-feeds-section--top {
|
|
260
|
+
// // margin-top: space(1);
|
|
261
|
+
// .asd20-swiper-feed:first-child {
|
|
262
|
+
// padding-top: space(2);
|
|
263
|
+
// padding-bottom: space(1);
|
|
264
|
+
// &::after {
|
|
265
|
+
// top: space(1);
|
|
266
|
+
// }
|
|
267
|
+
// }
|
|
268
|
+
// .asd20-swiper-feed:last-child {
|
|
269
|
+
// // margin-top: space(-1);
|
|
270
|
+
// padding-bottom: space(2);
|
|
271
|
+
// &::after {
|
|
272
|
+
// bottom: space(1);
|
|
273
|
+
// }
|
|
274
|
+
// }
|
|
275
|
+
// }
|
|
276
276
|
}
|
|
277
277
|
|
|
278
278
|
@media (min-width: 1024px) {
|
|
@@ -83,29 +83,37 @@
|
|
|
83
83
|
|
|
84
84
|
<template slot="top">
|
|
85
85
|
<div class="notification-translation-container">
|
|
86
|
-
<
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
86
|
+
<div class="language-wrapper">
|
|
87
|
+
<client-only>
|
|
88
|
+
<a
|
|
89
|
+
v-if="activeNotificationsByType.status.length > 0"
|
|
90
|
+
class="weather-link"
|
|
91
|
+
href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
|
|
92
|
+
>
|
|
93
|
+
<asd20-notification-group
|
|
94
|
+
:notifications="activeNotificationsByType.status"
|
|
95
|
+
group-type="status"
|
|
96
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
97
|
+
@toggle-all="$emit('toggle-all')"
|
|
98
|
+
/>
|
|
99
|
+
</a>
|
|
100
|
+
</client-only>
|
|
101
|
+
<client-only>
|
|
102
|
+
<Asd20BlockSchedule
|
|
103
|
+
v-if="blockEvent"
|
|
104
|
+
:block-event="blockEvent"
|
|
105
|
+
class="block-schedule"
|
|
97
106
|
/>
|
|
98
|
-
</
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
</client-only>
|
|
107
|
+
</client-only>
|
|
108
|
+
<client-only>
|
|
109
|
+
<Asd20LanguageTranslation
|
|
110
|
+
v-if="languageCode"
|
|
111
|
+
reversed
|
|
112
|
+
:language-code="languageCode"
|
|
113
|
+
v-on="$listeners"
|
|
114
|
+
/>
|
|
115
|
+
</client-only>
|
|
116
|
+
</div>
|
|
109
117
|
|
|
110
118
|
<!-- Floating Notifications -->
|
|
111
119
|
<client-only>
|
|
@@ -176,6 +184,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
|
|
|
176
184
|
import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
|
|
177
185
|
import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
|
|
178
186
|
import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
|
|
187
|
+
import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
|
|
179
188
|
|
|
180
189
|
// Helpers
|
|
181
190
|
import _get from 'lodash-es/get'
|
|
@@ -198,6 +207,7 @@ export default {
|
|
|
198
207
|
Asd20FeedsSection,
|
|
199
208
|
Asd20OrganizationPicker,
|
|
200
209
|
Asd20LanguageTranslation,
|
|
210
|
+
Asd20BlockSchedule,
|
|
201
211
|
},
|
|
202
212
|
props: {
|
|
203
213
|
languageCode: { type: String, default: 'en' },
|
|
@@ -241,10 +251,30 @@ export default {
|
|
|
241
251
|
: '',
|
|
242
252
|
}
|
|
243
253
|
},
|
|
254
|
+
blockEvent() {
|
|
255
|
+
if (!this.events || this.events.length === 0) return null
|
|
256
|
+
return (
|
|
257
|
+
this.events.find(
|
|
258
|
+
e =>
|
|
259
|
+
Array.isArray(e.calendarKeywords) &&
|
|
260
|
+
e.calendarKeywords.includes('Block Schedule')
|
|
261
|
+
) || null
|
|
262
|
+
)
|
|
263
|
+
},
|
|
244
264
|
},
|
|
245
265
|
mounted() {
|
|
246
266
|
this.showLogo = window.innerWidth >= 1350
|
|
247
267
|
window.addEventListener('resize', this.handleResize)
|
|
268
|
+
// If nothing is loaded yet, ask parent to load events now.
|
|
269
|
+
if (!this.events || this.events.length === 0) {
|
|
270
|
+
this.$emit('events-in-view')
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
watch: {
|
|
274
|
+
// If the organization changes (picker, route change, etc.), refetch.
|
|
275
|
+
'organization.id': function () {
|
|
276
|
+
this.$emit('events-in-view')
|
|
277
|
+
},
|
|
248
278
|
},
|
|
249
279
|
methods: {
|
|
250
280
|
handleResize() {
|
|
@@ -288,24 +318,35 @@ export default {
|
|
|
288
318
|
align-items: center;
|
|
289
319
|
flex-wrap: wrap;
|
|
290
320
|
justify-content: flex-end;
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
321
|
+
width: 100%;
|
|
322
|
+
margin: 0 1.5rem;
|
|
323
|
+
.language-wrapper {
|
|
324
|
+
display: flex;
|
|
325
|
+
flex-direction: row;
|
|
326
|
+
align-items: center;
|
|
327
|
+
justify-content: space-between;
|
|
328
|
+
width: 100%;
|
|
329
|
+
margin-bottom: space(0.25);
|
|
330
|
+
|
|
331
|
+
.asd20-language-translation {
|
|
332
|
+
background: rgba(255, 255, 255, 1);
|
|
333
|
+
border-radius: 3rem;
|
|
334
|
+
border: 1px solid var(--website-page__alternate-background-color);
|
|
335
|
+
&::v-deep .asd20-select-input {
|
|
336
|
+
// padding: 0.25rem 0.25rem;
|
|
337
|
+
color: currentColor;
|
|
338
|
+
font-family: Ariel, Arial, Helvetica, sans-serif;
|
|
339
|
+
&__overlay-label {
|
|
340
|
+
// display: none;
|
|
341
|
+
}
|
|
342
|
+
&__field-wrapper {
|
|
343
|
+
padding: 0 0.5rem;
|
|
344
|
+
}
|
|
345
|
+
}
|
|
306
346
|
}
|
|
307
347
|
}
|
|
308
348
|
}
|
|
349
|
+
|
|
309
350
|
.asd20-language-loader {
|
|
310
351
|
order: 1;
|
|
311
352
|
}
|
|
@@ -338,7 +379,12 @@ export default {
|
|
|
338
379
|
@media (min-width: 667px) {
|
|
339
380
|
.asd20-school-home-template {
|
|
340
381
|
.notification-translation-container {
|
|
341
|
-
|
|
382
|
+
flex-wrap: nowrap;
|
|
383
|
+
.language-wrapper {
|
|
384
|
+
justify-content: flex-start;
|
|
385
|
+
margin-bottom: 0;
|
|
386
|
+
}
|
|
387
|
+
justify-content: flex-end;
|
|
342
388
|
}
|
|
343
389
|
}
|
|
344
390
|
}
|
|
@@ -349,7 +395,21 @@ export default {
|
|
|
349
395
|
margin-left: space(3);
|
|
350
396
|
margin-top: 0;
|
|
351
397
|
.notification-translation-container {
|
|
398
|
+
display: block;
|
|
399
|
+
width: 100%;
|
|
400
|
+
justify-content: flex-start;
|
|
401
|
+
// margin-left: space(1);
|
|
402
|
+
max-width: 13rem;
|
|
352
403
|
margin-right: 0;
|
|
404
|
+
justify-content: flex-end;
|
|
405
|
+
.language-wrapper {
|
|
406
|
+
flex-wrap: wrap;
|
|
407
|
+
}
|
|
408
|
+
.block-schedule,
|
|
409
|
+
.asd20-language-translation {
|
|
410
|
+
flex-grow: 1;
|
|
411
|
+
margin-bottom: space(0.25);
|
|
412
|
+
}
|
|
353
413
|
}
|
|
354
414
|
.asd20-notification--status {
|
|
355
415
|
.asd20-notification__content {
|
|
@@ -78,32 +78,42 @@
|
|
|
78
78
|
</client-only>
|
|
79
79
|
</template>
|
|
80
80
|
|
|
81
|
-
<template>
|
|
81
|
+
<template slot="top">
|
|
82
82
|
<div class="notification-translation-container">
|
|
83
|
-
<
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
83
|
+
<div class="language-wrapper">
|
|
84
|
+
<client-only>
|
|
85
|
+
<a
|
|
86
|
+
v-if="activeNotificationsByType.status.length > 0"
|
|
87
|
+
class="weather-link"
|
|
88
|
+
href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
|
|
89
|
+
>
|
|
90
|
+
<asd20-notification-group
|
|
91
|
+
class="asd20-notification-group--status"
|
|
92
|
+
:notifications="activeNotificationsByType.status"
|
|
93
|
+
group-type="status"
|
|
94
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
95
|
+
@toggle-all="$emit('toggle-all')"
|
|
96
|
+
/>
|
|
97
|
+
</a>
|
|
98
|
+
</client-only>
|
|
99
|
+
|
|
100
|
+
<client-only>
|
|
101
|
+
<Asd20BlockSchedule
|
|
102
|
+
v-if="blockEvent"
|
|
103
|
+
:block-event="blockEvent"
|
|
104
|
+
class="block-schedule"
|
|
95
105
|
/>
|
|
96
|
-
</
|
|
97
|
-
</client-only>
|
|
106
|
+
</client-only>
|
|
98
107
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
108
|
+
<client-only>
|
|
109
|
+
<Asd20LanguageTranslation
|
|
110
|
+
v-if="languageCode"
|
|
111
|
+
reversed
|
|
112
|
+
:language-code="languageCode"
|
|
113
|
+
v-on="$listeners"
|
|
114
|
+
/>
|
|
115
|
+
</client-only>
|
|
116
|
+
</div>
|
|
107
117
|
|
|
108
118
|
<!-- Floating Notifications -->
|
|
109
119
|
<client-only>
|
|
@@ -174,6 +184,7 @@ import Asd20NotificationGroup from '../../../components/organisms/Asd20Notificat
|
|
|
174
184
|
import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
|
|
175
185
|
import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
|
|
176
186
|
import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
|
|
187
|
+
import Asd20BlockSchedule from '../../molecules/Asd20BlockSchedule'
|
|
177
188
|
|
|
178
189
|
// Helpers
|
|
179
190
|
import _get from 'lodash-es/get'
|
|
@@ -196,10 +207,35 @@ export default {
|
|
|
196
207
|
Asd20FeedsSection,
|
|
197
208
|
Asd20OrganizationPicker,
|
|
198
209
|
Asd20LanguageTranslation,
|
|
210
|
+
Asd20BlockSchedule,
|
|
199
211
|
},
|
|
200
212
|
props: {
|
|
201
213
|
languageCode: { type: String, default: 'en' },
|
|
202
214
|
},
|
|
215
|
+
mounted() {
|
|
216
|
+
// If nothing is loaded yet, ask parent to load events now.
|
|
217
|
+
if (!this.events || this.events.length === 0) {
|
|
218
|
+
this.$emit('events-in-view')
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
watch: {
|
|
222
|
+
// If the organization changes (picker, route change, etc.), refetch.
|
|
223
|
+
'organization.id': function () {
|
|
224
|
+
this.$emit('events-in-view')
|
|
225
|
+
},
|
|
226
|
+
},
|
|
227
|
+
computed: {
|
|
228
|
+
blockEvent() {
|
|
229
|
+
if (!this.events || this.events.length === 0) return null
|
|
230
|
+
return (
|
|
231
|
+
this.events.find(
|
|
232
|
+
e =>
|
|
233
|
+
Array.isArray(e.calendarKeywords) &&
|
|
234
|
+
e.calendarKeywords.includes('Block Schedule')
|
|
235
|
+
) || null
|
|
236
|
+
)
|
|
237
|
+
},
|
|
238
|
+
},
|
|
203
239
|
}
|
|
204
240
|
</script>
|
|
205
241
|
|
|
@@ -225,34 +261,47 @@ export default {
|
|
|
225
261
|
flex-direction: row;
|
|
226
262
|
align-items: center;
|
|
227
263
|
flex-wrap: wrap;
|
|
264
|
+
margin: space(0.25);
|
|
228
265
|
justify-content: flex-end;
|
|
229
|
-
|
|
266
|
+
width: calc(100% - 1rem);
|
|
230
267
|
position: absolute;
|
|
231
|
-
top: space(0.
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
268
|
+
top: space(0.25);
|
|
269
|
+
.language-wrapper {
|
|
270
|
+
display: flex;
|
|
271
|
+
flex-direction: row;
|
|
272
|
+
align-items: center;
|
|
273
|
+
justify-content: space-between;
|
|
274
|
+
flex-wrap: wrap;
|
|
275
|
+
width: 100%;
|
|
276
|
+
margin-bottom: space(0.25);
|
|
277
|
+
|
|
278
|
+
.weather-link {
|
|
279
|
+
text-decoration: none;
|
|
280
|
+
border: 1px solid var(--website-page__alternate-background-color);
|
|
281
|
+
background: white;
|
|
282
|
+
border-radius: 3rem;
|
|
283
|
+
// position: absolute;
|
|
284
|
+
// right: space(6);
|
|
285
|
+
// top: 0 !important;
|
|
286
|
+
}
|
|
287
|
+
.asd20-language-translation {
|
|
288
|
+
z-index: 2;
|
|
289
|
+
background: rgba(255, 255, 255, 1);
|
|
290
|
+
border-radius: 3rem;
|
|
291
|
+
border: 1px solid var(--website-page__alternate-background-color);
|
|
292
|
+
margin: 0 0.05rem;
|
|
293
|
+
height: 2.75rem;
|
|
294
|
+
&::v-deep .asd20-select-input {
|
|
295
|
+
padding: 0.375rem 0.375rem;
|
|
296
|
+
color: currentColor;
|
|
297
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
298
|
+
}
|
|
254
299
|
}
|
|
255
300
|
}
|
|
301
|
+
.asd20-notification-group--floating {
|
|
302
|
+
position: absolute;
|
|
303
|
+
top: 3.5rem;
|
|
304
|
+
}
|
|
256
305
|
.asd20-language-loader {
|
|
257
306
|
order: 1;
|
|
258
307
|
}
|
|
@@ -285,6 +334,27 @@ export default {
|
|
|
285
334
|
}
|
|
286
335
|
}
|
|
287
336
|
|
|
337
|
+
@media (min-width: 667px) {
|
|
338
|
+
.asd20-school-home-video-template {
|
|
339
|
+
.notification-translation-container {
|
|
340
|
+
margin: 0;
|
|
341
|
+
justify-content: flex-end;
|
|
342
|
+
position: absolute;
|
|
343
|
+
right: space(0.5);
|
|
344
|
+
top: space(0.5);
|
|
345
|
+
width: auto;
|
|
346
|
+
flex-wrap: nowrap;
|
|
347
|
+
.language-wrapper {
|
|
348
|
+
justify-content: flex-end;
|
|
349
|
+
margin-bottom: 0;
|
|
350
|
+
}
|
|
351
|
+
.asd20-notification-group--floating {
|
|
352
|
+
position: unset;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
|
|
288
358
|
@media (min-width: 1024px) {
|
|
289
359
|
.asd20-school-home-video-template {
|
|
290
360
|
display: block;
|
|
@@ -300,6 +370,14 @@ export default {
|
|
|
300
370
|
.notification-translation-container {
|
|
301
371
|
top: space(5.5);
|
|
302
372
|
right: space(3.5);
|
|
373
|
+
.language-wrapper {
|
|
374
|
+
// justify-content: flex-end;
|
|
375
|
+
// flex-wrap: nowrap;
|
|
376
|
+
// margin-bottom: space(0.25);
|
|
377
|
+
// .asd20-language-translation {
|
|
378
|
+
// margin: 0 space(0.25);
|
|
379
|
+
// }
|
|
380
|
+
}
|
|
303
381
|
}
|
|
304
382
|
|
|
305
383
|
.asd20-quicklinks-menu {
|
|
@@ -227,23 +227,23 @@ export default {
|
|
|
227
227
|
.asd20-notification-group--inline {
|
|
228
228
|
margin-top: space(2) !important;
|
|
229
229
|
}
|
|
230
|
-
.asd20-feeds-section {
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
}
|
|
230
|
+
// .asd20-feeds-section {
|
|
231
|
+
// margin-top: space(1);
|
|
232
|
+
// .asd20-swiper-feed:first-child {
|
|
233
|
+
// padding-top: space(2);
|
|
234
|
+
// padding-bottom: space(1);
|
|
235
|
+
// &::after {
|
|
236
|
+
// top: space(1);
|
|
237
|
+
// }
|
|
238
|
+
// }
|
|
239
|
+
// .asd20-swiper-feed:last-child {
|
|
240
|
+
// // margin-top: space(-1);
|
|
241
|
+
// padding-bottom: space(2);
|
|
242
|
+
// &::after {
|
|
243
|
+
// bottom: space(1);
|
|
244
|
+
// }
|
|
245
|
+
// }
|
|
246
|
+
// }
|
|
247
247
|
.intro-message {
|
|
248
248
|
.primary-messaging-section {
|
|
249
249
|
justify-content: center;
|
|
@@ -231,22 +231,22 @@ export default {
|
|
|
231
231
|
.notification-group--inline {
|
|
232
232
|
margin-bottom: space(1);
|
|
233
233
|
}
|
|
234
|
-
.asd20-feeds-section {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
}
|
|
234
|
+
// .asd20-feeds-section {
|
|
235
|
+
// margin-top: space(1);
|
|
236
|
+
// .asd20-swiper-feed:first-child {
|
|
237
|
+
// padding-top: space(2);
|
|
238
|
+
// padding-bottom: space(1);
|
|
239
|
+
// &::after {
|
|
240
|
+
// top: space(1);
|
|
241
|
+
// }
|
|
242
|
+
// }
|
|
243
|
+
// .asd20-swiper-feed:last-child {
|
|
244
|
+
// padding-bottom: space(2);
|
|
245
|
+
// &::after {
|
|
246
|
+
// bottom: space(1);
|
|
247
|
+
// }
|
|
248
|
+
// }
|
|
249
|
+
// }
|
|
250
250
|
.asd20-page-content:not(.intro-message) .primary-messaging-section {
|
|
251
251
|
padding: space(1) space(0);
|
|
252
252
|
}
|
|
@@ -21,6 +21,33 @@
|
|
|
21
21
|
]
|
|
22
22
|
},
|
|
23
23
|
"value": [
|
|
24
|
+
{
|
|
25
|
+
"@search.score": 1,
|
|
26
|
+
"id": null,
|
|
27
|
+
"uid": "MDQwMDAwMDA4MjAwRTAwMDc0QzVCNzEwMUE4MkUwMDgwMDAwMDAwMDc3N0RBQjVFNzBCMkQ4MDEwMDAwMDAwMDAwMDAwMDAwMTAwMDAwMDA4Q0IxNTUwMjk4QzVDNzQ2ODZDNDg3NTI2NTFCMEI5Lg==",
|
|
28
|
+
"type": "event",
|
|
29
|
+
"summary": "Blue Day",
|
|
30
|
+
"description": "No School",
|
|
31
|
+
"location": "AAHS",
|
|
32
|
+
"start": "2025-10-13T07:00:00Z",
|
|
33
|
+
"end": "2025-10-14T07:00:00Z",
|
|
34
|
+
"dtstamp": "2025-10-13T07:00:00Z",
|
|
35
|
+
"class": "",
|
|
36
|
+
"priority": "",
|
|
37
|
+
"transparency": "",
|
|
38
|
+
"status": "",
|
|
39
|
+
"sequence": "",
|
|
40
|
+
"url": null,
|
|
41
|
+
"calendarId": "da74e260-04f3-11ec-a052-79c69b6cfc2x",
|
|
42
|
+
"calendarName": "Blue/Silver Schedule",
|
|
43
|
+
"calendarOrganizationId": "bb6e9cd6-da25-9e6f-5e8d-072b9a7df4f0",
|
|
44
|
+
"calendarOrganizationTitle": "Air Academy High School",
|
|
45
|
+
"calendarCategories": [],
|
|
46
|
+
"calendarKeywords": ["Block Schedule"],
|
|
47
|
+
"calendarUrl": "https://outlook.office365.com/owa/calendar/6a1a45f079b7416f8b301747cd731778@asd20.org/1ff6c80db4dd42c5be39096fdf50a4ee10284553908289904160/calendar.ics",
|
|
48
|
+
"calendarFormat": "ical",
|
|
49
|
+
"calendarColor": "#213f94"
|
|
50
|
+
},
|
|
24
51
|
{
|
|
25
52
|
"@search.score": 1,
|
|
26
53
|
"id": null,
|