@asd20/ui 3.2.821 → 3.2.823
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/atoms/Asd20Skeleton/index.vue +28 -0
- package/src/components/organisms/Asd20PageFooter/index.vue +10 -2
- package/src/components/organisms/Asd20SecondaryHeader/index.vue +1 -1
- package/src/components/organisms/Asd20VideoHeaderContent/index.vue +10 -0
- package/src/components/templates/Asd20DistrictHomeTemplate/index.vue +137 -115
- package/src/mixins/mockPageMixin.js +1 -0
- package/src/mixins/pageTemplateMixin.js +3 -0
package/package.json
CHANGED
|
@@ -86,6 +86,34 @@ export default {
|
|
|
86
86
|
width: 60%;
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
+
&--fullpage {
|
|
90
|
+
--width: 100%;
|
|
91
|
+
--height: 2%;
|
|
92
|
+
border-radius: var(--website-shape__radius);
|
|
93
|
+
&__content {
|
|
94
|
+
min-height: 10vh;
|
|
95
|
+
}
|
|
96
|
+
&::before,
|
|
97
|
+
&::after {
|
|
98
|
+
content: '';
|
|
99
|
+
display: block;
|
|
100
|
+
position: absolute;
|
|
101
|
+
background: white;
|
|
102
|
+
left: space(1);
|
|
103
|
+
z-index: 1;
|
|
104
|
+
border-radius: 3px;
|
|
105
|
+
}
|
|
106
|
+
&::before {
|
|
107
|
+
bottom: space(2);
|
|
108
|
+
height: space(0.5);
|
|
109
|
+
width: 80%;
|
|
110
|
+
}
|
|
111
|
+
&::after {
|
|
112
|
+
bottom: space(1);
|
|
113
|
+
height: space(0.5);
|
|
114
|
+
width: 60%;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
89
117
|
}
|
|
90
118
|
|
|
91
119
|
@keyframes skeleton {
|
|
@@ -5,7 +5,11 @@
|
|
|
5
5
|
>
|
|
6
6
|
<div class="logoContainer">
|
|
7
7
|
<asd20-logo
|
|
8
|
-
v-if="
|
|
8
|
+
v-if="
|
|
9
|
+
!['Academy District 20', 'Academy District 20 Insider'].includes(
|
|
10
|
+
organization.title
|
|
11
|
+
)
|
|
12
|
+
"
|
|
9
13
|
:title="mapOrganizationTitle"
|
|
10
14
|
:subtitle="mapOrganizationSubtitle"
|
|
11
15
|
:image="organization.logoImageUrl"
|
|
@@ -17,7 +21,11 @@
|
|
|
17
21
|
wrappable
|
|
18
22
|
/>
|
|
19
23
|
<asd20-district-logo
|
|
20
|
-
v-if="
|
|
24
|
+
v-if="
|
|
25
|
+
['Academy District 20', 'Academy District 20 Insider'].includes(
|
|
26
|
+
organization.title
|
|
27
|
+
)
|
|
28
|
+
"
|
|
21
29
|
tagline
|
|
22
30
|
/>
|
|
23
31
|
<div class="optionalLogo">
|
|
@@ -200,6 +200,16 @@ export default {
|
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
+
@media (min-width: 768px) {
|
|
204
|
+
.asd20-video-header-content {
|
|
205
|
+
.asd20-messaging {
|
|
206
|
+
padding: space(1);
|
|
207
|
+
background: var(--color-minus-alpha)
|
|
208
|
+
var(--website-homepage-header__background-style);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
203
213
|
@media (min-width: 1024px) {
|
|
204
214
|
.asd20-video-header-content {
|
|
205
215
|
width: 80%;
|
|
@@ -1,34 +1,38 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="asd20-district-home-template">
|
|
3
3
|
<!-- Skip Nav -->
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
4
|
+
<div>
|
|
5
|
+
<asd20-skeleton v-if="!_isAuthenticated" preset="fullpage"/>
|
|
6
|
+
<div v-else>
|
|
7
|
+
<!-- Skip Nav -->
|
|
8
|
+
<asd20-skip-to />
|
|
9
|
+
|
|
10
|
+
<!-- Site Navigation -->
|
|
11
|
+
<asd20-site-navigation
|
|
12
|
+
:navigation="navigation"
|
|
13
|
+
:action-items="actionItems"
|
|
14
|
+
@update:menuOpen="$emit('update:menuOpen', $event)"
|
|
15
|
+
:menu-open="menuOpen"
|
|
16
|
+
@update:searchOpen="$emit('update:searchOpen', $event)"
|
|
17
|
+
:search-open="searchOpen"
|
|
18
|
+
:organization="organization"
|
|
19
|
+
:organization-options="organizationOptions"
|
|
20
|
+
>
|
|
21
|
+
</asd20-site-navigation>
|
|
18
22
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
<!-- Banner Notifications -->
|
|
24
|
+
<client-only>
|
|
25
|
+
<asd20-notification-group
|
|
26
|
+
:notifications="activeNotificationsByType.banner"
|
|
27
|
+
group-type="banner"
|
|
28
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
29
|
+
@toggle-all="$emit('toggle-all')"
|
|
30
|
+
></asd20-notification-group>
|
|
31
|
+
</client-only>
|
|
28
32
|
|
|
29
|
-
|
|
33
|
+
<!-- Page Header -->
|
|
30
34
|
|
|
31
|
-
|
|
35
|
+
<!-- <asd20-choice-header
|
|
32
36
|
id="page-header"
|
|
33
37
|
v-if="pageHeaderContent"
|
|
34
38
|
v-bind="pageHeaderContent"
|
|
@@ -58,66 +62,66 @@
|
|
|
58
62
|
</template>
|
|
59
63
|
</asd20-choice-header> -->
|
|
60
64
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<client-only>
|
|
64
|
-
<asd20-organization-picker
|
|
65
|
-
:organization-options="organizationOptions"
|
|
66
|
-
:organization="organization"
|
|
67
|
-
></asd20-organization-picker>
|
|
68
|
-
</client-only>
|
|
69
|
-
<slot name="top" />
|
|
70
|
-
<template>
|
|
71
|
-
<div
|
|
72
|
-
:class="
|
|
73
|
-
activeNotificationsByType.floating.length > 0
|
|
74
|
-
? 'double-notification-wrapper'
|
|
75
|
-
: 'notification-wrapper'
|
|
76
|
-
"
|
|
77
|
-
>
|
|
65
|
+
<!-- Headers -->
|
|
66
|
+
<section class="logo-header">
|
|
78
67
|
<client-only>
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
>
|
|
83
|
-
<asd20-notification-group
|
|
84
|
-
:notifications="activeNotificationsByType.status"
|
|
85
|
-
group-type="status"
|
|
86
|
-
@dismiss="$emit('dismiss-notification', $event)"
|
|
87
|
-
@toggle-all="$emit('toggle-all')"
|
|
88
|
-
/>
|
|
89
|
-
</a>
|
|
68
|
+
<asd20-organization-picker
|
|
69
|
+
:organization-options="organizationOptions"
|
|
70
|
+
:organization="organization"
|
|
71
|
+
></asd20-organization-picker>
|
|
90
72
|
</client-only>
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
<
|
|
73
|
+
<slot name="top" />
|
|
74
|
+
<template>
|
|
75
|
+
<div
|
|
94
76
|
:class="
|
|
95
|
-
activeNotificationsByType.
|
|
96
|
-
? ''
|
|
97
|
-
: '
|
|
77
|
+
activeNotificationsByType.floating.length > 0
|
|
78
|
+
? 'double-notification-wrapper'
|
|
79
|
+
: 'notification-wrapper'
|
|
98
80
|
"
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
81
|
+
>
|
|
82
|
+
<client-only>
|
|
83
|
+
<a
|
|
84
|
+
class="weather-link"
|
|
85
|
+
href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
|
|
86
|
+
>
|
|
87
|
+
<asd20-notification-group
|
|
88
|
+
:notifications="activeNotificationsByType.status"
|
|
89
|
+
group-type="status"
|
|
90
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
91
|
+
@toggle-all="$emit('toggle-all')"
|
|
92
|
+
/>
|
|
93
|
+
</a>
|
|
94
|
+
</client-only>
|
|
95
|
+
|
|
96
|
+
<client-only>
|
|
97
|
+
<Asd20LanguageTranslation
|
|
98
|
+
:class="
|
|
99
|
+
activeNotificationsByType.status.length > 0
|
|
100
|
+
? ''
|
|
101
|
+
: 'translation-button-adjust'
|
|
102
|
+
"
|
|
103
|
+
v-if="languageCode"
|
|
104
|
+
reversed
|
|
105
|
+
:languageCode="languageCode"
|
|
106
|
+
v-on="$listeners"
|
|
107
|
+
/>
|
|
108
|
+
</client-only>
|
|
109
|
+
|
|
110
|
+
<client-only>
|
|
111
|
+
<asd20-notification-group
|
|
112
|
+
class="asd20-notification-group--floating"
|
|
113
|
+
:notifications="activeNotificationsByType.floating"
|
|
114
|
+
:total-dismissed-notifications="totalDismissedNotifications"
|
|
115
|
+
group-type="floating"
|
|
116
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
117
|
+
@toggle-all="$emit('toggle-all')"
|
|
118
|
+
></asd20-notification-group>
|
|
119
|
+
</client-only>
|
|
120
|
+
</div>
|
|
121
|
+
</template>
|
|
122
|
+
</section>
|
|
123
|
+
|
|
124
|
+
<!-- <asd20-primary-header
|
|
121
125
|
id="page-header"
|
|
122
126
|
heading="Apply for School Choice"
|
|
123
127
|
lead="We are now accepting applications for students living in, and out of, our district for the 2022-23 school year."
|
|
@@ -134,7 +138,7 @@
|
|
|
134
138
|
>
|
|
135
139
|
</asd20-primary-header> -->
|
|
136
140
|
|
|
137
|
-
|
|
141
|
+
<!-- <asd20-secondary-header
|
|
138
142
|
heading="Register for Kindergarten"
|
|
139
143
|
lead="Early Kindergarten registration is now open."
|
|
140
144
|
:call-to-action="{
|
|
@@ -143,7 +147,7 @@
|
|
|
143
147
|
}"
|
|
144
148
|
></asd20-secondary-header> -->
|
|
145
149
|
|
|
146
|
-
|
|
150
|
+
<!-- <asd20-tertiary-header
|
|
147
151
|
heading="Attend our Job Fair"
|
|
148
152
|
lead="We're hiring and hope you can attend our Job Fair on March 5, 2022, from 9 a.m. – 3 p.m."
|
|
149
153
|
:call-to-action="{
|
|
@@ -152,11 +156,17 @@
|
|
|
152
156
|
label: 'Register for our Job Fair',
|
|
153
157
|
}"
|
|
154
158
|
></asd20-tertiary-header> -->
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
159
|
+
<asd20-primary-header v-if="messages.length > 0" :messages="messages" />
|
|
160
|
+
<asd20-secondary-header
|
|
161
|
+
v-if="messages.length > 1"
|
|
162
|
+
:messages="messages"
|
|
163
|
+
/>
|
|
164
|
+
<asd20-tertiary-header
|
|
165
|
+
v-if="messages.length > 2"
|
|
166
|
+
:messages="messages"
|
|
167
|
+
/>
|
|
168
|
+
|
|
169
|
+
<!-- <asd20-return-to-school-header
|
|
160
170
|
id="page-header"
|
|
161
171
|
v-if="pageHeaderContent"
|
|
162
172
|
v-bind="pageHeaderContent"
|
|
@@ -186,7 +196,7 @@
|
|
|
186
196
|
</template>
|
|
187
197
|
</asd20-return-to-school-header> -->
|
|
188
198
|
|
|
189
|
-
|
|
199
|
+
<!-- <asd20-page-content
|
|
190
200
|
:primary-messages="primaryMessages"
|
|
191
201
|
:secondary-messages="secondaryMessages"
|
|
192
202
|
>
|
|
@@ -198,36 +208,38 @@
|
|
|
198
208
|
/>
|
|
199
209
|
</asd20-page-content> -->
|
|
200
210
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
211
|
+
<asd20-feeds-section
|
|
212
|
+
:announcements="announcements"
|
|
213
|
+
:announcements-feed-props="announcementsFeedProps"
|
|
214
|
+
@announcements-in-view="$emit('announcements-in-view')"
|
|
215
|
+
:stories="stories"
|
|
216
|
+
:stories-feed-props="storiesFeedProps"
|
|
217
|
+
@stories-in-view="$emit('stories-in-view')"
|
|
218
|
+
:events="events"
|
|
219
|
+
:events-feed-props="eventsFeedProps"
|
|
220
|
+
@events-in-view="$emit('events-in-view')"
|
|
221
|
+
></asd20-feeds-section>
|
|
222
|
+
|
|
223
|
+
<!-- <asd20-factoids-section
|
|
214
224
|
v-if="factoids && factoids.length > 0"
|
|
215
225
|
:factoids="factoids"
|
|
216
226
|
/> -->
|
|
217
227
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
228
|
+
<!-- Quick Links -->
|
|
229
|
+
<asd20-quicklinks-menu :quickLinks="quickLinks">
|
|
230
|
+
<slot name="quicklinks-menu" />
|
|
231
|
+
</asd20-quicklinks-menu>
|
|
222
232
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
233
|
+
<!-- Footer -->
|
|
234
|
+
<asd20-page-footer
|
|
235
|
+
:organization="organization"
|
|
236
|
+
:socialLinks="socialLinks"
|
|
237
|
+
:disclosureLinks="disclosureLinks"
|
|
238
|
+
>
|
|
239
|
+
<slot name="page-footer" />
|
|
240
|
+
</asd20-page-footer>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
231
243
|
</div>
|
|
232
244
|
</template>
|
|
233
245
|
|
|
@@ -240,6 +252,7 @@ import scrollTrack from '../../../directives/scroll-track'
|
|
|
240
252
|
|
|
241
253
|
// Components
|
|
242
254
|
import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
|
|
255
|
+
import Asd20Skeleton from '../../../components/atoms/Asd20Skeleton'
|
|
243
256
|
// import Asd20ReturnToSchoolHeader from '../../../components/organisms/Asd20ReturnToSchoolHeader'
|
|
244
257
|
// import Asd20ChoiceHeader from '../../../components/organisms/Asd20ChoiceHeader'
|
|
245
258
|
import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
|
|
@@ -256,11 +269,19 @@ import Asd20PrimaryHeader from '../../../components/organisms/Asd20PrimaryHeader
|
|
|
256
269
|
import Asd20SecondaryHeader from '../../../components/organisms/Asd20SecondaryHeader'
|
|
257
270
|
import Asd20TertiaryHeader from '../../../components/organisms/Asd20TertiaryHeader'
|
|
258
271
|
import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
|
|
272
|
+
import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
|
|
273
|
+
|
|
259
274
|
|
|
260
275
|
export default {
|
|
261
276
|
name: 'Asd20DistrictHomeTemplate',
|
|
262
277
|
|
|
263
|
-
mixins: [
|
|
278
|
+
mixins: [
|
|
279
|
+
pageTemplateMixin,
|
|
280
|
+
globalPropMixinFactory('isAuthenticated', {
|
|
281
|
+
type: Boolean,
|
|
282
|
+
default: 'true',
|
|
283
|
+
}),
|
|
284
|
+
],
|
|
264
285
|
|
|
265
286
|
directives: { scrollTrack },
|
|
266
287
|
|
|
@@ -272,6 +293,7 @@ export default {
|
|
|
272
293
|
|
|
273
294
|
components: {
|
|
274
295
|
Asd20SkipTo,
|
|
296
|
+
Asd20Skeleton,
|
|
275
297
|
// Asd20ReturnToSchoolHeader,
|
|
276
298
|
// Asd20ChoiceHeader,
|
|
277
299
|
// Asd20PageContent,
|
|
@@ -17,6 +17,9 @@ export default {
|
|
|
17
17
|
// just enought to display them in the picker
|
|
18
18
|
organizationOptions: { type: Array, default: () => [] },
|
|
19
19
|
|
|
20
|
+
// Authentication
|
|
21
|
+
isAuthenticated: { type: Boolean, default: true },
|
|
22
|
+
|
|
20
23
|
// Lanugage
|
|
21
24
|
languageCode: { type: String, default: '' },
|
|
22
25
|
|