@asd20/ui-next 2.8.0 → 2.10.0
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/CHANGELOG.md +19 -0
- package/package.json +2 -1
- package/src/components/organisms/Asd20DistrictVideoFooter/index.vue +10 -2
- package/src/components/organisms/Asd20PageFooter/index.vue +31 -13
- package/src/components/organisms/Asd20PrimaryHeader/index.vue +13 -4
- package/src/components/organisms/Asd20TertiaryHeader/index.vue +12 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
# [2.10.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.9.0...ui-next-v2.10.0) (2026-05-12)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* fix hard coded image references ([6c29df5](https://github.com/academydistrict20/asd20-ui-next/commit/6c29df52660031d64b6154d93bfb486c23545c66))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* implement cache path for hard coded images ([10e39e7](https://github.com/academydistrict20/asd20-ui-next/commit/10e39e720f6ca5f4cc4f7b5954550abbde5405c2))
|
|
14
|
+
|
|
15
|
+
# [2.9.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.8.0...ui-next-v2.9.0) (2026-05-12)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* all templates to be individually/lazy loaded ([f218076](https://github.com/academydistrict20/asd20-ui-next/commit/f218076c8daf23fc0a6446d7f99da888cd2484da))
|
|
21
|
+
|
|
3
22
|
# [2.8.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.6...ui-next-v2.8.0) (2026-05-12)
|
|
4
23
|
|
|
5
24
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@asd20/ui-next",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "ASD20 UI component library for Vue 3.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"./styles.css": "./src/design/tokens.css",
|
|
31
31
|
"./design/*": "./src/design/*",
|
|
32
32
|
"./assets/*": "./src/assets/*",
|
|
33
|
+
"./templates/*": "./src/components/templates/*/index.vue",
|
|
33
34
|
"./package.json": "./package.json"
|
|
34
35
|
},
|
|
35
36
|
"dependencies": {
|
|
@@ -53,6 +53,13 @@ export default {
|
|
|
53
53
|
const isDistrict = this.organization.title === 'Academy District 20'
|
|
54
54
|
const hasExteriorPhoto = this.organization.exteriorPhotoUrl
|
|
55
55
|
|
|
56
|
+
if (isDistrict) {
|
|
57
|
+
return {
|
|
58
|
+
'--asd20-district-footer-image':
|
|
59
|
+
"url('/_media/asd20-images/page-images/asd20-footer-image.jpg')",
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
56
63
|
if (!isDistrict && hasExteriorPhoto) {
|
|
57
64
|
return {
|
|
58
65
|
'--school-exterior-photo-url': `url(${this.organization.exteriorPhotoUrl})`,
|
|
@@ -103,7 +110,8 @@ export default {
|
|
|
103
110
|
border-top: none;
|
|
104
111
|
}
|
|
105
112
|
|
|
106
|
-
:deep(#page-footer.footer-image--school::before)
|
|
113
|
+
:deep(#page-footer.footer-image--school::before),
|
|
114
|
+
:deep(#page-footer.footer-image--school::after) {
|
|
107
115
|
display: none;
|
|
108
116
|
}
|
|
109
117
|
|
|
@@ -112,7 +120,7 @@ export default {
|
|
|
112
120
|
rgba(40, 80, 180, 0.6),
|
|
113
121
|
rgba(40, 80, 180, 0.6)
|
|
114
122
|
),
|
|
115
|
-
|
|
123
|
+
var(--asd20-district-footer-image);
|
|
116
124
|
background-repeat: no-repeat;
|
|
117
125
|
background-size: cover;
|
|
118
126
|
background-position: 20%;
|
|
@@ -49,7 +49,9 @@
|
|
|
49
49
|
>
|
|
50
50
|
<img
|
|
51
51
|
:src="
|
|
52
|
-
websiteLogoProps2.logoImageUrl
|
|
52
|
+
websiteLogoProps2.logoImageUrl
|
|
53
|
+
? websiteLogoProps2.logoImageUrl
|
|
54
|
+
: ''
|
|
53
55
|
"
|
|
54
56
|
:alt="websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''"
|
|
55
57
|
/>
|
|
@@ -115,9 +117,7 @@
|
|
|
115
117
|
/>
|
|
116
118
|
<asd20-button
|
|
117
119
|
v-if="organization.address && organization.address.street1"
|
|
118
|
-
:link="
|
|
119
|
-
`https://www.google.com/maps/dir/${organization.address.street1} ${organization.address.city} ${organization.address.state} ${organization.address.zip}`
|
|
120
|
-
"
|
|
120
|
+
:link="`https://www.google.com/maps/dir/${organization.address.street1} ${organization.address.city} ${organization.address.state} ${organization.address.zip}`"
|
|
121
121
|
icon="map"
|
|
122
122
|
size="md"
|
|
123
123
|
horizontal
|
|
@@ -133,7 +133,11 @@
|
|
|
133
133
|
</asd20-button>
|
|
134
134
|
<asd20-button
|
|
135
135
|
v-if="organization.email"
|
|
136
|
-
:link="
|
|
136
|
+
:link="
|
|
137
|
+
organization.title === 'Academy District 20'
|
|
138
|
+
? `https://www.asd20.org/help-desk/`
|
|
139
|
+
: `mailto:${organization.email}`
|
|
140
|
+
"
|
|
137
141
|
label="Contact Us"
|
|
138
142
|
icon="email"
|
|
139
143
|
size="md"
|
|
@@ -162,7 +166,8 @@
|
|
|
162
166
|
<asd20-social-menu :social-links="socialLinks" />
|
|
163
167
|
|
|
164
168
|
<div class="copyright">
|
|
165
|
-
Copyright © {{ currentYear }} Academy District 20.
|
|
169
|
+
Copyright © {{ currentYear }} Academy District 20.
|
|
170
|
+
All rights reserved.
|
|
166
171
|
</div>
|
|
167
172
|
|
|
168
173
|
<slot />
|
|
@@ -235,7 +240,7 @@ export default {
|
|
|
235
240
|
const hostname = url.hostname
|
|
236
241
|
|
|
237
242
|
// Grab just the first part before ".asd20.org"
|
|
238
|
-
const [subdomain] = hostname.split(
|
|
243
|
+
const [subdomain] = hostname.split('.asd20.org')
|
|
239
244
|
|
|
240
245
|
return `${subdomain}@asd20.org`
|
|
241
246
|
} catch (e) {
|
|
@@ -260,9 +265,16 @@ export default {
|
|
|
260
265
|
const isDistrict = this.organization.title === 'Academy District 20'
|
|
261
266
|
const hasExteriorPhoto = this.organization.exteriorPhotoUrl
|
|
262
267
|
|
|
268
|
+
if (isDistrict) {
|
|
269
|
+
return {
|
|
270
|
+
'--asd20-district-footer-image':
|
|
271
|
+
"url('/_media/asd20-images/page-images/asd20-footer-image.jpg')",
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
|
|
263
275
|
if (!isDistrict && hasExteriorPhoto) {
|
|
264
276
|
return {
|
|
265
|
-
'--school-exterior-photo-url': `url(${this.organization.exteriorPhotoUrl})
|
|
277
|
+
'--school-exterior-photo-url': `url(${this.organization.exteriorPhotoUrl})`,
|
|
266
278
|
}
|
|
267
279
|
}
|
|
268
280
|
return null
|
|
@@ -394,9 +406,11 @@ export default {
|
|
|
394
406
|
}
|
|
395
407
|
|
|
396
408
|
#page-footer.footer-image--district {
|
|
397
|
-
background-image:
|
|
398
|
-
|
|
399
|
-
|
|
409
|
+
background-image: linear-gradient(
|
|
410
|
+
rgba(40, 80, 180, 0.6),
|
|
411
|
+
rgba(40, 80, 180, 0.6)
|
|
412
|
+
),
|
|
413
|
+
var(--asd20-district-footer-image);
|
|
400
414
|
background-repeat: no-repeat;
|
|
401
415
|
background-size: cover;
|
|
402
416
|
background-position: 10%;
|
|
@@ -428,7 +442,11 @@ export default {
|
|
|
428
442
|
left: 0;
|
|
429
443
|
right: 0;
|
|
430
444
|
bottom: 0;
|
|
431
|
-
background: color-mix(
|
|
445
|
+
background: color-mix(
|
|
446
|
+
in srgb,
|
|
447
|
+
var(--website-footer__background-color) 80%,
|
|
448
|
+
transparent
|
|
449
|
+
);
|
|
432
450
|
z-index: 1;
|
|
433
451
|
}
|
|
434
452
|
|
|
@@ -478,7 +496,7 @@ export default {
|
|
|
478
496
|
justify-content: space-between;
|
|
479
497
|
padding-bottom: space(2);
|
|
480
498
|
.footer-optional-logo {
|
|
481
|
-
display:flex;
|
|
499
|
+
display: flex;
|
|
482
500
|
flex-direction: row;
|
|
483
501
|
a {
|
|
484
502
|
display: block;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
|
-
<div
|
|
3
|
+
<div
|
|
4
|
+
class="photostrip"
|
|
5
|
+
:style="photoStripStyle"
|
|
6
|
+
></div>
|
|
4
7
|
|
|
5
8
|
<section
|
|
6
9
|
class="asd20-primary-header"
|
|
@@ -55,6 +58,12 @@ export default {
|
|
|
55
58
|
userGroupsList: { type: Array, default: () => [] },
|
|
56
59
|
},
|
|
57
60
|
computed: {
|
|
61
|
+
photoStripStyle() {
|
|
62
|
+
return {
|
|
63
|
+
'--asd20-photo-strip-image':
|
|
64
|
+
"url('/_media/asd20-images/page-images/ASD20PhotoStrip.jpg')",
|
|
65
|
+
}
|
|
66
|
+
},
|
|
58
67
|
firstMessage() {
|
|
59
68
|
return this.messages.length > 0 ? this.messages[0] : null
|
|
60
69
|
},
|
|
@@ -88,7 +97,7 @@ export default {
|
|
|
88
97
|
.photostrip {
|
|
89
98
|
height: 25vh;
|
|
90
99
|
width: 100%;
|
|
91
|
-
background-image:
|
|
100
|
+
background-image: var(--asd20-photo-strip-image);
|
|
92
101
|
background-size: cover;
|
|
93
102
|
background-position: center;
|
|
94
103
|
background-attachment: scroll;
|
|
@@ -138,7 +147,7 @@ export default {
|
|
|
138
147
|
|
|
139
148
|
/* -webkit-background-clip: text;*/
|
|
140
149
|
/* -webkit-text-fill-color: transparent;*/
|
|
141
|
-
/* background-image:
|
|
150
|
+
/* background-image: var(--asd20-header-divider-image);*/
|
|
142
151
|
/* background-size: 30% auto;*/
|
|
143
152
|
& :deep(.lead) {
|
|
144
153
|
@include fluid-type($base-font-size * 1.2, $base-font-size * 1.4);
|
|
@@ -205,7 +214,7 @@ export default {
|
|
|
205
214
|
/* top: space(-1);*/
|
|
206
215
|
/* left: 0;*/
|
|
207
216
|
/* height: space(3);*/
|
|
208
|
-
/* background-image:
|
|
217
|
+
/* background-image: var(--asd20-header-divider-image);*/
|
|
209
218
|
/* background-size: cover;*/
|
|
210
219
|
/* background-position: 55% top;*/
|
|
211
220
|
/* }*/
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<section
|
|
3
3
|
class="asd20-tertiary-header"
|
|
4
4
|
aria-label="Tertiary message"
|
|
5
|
+
:style="headerStyle"
|
|
5
6
|
>
|
|
6
7
|
<asd20-messaging v-bind="messages[2]"></asd20-messaging>
|
|
7
8
|
</section>
|
|
@@ -24,6 +25,14 @@ export default {
|
|
|
24
25
|
grid: { type: Boolean, default: false },
|
|
25
26
|
forceDisplay: { type: Boolean, default: false },
|
|
26
27
|
},
|
|
28
|
+
computed: {
|
|
29
|
+
headerStyle() {
|
|
30
|
+
return {
|
|
31
|
+
'--asd20-header-divider-image':
|
|
32
|
+
"url('/_media/asd20-images/page-images/asd20-header-divider.jpg')",
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
},
|
|
27
36
|
}
|
|
28
37
|
</script>
|
|
29
38
|
|
|
@@ -49,7 +58,7 @@ export default {
|
|
|
49
58
|
color: var(--website-homepage-header__secondary-title-color);
|
|
50
59
|
/* -webkit-background-clip: text;*/
|
|
51
60
|
/* -webkit-text-fill-color: transparent;*/
|
|
52
|
-
/* background-image:
|
|
61
|
+
/* background-image: var(--asd20-header-divider-image);*/
|
|
53
62
|
/* background-size: 30% auto;*/
|
|
54
63
|
}
|
|
55
64
|
& :deep(.lead) {
|
|
@@ -90,7 +99,7 @@ export default {
|
|
|
90
99
|
top: space(-1);
|
|
91
100
|
left: 0;
|
|
92
101
|
height: space(2);
|
|
93
|
-
background-image:
|
|
102
|
+
background-image: var(--asd20-header-divider-image);
|
|
94
103
|
background-size: cover;
|
|
95
104
|
/* transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);*/
|
|
96
105
|
/* opacity: 0.5;*/
|
|
@@ -103,7 +112,7 @@ export default {
|
|
|
103
112
|
left: 0;
|
|
104
113
|
bottom: space(-2);
|
|
105
114
|
height: space(2);
|
|
106
|
-
background-image:
|
|
115
|
+
background-image: var(--asd20-header-divider-image);
|
|
107
116
|
transform: rotateY(180deg);
|
|
108
117
|
background-size: cover;
|
|
109
118
|
/* transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);*/
|