@asd20/ui 3.2.827 → 3.2.829
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
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
<div>
|
|
3
|
+
<div class="photostrip"></div>
|
|
4
|
+
|
|
5
|
+
<section class="asd20-primary-header" aria-label="Primary message">
|
|
6
|
+
<asd20-messaging id="main" v-bind="firstMessage"></asd20-messaging>
|
|
7
|
+
<div class="image-container">
|
|
8
|
+
<img
|
|
9
|
+
class="background-image"
|
|
10
|
+
:src="pageHeaderContent.imageUrl"
|
|
11
|
+
alt=""
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
</section>
|
|
15
|
+
</div>
|
|
8
16
|
</template>
|
|
9
17
|
|
|
10
18
|
<script>
|
|
@@ -66,7 +74,20 @@ export default {
|
|
|
66
74
|
<style lang="scss" scoped>
|
|
67
75
|
@import '../../../design/_variables.scss';
|
|
68
76
|
@import '../../../design/_mixins.scss';
|
|
77
|
+
.photostrip {
|
|
78
|
+
height: 25vh;
|
|
79
|
+
width: 100%;
|
|
80
|
+
background-image: url(https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/ASD20PhotoStrip.jpg);
|
|
81
|
+
background-size: cover;
|
|
82
|
+
background-position: center;
|
|
83
|
+
background-attachment: scroll;
|
|
84
|
+
position: relative;
|
|
85
|
+
background-repeat: repeat-x;
|
|
86
|
+
animation: leftscroll 2000s infinite linear;
|
|
87
|
+
border-top: 20px solid var(--color__primary);
|
|
88
|
+
border-bottom: 20px solid var(--color__primary);
|
|
69
89
|
|
|
90
|
+
}
|
|
70
91
|
.asd20-primary-header {
|
|
71
92
|
position: relative;
|
|
72
93
|
display: flex;
|
|
@@ -80,7 +101,8 @@ export default {
|
|
|
80
101
|
|
|
81
102
|
color: var(--color__primary);
|
|
82
103
|
padding: space(3) space(1) space(3) space(1);
|
|
83
|
-
margin-top: space(1);
|
|
104
|
+
// margin-top: space(1);
|
|
105
|
+
|
|
84
106
|
.asd20-messaging {
|
|
85
107
|
margin-right: 0;
|
|
86
108
|
padding-top: space(2);
|
|
@@ -120,18 +142,18 @@ export default {
|
|
|
120
142
|
}
|
|
121
143
|
}
|
|
122
144
|
|
|
123
|
-
&::before {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
145
|
+
// &::before {
|
|
146
|
+
// content: '';
|
|
147
|
+
// display: block;
|
|
148
|
+
// position: absolute;
|
|
149
|
+
// width: 100%;
|
|
150
|
+
// top: space(-1);
|
|
151
|
+
// left: 0;
|
|
152
|
+
// height: space(3);
|
|
153
|
+
// background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
154
|
+
// background-size: cover;
|
|
155
|
+
// background-position: 55% top;
|
|
156
|
+
// }
|
|
135
157
|
.image-container {
|
|
136
158
|
width: 100%;
|
|
137
159
|
text-align: center;
|
|
@@ -142,7 +164,20 @@ export default {
|
|
|
142
164
|
}
|
|
143
165
|
}
|
|
144
166
|
}
|
|
167
|
+
|
|
168
|
+
@keyframes leftscroll {
|
|
169
|
+
from {
|
|
170
|
+
background-position: 0%;
|
|
171
|
+
}
|
|
172
|
+
to {
|
|
173
|
+
background-position: 10000%;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
145
177
|
@media (min-width: 1024px) {
|
|
178
|
+
.photostrip {
|
|
179
|
+
height: 40vh;
|
|
180
|
+
}
|
|
146
181
|
.asd20-primary-header {
|
|
147
182
|
flex-direction: row;
|
|
148
183
|
justify-content: space-between;
|
|
@@ -2,246 +2,125 @@
|
|
|
2
2
|
<div class="asd20-district-home-template">
|
|
3
3
|
<!-- Skip Nav -->
|
|
4
4
|
<div>
|
|
5
|
-
<!--
|
|
6
|
-
<
|
|
7
|
-
|
|
5
|
+
<!-- Skip Nav -->
|
|
6
|
+
<asd20-skip-to />
|
|
7
|
+
|
|
8
|
+
<!-- Site Navigation -->
|
|
9
|
+
<asd20-site-navigation
|
|
10
|
+
:navigation="navigation"
|
|
11
|
+
:action-items="actionItems"
|
|
12
|
+
@update:menuOpen="$emit('update:menuOpen', $event)"
|
|
13
|
+
:menu-open="menuOpen"
|
|
14
|
+
@update:searchOpen="$emit('update:searchOpen', $event)"
|
|
15
|
+
:search-open="searchOpen"
|
|
16
|
+
:organization="organization"
|
|
17
|
+
:organization-options="organizationOptions"
|
|
18
|
+
>
|
|
19
|
+
</asd20-site-navigation>
|
|
20
|
+
|
|
21
|
+
<!-- Banner Notifications -->
|
|
22
|
+
<client-only>
|
|
23
|
+
<asd20-notification-group
|
|
24
|
+
:notifications="activeNotificationsByType.banner"
|
|
25
|
+
group-type="banner"
|
|
26
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
27
|
+
@toggle-all="$emit('toggle-all')"
|
|
28
|
+
></asd20-notification-group>
|
|
8
29
|
</client-only>
|
|
9
|
-
<div v-else>
|
|
10
|
-
<!-- Skip Nav -->
|
|
11
|
-
<asd20-skip-to />
|
|
12
|
-
|
|
13
|
-
<!-- Site Navigation -->
|
|
14
|
-
<asd20-site-navigation
|
|
15
|
-
:navigation="navigation"
|
|
16
|
-
:action-items="actionItems"
|
|
17
|
-
@update:menuOpen="$emit('update:menuOpen', $event)"
|
|
18
|
-
:menu-open="menuOpen"
|
|
19
|
-
@update:searchOpen="$emit('update:searchOpen', $event)"
|
|
20
|
-
:search-open="searchOpen"
|
|
21
|
-
:organization="organization"
|
|
22
|
-
:organization-options="organizationOptions"
|
|
23
|
-
>
|
|
24
|
-
</asd20-site-navigation>
|
|
25
|
-
|
|
26
|
-
<!-- Banner Notifications -->
|
|
27
|
-
<client-only>
|
|
28
|
-
<asd20-notification-group
|
|
29
|
-
:notifications="activeNotificationsByType.banner"
|
|
30
|
-
group-type="banner"
|
|
31
|
-
@dismiss="$emit('dismiss-notification', $event)"
|
|
32
|
-
@toggle-all="$emit('toggle-all')"
|
|
33
|
-
></asd20-notification-group>
|
|
34
|
-
</client-only>
|
|
35
|
-
|
|
36
|
-
<!-- Page Header -->
|
|
37
|
-
|
|
38
|
-
<!-- <asd20-choice-header
|
|
39
|
-
id="page-header"
|
|
40
|
-
v-if="pageHeaderContent"
|
|
41
|
-
v-bind="pageHeaderContent"
|
|
42
|
-
>
|
|
43
|
-
<asd20-district-logo slot="top" v-show="mq !== 'sm' && mq !== 'md'" />
|
|
44
|
-
|
|
45
|
-
<template slot="top">
|
|
46
|
-
<client-only>
|
|
47
|
-
<asd20-notification-group
|
|
48
|
-
:notifications="activeNotificationsByType.status"
|
|
49
|
-
group-type="status"
|
|
50
|
-
@dismiss="$emit('dismiss-notification', $event)"
|
|
51
|
-
@toggle-all="$emit('toggle-all')"
|
|
52
|
-
/>
|
|
53
|
-
</client-only>
|
|
54
30
|
|
|
31
|
+
<!-- Headers -->
|
|
32
|
+
<section class="logo-header">
|
|
55
33
|
<client-only>
|
|
56
|
-
<asd20-
|
|
57
|
-
|
|
58
|
-
:
|
|
59
|
-
|
|
60
|
-
group-type="floating"
|
|
61
|
-
@dismiss="$emit('dismiss-notification', $event)"
|
|
62
|
-
@toggle-all="$emit('toggle-all')"
|
|
63
|
-
></asd20-notification-group>
|
|
34
|
+
<asd20-organization-picker
|
|
35
|
+
:organization-options="organizationOptions"
|
|
36
|
+
:organization="organization"
|
|
37
|
+
></asd20-organization-picker>
|
|
64
38
|
</client-only>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
:class="
|
|
80
|
-
activeNotificationsByType.floating.length > 0
|
|
81
|
-
? 'double-notification-wrapper'
|
|
82
|
-
: 'notification-wrapper'
|
|
83
|
-
"
|
|
84
|
-
>
|
|
85
|
-
<client-only>
|
|
86
|
-
<a
|
|
87
|
-
class="weather-link"
|
|
88
|
-
href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
|
|
89
|
-
>
|
|
90
|
-
<asd20-notification-group
|
|
91
|
-
:notifications="activeNotificationsByType.status"
|
|
92
|
-
group-type="status"
|
|
93
|
-
@dismiss="$emit('dismiss-notification', $event)"
|
|
94
|
-
@toggle-all="$emit('toggle-all')"
|
|
95
|
-
/>
|
|
96
|
-
</a>
|
|
97
|
-
</client-only>
|
|
98
|
-
|
|
99
|
-
<client-only>
|
|
100
|
-
<Asd20LanguageTranslation
|
|
101
|
-
:class="
|
|
102
|
-
activeNotificationsByType.status.length > 0
|
|
103
|
-
? ''
|
|
104
|
-
: 'translation-button-adjust'
|
|
105
|
-
"
|
|
106
|
-
v-if="languageCode"
|
|
107
|
-
reversed
|
|
108
|
-
:languageCode="languageCode"
|
|
109
|
-
v-on="$listeners"
|
|
110
|
-
/>
|
|
111
|
-
</client-only>
|
|
112
|
-
|
|
113
|
-
<client-only>
|
|
39
|
+
<slot name="top" />
|
|
40
|
+
<template>
|
|
41
|
+
<div
|
|
42
|
+
:class="
|
|
43
|
+
activeNotificationsByType.floating.length > 0
|
|
44
|
+
? 'double-notification-wrapper'
|
|
45
|
+
: 'notification-wrapper'
|
|
46
|
+
"
|
|
47
|
+
>
|
|
48
|
+
<client-only>
|
|
49
|
+
<a
|
|
50
|
+
class="weather-link"
|
|
51
|
+
href="https://www.asd20.org/alerts-and-communication/weather-related-communication/"
|
|
52
|
+
>
|
|
114
53
|
<asd20-notification-group
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
:total-dismissed-notifications="totalDismissedNotifications"
|
|
118
|
-
group-type="floating"
|
|
54
|
+
:notifications="activeNotificationsByType.status"
|
|
55
|
+
group-type="status"
|
|
119
56
|
@dismiss="$emit('dismiss-notification', $event)"
|
|
120
57
|
@toggle-all="$emit('toggle-all')"
|
|
121
|
-
|
|
122
|
-
</
|
|
123
|
-
</
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
/>
|
|
171
|
-
|
|
172
|
-
<!-- <asd20-return-to-school-header
|
|
173
|
-
id="page-header"
|
|
174
|
-
v-if="pageHeaderContent"
|
|
175
|
-
v-bind="pageHeaderContent"
|
|
176
|
-
>
|
|
177
|
-
<asd20-district-logo slot="top" v-show="mq !== 'sm' && mq !== 'md'" />
|
|
178
|
-
|
|
179
|
-
<template slot="top">
|
|
180
|
-
<client-only>
|
|
181
|
-
<asd20-notification-group
|
|
182
|
-
:notifications="activeNotificationsByType.status"
|
|
183
|
-
group-type="status"
|
|
184
|
-
@dismiss="$emit('dismiss-notification', $event)"
|
|
185
|
-
@toggle-all="$emit('toggle-all')"
|
|
186
|
-
/>
|
|
187
|
-
</client-only>
|
|
188
|
-
|
|
189
|
-
<client-only>
|
|
190
|
-
<asd20-notification-group
|
|
191
|
-
class="asd20-notification-group--floating"
|
|
192
|
-
:notifications="activeNotificationsByType.floating"
|
|
193
|
-
:total-dismissed-notifications="totalDismissedNotifications"
|
|
194
|
-
group-type="floating"
|
|
195
|
-
@dismiss="$emit('dismiss-notification', $event)"
|
|
196
|
-
@toggle-all="$emit('toggle-all')"
|
|
197
|
-
></asd20-notification-group>
|
|
198
|
-
</client-only>
|
|
199
|
-
</template>
|
|
200
|
-
</asd20-return-to-school-header> -->
|
|
201
|
-
|
|
202
|
-
<!-- <asd20-page-content
|
|
203
|
-
:primary-messages="primaryMessages"
|
|
204
|
-
:secondary-messages="secondaryMessages"
|
|
205
|
-
>
|
|
206
|
-
<slot />
|
|
207
|
-
|
|
208
|
-
<asd20-factoids-section
|
|
209
|
-
v-if="factoids && factoids.length > 0"
|
|
210
|
-
:factoids="factoids"
|
|
211
|
-
/>
|
|
212
|
-
</asd20-page-content> -->
|
|
213
|
-
|
|
214
|
-
<asd20-feeds-section
|
|
215
|
-
:announcements="announcements"
|
|
216
|
-
:announcements-feed-props="announcementsFeedProps"
|
|
217
|
-
@announcements-in-view="$emit('announcements-in-view')"
|
|
218
|
-
:stories="stories"
|
|
219
|
-
:stories-feed-props="storiesFeedProps"
|
|
220
|
-
@stories-in-view="$emit('stories-in-view')"
|
|
221
|
-
:events="events"
|
|
222
|
-
:events-feed-props="eventsFeedProps"
|
|
223
|
-
@events-in-view="$emit('events-in-view')"
|
|
224
|
-
></asd20-feeds-section>
|
|
225
|
-
|
|
226
|
-
<!-- <asd20-factoids-section
|
|
58
|
+
/>
|
|
59
|
+
</a>
|
|
60
|
+
</client-only>
|
|
61
|
+
|
|
62
|
+
<client-only>
|
|
63
|
+
<Asd20LanguageTranslation
|
|
64
|
+
:class="
|
|
65
|
+
activeNotificationsByType.status.length > 0
|
|
66
|
+
? ''
|
|
67
|
+
: 'translation-button-adjust'
|
|
68
|
+
"
|
|
69
|
+
v-if="languageCode"
|
|
70
|
+
reversed
|
|
71
|
+
:languageCode="languageCode"
|
|
72
|
+
v-on="$listeners"
|
|
73
|
+
/>
|
|
74
|
+
</client-only>
|
|
75
|
+
|
|
76
|
+
<client-only>
|
|
77
|
+
<asd20-notification-group
|
|
78
|
+
class="asd20-notification-group--floating"
|
|
79
|
+
:notifications="activeNotificationsByType.floating"
|
|
80
|
+
:total-dismissed-notifications="totalDismissedNotifications"
|
|
81
|
+
group-type="floating"
|
|
82
|
+
@dismiss="$emit('dismiss-notification', $event)"
|
|
83
|
+
@toggle-all="$emit('toggle-all')"
|
|
84
|
+
></asd20-notification-group>
|
|
85
|
+
</client-only>
|
|
86
|
+
</div>
|
|
87
|
+
</template>
|
|
88
|
+
</section>
|
|
89
|
+
|
|
90
|
+
<asd20-primary-header v-if="messages.length > 0" :messages="messages" />
|
|
91
|
+
<asd20-secondary-header v-if="messages.length > 1" :messages="messages" />
|
|
92
|
+
<asd20-tertiary-header v-if="messages.length > 2" :messages="messages" />
|
|
93
|
+
|
|
94
|
+
<asd20-feeds-section
|
|
95
|
+
:announcements="announcements"
|
|
96
|
+
:announcements-feed-props="announcementsFeedProps"
|
|
97
|
+
@announcements-in-view="$emit('announcements-in-view')"
|
|
98
|
+
:stories="stories"
|
|
99
|
+
:stories-feed-props="storiesFeedProps"
|
|
100
|
+
@stories-in-view="$emit('stories-in-view')"
|
|
101
|
+
:events="events"
|
|
102
|
+
:events-feed-props="eventsFeedProps"
|
|
103
|
+
@events-in-view="$emit('events-in-view')"
|
|
104
|
+
></asd20-feeds-section>
|
|
105
|
+
|
|
106
|
+
<!-- <asd20-factoids-section
|
|
227
107
|
v-if="factoids && factoids.length > 0"
|
|
228
108
|
:factoids="factoids"
|
|
229
109
|
/> -->
|
|
230
110
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
</div>
|
|
111
|
+
<!-- Quick Links -->
|
|
112
|
+
<asd20-quicklinks-menu :quickLinks="quickLinks">
|
|
113
|
+
<slot name="quicklinks-menu" />
|
|
114
|
+
</asd20-quicklinks-menu>
|
|
115
|
+
|
|
116
|
+
<!-- Footer -->
|
|
117
|
+
<asd20-page-footer
|
|
118
|
+
:organization="organization"
|
|
119
|
+
:socialLinks="socialLinks"
|
|
120
|
+
:disclosureLinks="disclosureLinks"
|
|
121
|
+
>
|
|
122
|
+
<slot name="page-footer" />
|
|
123
|
+
</asd20-page-footer>
|
|
245
124
|
</div>
|
|
246
125
|
</div>
|
|
247
126
|
</template>
|
|
@@ -255,7 +134,7 @@ import scrollTrack from '../../../directives/scroll-track'
|
|
|
255
134
|
|
|
256
135
|
// Components
|
|
257
136
|
import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
|
|
258
|
-
import Asd20Skeleton from '../../../components/atoms/Asd20Skeleton'
|
|
137
|
+
// import Asd20Skeleton from '../../../components/atoms/Asd20Skeleton'
|
|
259
138
|
// import Asd20ReturnToSchoolHeader from '../../../components/organisms/Asd20ReturnToSchoolHeader'
|
|
260
139
|
// import Asd20ChoiceHeader from '../../../components/organisms/Asd20ChoiceHeader'
|
|
261
140
|
import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
|
|
@@ -272,17 +151,17 @@ import Asd20PrimaryHeader from '../../../components/organisms/Asd20PrimaryHeader
|
|
|
272
151
|
import Asd20SecondaryHeader from '../../../components/organisms/Asd20SecondaryHeader'
|
|
273
152
|
import Asd20TertiaryHeader from '../../../components/organisms/Asd20TertiaryHeader'
|
|
274
153
|
import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
|
|
275
|
-
import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
|
|
154
|
+
// import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
|
|
276
155
|
|
|
277
156
|
export default {
|
|
278
157
|
name: 'Asd20DistrictHomeTemplate',
|
|
279
158
|
|
|
280
159
|
mixins: [
|
|
281
160
|
pageTemplateMixin,
|
|
282
|
-
globalPropMixinFactory('isAuthenticated', {
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
}),
|
|
161
|
+
// globalPropMixinFactory('isAuthenticated', {
|
|
162
|
+
// type: Boolean,
|
|
163
|
+
// default: true,
|
|
164
|
+
// }),
|
|
286
165
|
],
|
|
287
166
|
|
|
288
167
|
directives: { scrollTrack },
|
|
@@ -295,7 +174,7 @@ export default {
|
|
|
295
174
|
|
|
296
175
|
components: {
|
|
297
176
|
Asd20SkipTo,
|
|
298
|
-
Asd20Skeleton,
|
|
177
|
+
// Asd20Skeleton,
|
|
299
178
|
// Asd20ReturnToSchoolHeader,
|
|
300
179
|
// Asd20ChoiceHeader,
|
|
301
180
|
// Asd20PageContent,
|
|
@@ -428,9 +307,12 @@ export default {
|
|
|
428
307
|
width: 100%;
|
|
429
308
|
}
|
|
430
309
|
.double-notification-wrapper {
|
|
310
|
+
position: absolute;
|
|
311
|
+
top: space(1);
|
|
312
|
+
right: space(0.5);
|
|
431
313
|
display: flex;
|
|
432
314
|
flex-direction: row;
|
|
433
|
-
justify-content:
|
|
315
|
+
justify-content: flex-end;
|
|
434
316
|
width: 100%;
|
|
435
317
|
align-items: center;
|
|
436
318
|
flex-wrap: wrap;
|
|
@@ -440,6 +322,7 @@ export default {
|
|
|
440
322
|
top: 20%;
|
|
441
323
|
}
|
|
442
324
|
}
|
|
325
|
+
|
|
443
326
|
.asd20-primary-header,
|
|
444
327
|
.asd20-secondary-header,
|
|
445
328
|
.asd20-tertiary-header {
|
|
@@ -470,7 +353,7 @@ export default {
|
|
|
470
353
|
right: 0 !important;
|
|
471
354
|
}
|
|
472
355
|
.double-notification-wrapper {
|
|
473
|
-
padding-right: space(1);
|
|
356
|
+
// padding-right: space(1);
|
|
474
357
|
justify-content: flex-end !important;
|
|
475
358
|
}
|
|
476
359
|
}
|