Skip to content

Commit a17806a

Browse files
LZylstraLZylstra
authored
Masonry Grid and Carousel Updates (#182)
* Masonry Grid link whole card * Fix for bouncing buttons
1 parent 0144c72 commit a17806a

File tree

2 files changed

+82
-69
lines changed

2 files changed

+82
-69
lines changed

‎components/Block/Carousel/CarouselCard.vue‎

Lines changed: 69 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,20 @@ const { data: cardData } = useAsyncData(`carousel-card-${props.uuid}`, () =>
3131
<template>
3232
<div :class="['carousel-card-content', { 'carousel-card--focused': props.isFocused }]">
3333
<BaseDirectusImage v-if="cardData?.image" :uuid="cardData?.image as string" :alt="cardData?.title ?? ''" />
34-
<Transition name="fade">
35-
<div v-show="props.isFocused" class="card-content">
34+
<div class="content-container">
35+
<div class="card-content" :class="{ 'is-hidden': !props.isFocused }">
3636
<h2 class="title">{{ cardData?.title }}</h2>
3737
<p v-if="cardData?.description" class="description">{{ cardData?.description }}</p>
38-
<BlockButtonGroup
39-
v-if="cardData?.block_button_group"
40-
class="custom-button-group"
41-
:uuid="cardData?.block_button_group.id as string"
42-
:align="cardData.block_button_group.alignment"
43-
/>
38+
<div class="button-container">
39+
<BlockButtonGroup
40+
v-if="cardData?.block_button_group"
41+
class="custom-button-group"
42+
:uuid="cardData?.block_button_group.id as string"
43+
:align="cardData.block_button_group.alignment"
44+
/>
45+
</div>
4446
</div>
45-
</Transition>
47+
</div>
4648
</div>
4749
</template>
4850
<style lang="scss" scoped>
@@ -56,59 +58,71 @@ const { data: cardData } = useAsyncData(`carousel-card-${props.uuid}`, () =>
5658
img {
5759
border-radius: var(--rounded-lg);
5860
margin-bottom: var(--space-3);
61+
width: 100%;
62+
object-fit: cover;
5963
}
60-
.card-content {
61-
display: flex;
62-
flex-direction: column;
63-
align-items: center;
64-
gap: var(--space-4);
65-
padding-bottom: var(--space-2);
66-
}
67-
h2 {
68-
font-style: normal;
69-
font-family: var(--family-display);
70-
background: linear-gradient(143deg, var(--primary-500) 0%, var(--secondary) 100%);
71-
background-clip: text;
72-
-webkit-background-clip: text;
73-
-webkit-text-fill-color: transparent;
74-
position: relative;
75-
z-index: 1;
76-
max-width: var(--space-80);
77-
word-wrap: break-word;
78-
line-height: var(--line-height-2xl);
64+
}
7965
80-
overflow-wrap: break-word;
81-
}
82-
.description {
83-
order: 1;
84-
min-height: calc(var(--line-height-2xl) * 1.5);
85-
@media (max-width: 768px) {
86-
max-width: 80%;
87-
}
88-
}
89-
.custom-button-group {
90-
order: 2;
91-
display: flex;
92-
flex-wrap: nowrap !important;
93-
justify-content: center;
94-
align-items: center;
95-
gap: var(--space-4);
96-
}
97-
.custom-button-group :deep(.button-group) {
98-
display: flex;
99-
flex-wrap: nowrap !important;
100-
justify-content: center;
101-
align-items: center;
102-
}
66+
.content-container {
67+
position: relative;
68+
width: 100%;
10369
}
104-
.fade-enter-active,
105-
.fade-leave-active {
70+
71+
.card-content {
72+
display: flex;
73+
flex-direction: column;
74+
align-items: center;
75+
gap: var(--space-4);
76+
padding-bottom: var(--space-2);
10677
transition: opacity 0.3s ease-in-out;
10778
}
108-
.fade-enter-from,
109-
.fade-leave-to {
79+
80+
.is-hidden {
11081
opacity: 0;
82+
pointer-events: none;
11183
}
84+
85+
h2 {
86+
font-style: normal;
87+
font-family: var(--family-display);
88+
background: linear-gradient(143deg, var(--primary-500) 0%, var(--secondary) 100%);
89+
background-clip: text;
90+
-webkit-background-clip: text;
91+
-webkit-text-fill-color: transparent;
92+
position: relative;
93+
z-index: 1;
94+
max-width: var(--space-80);
95+
word-wrap: break-word;
96+
line-height: var(--line-height-2xl);
97+
overflow-wrap: break-word;
98+
}
99+
.description {
100+
order: 1;
101+
min-height: calc(var(--line-height-2xl) * 1.5);
102+
@media (max-width: 768px) {
103+
max-width: 80%;
104+
}
105+
}
106+
107+
.button-container {
108+
order: 2;
109+
width: 100%;
110+
}
111+
112+
.custom-button-group {
113+
display: flex;
114+
flex-direction: column;
115+
align-items: center;
116+
gap: var(--space-4);
117+
}
118+
119+
.custom-button-group :deep(.button-group) {
120+
display: flex;
121+
flex-direction: column;
122+
align-items: center;
123+
gap: var(--space-4);
124+
}
125+
112126
@media (max-width: 768px) {
113127
.carousel-card-content {
114128
margin-left: var(--space-0);

‎components/Block/MasonryGrid/MasonryGridCard.vue‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,17 @@ const isExternal = computed(() => !!cardData.value?.external_url);
5050
</script>
5151

5252
<template>
53-
<div v-if="cardData" :class="['masonry-card-content', cardData.size === 'double' ? 'double-card' : 'single-card']">
53+
<a
54+
v-if="cardData"
55+
:href="titleHref"
56+
:target="isExternal ? '_blank' : '_self'"
57+
rel="noopener noreferrer"
58+
:class="['masonry-card-content', cardData.size === 'double' ? 'double-card' : 'single-card']"
59+
>
5460
<BaseDirectusImage v-if="cardData?.image" :uuid="cardData?.image as string" :alt="cardData?.title ?? ''" />
55-
<h2 class="title">
56-
<a :href="titleHref" :target="isExternal ? '_blank' : '_self'" rel="noopener noreferrer">
57-
{{ cardData?.title }}
58-
</a>
59-
</h2>
61+
<h2 class="title">{{ cardData?.title }}</h2>
6062
<p v-if="cardData?.description" class="description">{{ cardData.description }}</p>
61-
</div>
63+
</a>
6264
</template>
6365

6466
<style lang="scss" scoped>
@@ -69,6 +71,8 @@ const isExternal = computed(() => !!cardData.value?.external_url);
6971
position: relative;
7072
height: 290px;
7173
transition: transform 0.3s ease;
74+
display: block;
75+
text-decoration: none;
7276
7377
&.single-card {
7478
flex: 1 1 290px;
@@ -85,7 +89,7 @@ const isExternal = computed(() => !!cardData.value?.external_url);
8589
filter: grayscale(0%) opacity(100%);
8690
}
8791
88-
.title a {
92+
.title {
8993
color: var(--primary-500);
9094
}
9195
}
@@ -108,12 +112,7 @@ const isExternal = computed(() => !!cardData.value?.external_url);
108112
font-size: var(--font-size-2xl);
109113
font-weight: 600;
110114
line-height: var(--line-height-2xl);
111-
112-
a {
113-
color: inherit;
114-
text-decoration: none;
115-
transition: color 0.3s ease;
116-
}
115+
transition: color 0.3s ease;
117116
}
118117
119118
.description {

0 commit comments

Comments
 (0)