@asd20/ui 3.2.533 → 3.2.534
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/organisms/Asd20PrimaryHeader/index.vue +67 -9
- package/src/components/organisms/Asd20SecondaryHeader/index.vue +5 -5
- package/src/components/organisms/Asd20TertiaryHeader/index.vue +42 -13
- package/src/components/templates/Asd20DistrictHomeTemplate/index.vue +0 -4
- package/src/data/page-queries/home-page-query-result.json +3 -3
package/package.json
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<section class="asd20-primary-header">
|
|
3
|
-
<asd20-messaging id="main" v-bind="
|
|
3
|
+
<asd20-messaging id="main" v-bind="firstMessage"></asd20-messaging>
|
|
4
|
+
<div class="image-container">
|
|
5
|
+
<img class="background-image" :src="pageHeaderContent.imageUrl" alt="" />
|
|
6
|
+
</div>
|
|
4
7
|
</section>
|
|
5
8
|
</template>
|
|
6
9
|
|
|
7
10
|
<script>
|
|
8
11
|
import Asd20Messaging from '../../atoms/Asd20Messaging'
|
|
9
|
-
|
|
12
|
+
import _get from 'lodash-es/get'
|
|
10
13
|
|
|
11
14
|
export default {
|
|
12
15
|
name: 'Asd20PrimaryHeader',
|
|
@@ -22,11 +25,40 @@ export default {
|
|
|
22
25
|
omitCallsToAction: { type: Boolean, default: false },
|
|
23
26
|
grid: { type: Boolean, default: false },
|
|
24
27
|
forceDisplay: { type: Boolean, default: false },
|
|
28
|
+
imageUrl: { type: String, default: '' },
|
|
29
|
+
imageCaption: { type: String, default: '' },
|
|
30
|
+
fullscreen: { type: Boolean, default: false },
|
|
31
|
+
detailLink: { type: String, default: '' },
|
|
32
|
+
detailLinkLabel: { type: String, default: '' },
|
|
25
33
|
},
|
|
26
34
|
computed: {
|
|
27
35
|
mq() {
|
|
28
36
|
return this.$mq || 'sm'
|
|
29
37
|
},
|
|
38
|
+
firstMessage() {
|
|
39
|
+
return this.messages.length > 0 ? this.messages[0] : null
|
|
40
|
+
},
|
|
41
|
+
pageHeaderContent() {
|
|
42
|
+
if (!this.firstMessage) return null
|
|
43
|
+
const image =
|
|
44
|
+
_get(this.firstMessage, 'images[0].files', []).find(
|
|
45
|
+
f => f.name === 'full'
|
|
46
|
+
) || null
|
|
47
|
+
|
|
48
|
+
return {
|
|
49
|
+
heading: this.firstMessage.heading || '',
|
|
50
|
+
lead: this.firstMessage.shortDescription || '',
|
|
51
|
+
imageUrl: image ? image.url : '',
|
|
52
|
+
imageCaption: image ? image.alt : '',
|
|
53
|
+
callsToAction: this.firstMessage.callsToAction
|
|
54
|
+
? this.firstMessage.callsToAction
|
|
55
|
+
: '',
|
|
56
|
+
detailLink: this.firstMessage ? this.firstMessage.detailLink : '',
|
|
57
|
+
detailLinkLabel: this.firstMessage
|
|
58
|
+
? this.firstMessage.detailLinkLabel
|
|
59
|
+
: '',
|
|
60
|
+
}
|
|
61
|
+
},
|
|
30
62
|
},
|
|
31
63
|
}
|
|
32
64
|
</script>
|
|
@@ -40,19 +72,24 @@ export default {
|
|
|
40
72
|
display: flex;
|
|
41
73
|
flex-shrink: 0;
|
|
42
74
|
flex-direction: column;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
75
|
+
justify-content: center;
|
|
76
|
+
align-items: center;
|
|
77
|
+
background: var(--color__on-primary);
|
|
78
|
+
background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/textures/asd20-strategic-texture.jpg');
|
|
79
|
+
background-size: cover;
|
|
47
80
|
|
|
48
81
|
color: var(--color__primary);
|
|
49
82
|
padding: space(3) space(1) space(3) space(1);
|
|
50
83
|
margin-top: space(1);
|
|
84
|
+
.asd20-messaging {
|
|
85
|
+
margin-right: 0;
|
|
86
|
+
color: white !important;
|
|
87
|
+
}
|
|
51
88
|
&::v-deep .asd20-messaging__heading {
|
|
52
89
|
@include fluid-type($base-font-size * 1.5, $base-font-size * 2);
|
|
53
90
|
font-weight: 900;
|
|
54
91
|
line-height: 1.5;
|
|
55
|
-
color:
|
|
92
|
+
color: white;
|
|
56
93
|
// -webkit-background-clip: text;
|
|
57
94
|
// -webkit-text-fill-color: transparent;
|
|
58
95
|
// background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
@@ -70,7 +107,7 @@ export default {
|
|
|
70
107
|
);
|
|
71
108
|
flex-direction: column;
|
|
72
109
|
width: 50vw;
|
|
73
|
-
color:
|
|
110
|
+
color: white;
|
|
74
111
|
// background: white;
|
|
75
112
|
&:hover {
|
|
76
113
|
background: var(--color__on-primary-t20);
|
|
@@ -87,13 +124,27 @@ export default {
|
|
|
87
124
|
height: space(2);
|
|
88
125
|
background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
89
126
|
transform: scaleX(-1.5);
|
|
90
|
-
background-size:
|
|
127
|
+
background-size: cover;
|
|
128
|
+
}
|
|
129
|
+
.image-container {
|
|
130
|
+
width: 100%;
|
|
131
|
+
text-align: center;
|
|
132
|
+
img {
|
|
133
|
+
margin-top: space(1);
|
|
134
|
+
max-height: 400px;
|
|
135
|
+
max-width: 100%;
|
|
136
|
+
}
|
|
91
137
|
}
|
|
92
138
|
}
|
|
93
139
|
@media (min-width: 1024px) {
|
|
94
140
|
.asd20-primary-header {
|
|
141
|
+
flex-direction: row;
|
|
142
|
+
justify-content: space-between;
|
|
95
143
|
// background-size: auto 50%;
|
|
96
144
|
padding: space(3) space(2) space(3) space(2);
|
|
145
|
+
.asd20-messaging {
|
|
146
|
+
margin-right: 10%;
|
|
147
|
+
}
|
|
97
148
|
&::v-deep .asd20-button {
|
|
98
149
|
@include asd20-font(
|
|
99
150
|
0.75,
|
|
@@ -104,6 +155,13 @@ export default {
|
|
|
104
155
|
flex-direction: row;
|
|
105
156
|
width: inherit;
|
|
106
157
|
}
|
|
158
|
+
.image-container {
|
|
159
|
+
width: auto;
|
|
160
|
+
img {
|
|
161
|
+
max-width: 800px;
|
|
162
|
+
max-height: 600px;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
107
165
|
}
|
|
108
166
|
}
|
|
109
167
|
</style>
|
|
@@ -45,10 +45,10 @@ export default {
|
|
|
45
45
|
font-weight: 900;
|
|
46
46
|
line-height: 1.5;
|
|
47
47
|
color: var(--website-homepage-header__secondary-title-color);
|
|
48
|
-
-webkit-background-clip: text;
|
|
49
|
-
-webkit-text-fill-color: transparent;
|
|
50
|
-
background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
51
|
-
background-size: 30% auto;
|
|
48
|
+
// -webkit-background-clip: text;
|
|
49
|
+
// -webkit-text-fill-color: transparent;
|
|
50
|
+
// background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
51
|
+
// background-size: 30% auto;
|
|
52
52
|
}
|
|
53
53
|
&::v-deep .lead {
|
|
54
54
|
@include fluid-type($base-font-size * 1.2, $base-font-size * 1.4);
|
|
@@ -89,7 +89,7 @@ export default {
|
|
|
89
89
|
left: 0;
|
|
90
90
|
height: space(2);
|
|
91
91
|
background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
92
|
-
background-size:
|
|
92
|
+
background-size: cover;
|
|
93
93
|
// transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);
|
|
94
94
|
// opacity: 0.5;
|
|
95
95
|
}
|
|
@@ -33,21 +33,28 @@ export default {
|
|
|
33
33
|
display: flex;
|
|
34
34
|
flex-shrink: 0;
|
|
35
35
|
flex-direction: column;
|
|
36
|
-
|
|
37
|
-
background: var(--
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
color: var(--website-homepage-header__secondary-foreground-color);
|
|
37
|
+
background: var(--website-homepage-header__secondary-background-color);
|
|
38
|
+
// background-image: var(--website-homepage-header__secondary-background-style);
|
|
39
|
+
// background-position: bottom right !important;
|
|
40
|
+
// background-size: cover !important;
|
|
41
|
+
padding: space(3) space(1) space(1) space(1);
|
|
40
42
|
|
|
41
43
|
&::v-deep .asd20-messaging__heading {
|
|
42
44
|
@include fluid-type($base-font-size * 1.5, $base-font-size * 2);
|
|
43
45
|
font-weight: 900;
|
|
44
46
|
line-height: 1.5;
|
|
45
|
-
color: var(--
|
|
47
|
+
color: var(--website-homepage-header__secondary-title-color);
|
|
46
48
|
// -webkit-background-clip: text;
|
|
47
49
|
// -webkit-text-fill-color: transparent;
|
|
48
50
|
// background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
49
51
|
// background-size: 30% auto;
|
|
50
52
|
}
|
|
53
|
+
&::v-deep .lead {
|
|
54
|
+
@include fluid-type($base-font-size * 1.2, $base-font-size * 1.4);
|
|
55
|
+
color: var(--website-homepage-header__secondary-foreground-color);
|
|
56
|
+
width: 100%;
|
|
57
|
+
}
|
|
51
58
|
&::v-deep .asd20-messaging__body-content {
|
|
52
59
|
display: none;
|
|
53
60
|
}
|
|
@@ -59,11 +66,17 @@ export default {
|
|
|
59
66
|
700
|
|
60
67
|
);
|
|
61
68
|
flex-direction: column;
|
|
62
|
-
width:
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
width: 70vw;
|
|
70
|
+
margin: space(0.5) auto !important;
|
|
71
|
+
color: var(--website-homepage-header__secondary-button-foreground-color);
|
|
72
|
+
// background: var(--website-homepage-header__secondary-button-background-color);
|
|
65
73
|
&:hover {
|
|
66
|
-
|
|
74
|
+
color: var(
|
|
75
|
+
--website-homepage-header__secondary-button-hover-foreground-color
|
|
76
|
+
);
|
|
77
|
+
background: var(
|
|
78
|
+
--website-homepage-header__secondary-button-hover-background-color
|
|
79
|
+
);
|
|
67
80
|
}
|
|
68
81
|
}
|
|
69
82
|
|
|
@@ -77,7 +90,7 @@ export default {
|
|
|
77
90
|
height: space(2);
|
|
78
91
|
background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
79
92
|
transform: scaleX(-1.5);
|
|
80
|
-
background-size:
|
|
93
|
+
background-size: cover;
|
|
81
94
|
// transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);
|
|
82
95
|
// opacity: 0.5;
|
|
83
96
|
}
|
|
@@ -91,15 +104,30 @@ export default {
|
|
|
91
104
|
height: space(2);
|
|
92
105
|
background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
|
|
93
106
|
transform: scaleX(1.5);
|
|
94
|
-
background-size:
|
|
107
|
+
background-size: cover;
|
|
95
108
|
// transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);
|
|
96
109
|
// opacity: 0.5;
|
|
97
110
|
}
|
|
98
111
|
}
|
|
112
|
+
|
|
113
|
+
@media (min-width: 667px) {
|
|
114
|
+
.asd20-tertiary-header {
|
|
115
|
+
background: var(--color__secondary-t20);
|
|
116
|
+
&::v-deep .lead {
|
|
117
|
+
width: 100%;
|
|
118
|
+
}
|
|
119
|
+
&::v-deep .asd20-button {
|
|
120
|
+
width: 50vw;
|
|
121
|
+
margin: space(0.5) space(0.5) 0 0 !important;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
99
125
|
@media (min-width: 1024px) {
|
|
100
126
|
.asd20-tertiary-header {
|
|
101
|
-
|
|
102
|
-
|
|
127
|
+
padding: space(3) space(3) space(2) space(3);
|
|
128
|
+
&::v-deep .lead {
|
|
129
|
+
width: 80%;
|
|
130
|
+
}
|
|
103
131
|
&::v-deep .asd20-button {
|
|
104
132
|
@include asd20-font(
|
|
105
133
|
0.75,
|
|
@@ -109,6 +137,7 @@ export default {
|
|
|
109
137
|
);
|
|
110
138
|
flex-direction: row;
|
|
111
139
|
width: inherit;
|
|
140
|
+
margin: 0 space(0.5) 0 0 !important;
|
|
112
141
|
}
|
|
113
142
|
}
|
|
114
143
|
}
|
|
@@ -117,8 +117,8 @@
|
|
|
117
117
|
{
|
|
118
118
|
"message": {
|
|
119
119
|
"id": "b3dabeb0-8ea8-11ec-ab02-815b5ba2e0f7",
|
|
120
|
-
"title": "
|
|
121
|
-
"summary": "
|
|
120
|
+
"title": "Jinger Haberer Announced as Next Superintendent",
|
|
121
|
+
"summary": "After a three-month nationwide search, the Academy District 20 Board of Education has named Jinger Haberer as the district’s next superintendent. ",
|
|
122
122
|
"bodyHtml": "<p></p>",
|
|
123
123
|
"status": "Published",
|
|
124
124
|
"slug": "apply-for-school-choice",
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
"filesize": 49836
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
|
-
"url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images/
|
|
168
|
+
"url": "https://asd20websitestorage.blob.core.windows.net/website-files/message-images/bc5389f0-c9ad-11ed-bd43-2722a223ca08/full/Jinger Haberer_800x988_2023-03-23T19_08_37.jpg",
|
|
169
169
|
"name": "full",
|
|
170
170
|
"width": 1280,
|
|
171
171
|
"height": 726,
|