@explorer-1/vue 0.2.70 → 0.2.72
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/BlockCardGrid/BlockCardGrid.stories.js +3 -0
- package/src/components/BlockCardGrid/BlockCardGrid.vue +18 -3
- package/src/components/BlockImage/BlockImageFullBleed.vue +25 -27
- package/src/components/HeroMedia/HeroMedia.vue +38 -40
- package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue +1 -1
- package/src/components/NavDesktopEdu/NavDesktopEdu.vue +1 -1
package/package.json
CHANGED
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
v-if="cards"
|
|
4
4
|
class="BlockCardGrid"
|
|
5
5
|
>
|
|
6
|
-
<div
|
|
7
|
-
:class="`hidden md:grid md:grid-cols-2 lg:grid-cols-3 ${compact ? ' gap-5' : '3xl:grid-cols-4 gap-8'}`"
|
|
8
|
-
>
|
|
6
|
+
<div :class="computedClasses">
|
|
9
7
|
<BlockCardGridItem
|
|
10
8
|
v-for="(card, index) of cards"
|
|
11
9
|
:key="`item-${index}`"
|
|
@@ -65,6 +63,23 @@ export default defineComponent({
|
|
|
65
63
|
type: Array as PropType<CardGridItem[]>,
|
|
66
64
|
default: undefined
|
|
67
65
|
}
|
|
66
|
+
},
|
|
67
|
+
computed: {
|
|
68
|
+
fourColumns() {
|
|
69
|
+
return this.cards && this.cards.length > 3
|
|
70
|
+
},
|
|
71
|
+
computedClasses() {
|
|
72
|
+
let classes = 'hidden md:grid md:grid-cols-2 lg:grid-cols-3'
|
|
73
|
+
if (this.compact) {
|
|
74
|
+
classes += ' gap-5'
|
|
75
|
+
} else {
|
|
76
|
+
classes += ' gap-8'
|
|
77
|
+
}
|
|
78
|
+
if (this.fourColumns) {
|
|
79
|
+
classes += ' xl:grid-cols-4'
|
|
80
|
+
}
|
|
81
|
+
return classes
|
|
82
|
+
}
|
|
68
83
|
}
|
|
69
84
|
})
|
|
70
85
|
</script>
|
|
@@ -109,34 +109,32 @@ export default defineComponent({
|
|
|
109
109
|
v-if="theData"
|
|
110
110
|
class="BlockImageFullBleed"
|
|
111
111
|
>
|
|
112
|
-
<div class="
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
112
|
+
<div class="max-w-screen-3xl mx-auto">
|
|
113
|
+
<MixinFancybox
|
|
114
|
+
v-if="theData.src"
|
|
115
|
+
:src="theData.original || theData.src?.url"
|
|
116
|
+
:caption="theData.caption"
|
|
117
|
+
:credit="theData.credit"
|
|
118
|
+
:detail-url="customDetailUrl || theData.detailUrl"
|
|
119
|
+
>
|
|
120
|
+
<BaseImagePlaceholder
|
|
121
|
+
:aspect-ratio="constrain ? '16:9' : 'none'"
|
|
122
|
+
:responsive-aspect-ratio="constrain ? 'lg:aspect-ratio-two-one' : ''"
|
|
123
|
+
dark-mode
|
|
120
124
|
>
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
:
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
:object-fit-class="constrain ? 'cover' : undefined"
|
|
135
|
-
loading="lazy"
|
|
136
|
-
/>
|
|
137
|
-
</BaseImagePlaceholder>
|
|
138
|
-
</MixinFancybox>
|
|
139
|
-
</div>
|
|
125
|
+
<BaseImage
|
|
126
|
+
v-if="theData.src && theData.srcCropped"
|
|
127
|
+
:src="constrain ? theData.srcCropped.url : theData.src.url"
|
|
128
|
+
:srcset="theData.srcSet && !constrain ? theData.srcSet : theSrcSet"
|
|
129
|
+
:width="constrain ? theData.srcCropped.width : theData.src.width"
|
|
130
|
+
:height="constrain ? theData.srcCropped.height : theData.src.height"
|
|
131
|
+
:alt="theData.alt"
|
|
132
|
+
:image-class="!constrain ? 'w-full h-auto' : undefined"
|
|
133
|
+
:object-fit-class="constrain ? 'cover' : undefined"
|
|
134
|
+
loading="lazy"
|
|
135
|
+
/>
|
|
136
|
+
</BaseImagePlaceholder>
|
|
137
|
+
</MixinFancybox>
|
|
140
138
|
</div>
|
|
141
139
|
<div
|
|
142
140
|
v-if="data && hasCaptionArea"
|
|
@@ -3,52 +3,50 @@
|
|
|
3
3
|
v-if="image || video"
|
|
4
4
|
class="HeroMedia"
|
|
5
5
|
>
|
|
6
|
-
<div class="
|
|
7
|
-
<div class="
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
</template>
|
|
25
|
-
</div>
|
|
26
|
-
<div
|
|
27
|
-
v-if="hasCaptionArea"
|
|
28
|
-
class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
|
|
29
|
-
>
|
|
30
|
-
<button
|
|
31
|
-
class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
|
|
32
|
-
aria-label="Toggle caption"
|
|
33
|
-
@click="toggleCaption"
|
|
34
|
-
>
|
|
35
|
-
<IconInfo
|
|
36
|
-
v-show="!captionVisible"
|
|
37
|
-
class="text-xl"
|
|
38
|
-
/>
|
|
39
|
-
<IconClose v-show="captionVisible" />
|
|
40
|
-
</button>
|
|
41
|
-
</div>
|
|
6
|
+
<div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
|
|
7
|
+
<div class="hero">
|
|
8
|
+
<template v-if="theImageData">
|
|
9
|
+
<img
|
|
10
|
+
v-if="theImageData.src"
|
|
11
|
+
class="object-cover object-center w-full h-full"
|
|
12
|
+
:srcset="theSrcSet"
|
|
13
|
+
:src="theImageData.src.url"
|
|
14
|
+
:width="theImageData.src.width"
|
|
15
|
+
:height="theImageData.src.height"
|
|
16
|
+
:alt="theImageData.alt"
|
|
17
|
+
itemprop="image"
|
|
18
|
+
data-chromatic="ignore"
|
|
19
|
+
/>
|
|
20
|
+
</template>
|
|
21
|
+
<template v-else-if="video">
|
|
22
|
+
<MixinVideoBg :video="video" />
|
|
23
|
+
</template>
|
|
42
24
|
</div>
|
|
43
|
-
|
|
44
25
|
<div
|
|
45
26
|
v-if="hasCaptionArea"
|
|
46
|
-
|
|
47
|
-
class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
|
|
27
|
+
class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
|
|
48
28
|
>
|
|
49
|
-
<
|
|
29
|
+
<button
|
|
30
|
+
class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
|
|
31
|
+
aria-label="Toggle caption"
|
|
32
|
+
@click="toggleCaption"
|
|
33
|
+
>
|
|
34
|
+
<IconInfo
|
|
35
|
+
v-show="!captionVisible"
|
|
36
|
+
class="text-xl"
|
|
37
|
+
/>
|
|
38
|
+
<IconClose v-show="captionVisible" />
|
|
39
|
+
</button>
|
|
50
40
|
</div>
|
|
51
41
|
</div>
|
|
42
|
+
|
|
43
|
+
<div
|
|
44
|
+
v-if="hasCaptionArea"
|
|
45
|
+
:class="captionVisibilityClass"
|
|
46
|
+
class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
|
|
47
|
+
>
|
|
48
|
+
<BaseImageCaption :data="theImageData || customCaption" />
|
|
49
|
+
</div>
|
|
52
50
|
</div>
|
|
53
51
|
</template>
|
|
54
52
|
<script lang="ts">
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
</div>
|
|
53
53
|
<div class="lg:flex lg:items-center lg:relative lg:h-full absolute bottom-0 z-20 w-full">
|
|
54
54
|
<div
|
|
55
|
-
class="bg-gradient-to-b lg:bg-gradient-to-l from-transparent lg:from-transparent xl:from-transparent-w25 to-black lg:to-transparent-black-75 absolute inset-0"
|
|
55
|
+
class="bg-gradient-to-b lg:bg-gradient-to-l from-transparent lg:from-transparent xl:from-transparent-w25 to-black lg:to-transparent-black-75 xl:to-transparent-black-75 absolute inset-0"
|
|
56
56
|
></div>
|
|
57
57
|
<div
|
|
58
58
|
class="lg:px-10 2xl:px-0 lg:pb-10 lg:pt-0 text-contrast container relative px-4 pt-40 pb-24 mx-auto text-white"
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
}"
|
|
13
13
|
>
|
|
14
14
|
<!-- navbar -->
|
|
15
|
-
<div class="header-bg z-10
|
|
15
|
+
<div class="header-bg z-10 absolute inset-0 mx-auto"></div>
|
|
16
16
|
<div class="px-4">
|
|
17
17
|
<div class="h-18 container flex items-center justify-between mx-auto">
|
|
18
18
|
<!-- branding -->
|