Skip to content

Commit 990c668

Browse files
mhewsonmhewson
committed
updating example to use media object and multiple overlays
1 parent 8de174e commit 990c668

1 file changed

Lines changed: 229 additions & 36 deletions

File tree

‎src/components/objectOverlay/examples/ObjectOverlay.vue‎

Lines changed: 229 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,237 @@
11
<script setup lang="ts">
22
import CdrObjectOverlay from '../CdrObjectOverlay.vue';
3+
import CdrMediaObject from '../../mediaObject/CdrMediaObject.vue';
4+
import CdrSurface from '../../surface/CdrSurface.vue';
5+
import CdrImg from '../../image/CdrImg.vue';
6+
import CdrText from '../../text/CdrText.vue';
7+
import CdrBody from '../../text/presets/CdrBody.vue';
8+
import CdrTitle from '../../title/CdrTitle.vue';
9+
import cedarImage from '../../../dev/static/cedar-1920x1080.jpg';
10+
import cedarSmallImage from '../../../dev/static/cedar-50x50.jpg';
311
412
defineOptions({ name: 'ObjectOverlay' });
13+
14+
const contentShort = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
15+
const contentLong = `${contentShort} ${contentShort} ${contentShort}`;
16+
17+
const overlayExamples = [
18+
{
19+
label: 'Overlay with column align end and row align center',
20+
props: {
21+
overlay: true,
22+
overlayColumnAlign: 'end',
23+
overlayRowAlign: 'center',
24+
},
25+
},
26+
{
27+
label: 'Overlay with column align start and row align start',
28+
props: {
29+
overlay: true,
30+
overlayColumnAlign: 'start',
31+
overlayRowAlign: 'start',
32+
},
33+
},
34+
{
35+
label: 'Overlay with column align center and row align end',
36+
props: {
37+
overlay: true,
38+
overlayColumnAlign: 'center',
39+
overlayRowAlign: 'end',
40+
},
41+
},
42+
{
43+
label: 'Overlay with column align center and row align center',
44+
props: {
45+
overlay: true,
46+
overlayColumnAlign: 'center',
47+
overlayRowAlign: 'center',
48+
},
49+
},
50+
];
551
</script>
652

753
<template>
8-
<CdrObjectOverlay position="top-right" margin="half-x" gradient="to-top">
9-
<template #container>
10-
<img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" :style="{ display: 'block' }" />
11-
</template>
12-
<template #content>
13-
<div class="overlay-content" :style="{ backgroundColor: '#fff', padding: '20px' }">
14-
Positioned Content
15-
</div>
16-
</template>
17-
</CdrObjectOverlay>
18-
19-
<hr />
20-
21-
<CdrObjectOverlay :position="{ xs: 'center-center', lg: 'bottom-center' }" :margin="['zero', 'eighth-x']">
22-
<template #container>
23-
<img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" :style="{ display: 'block' }"/>
24-
</template>
25-
<template #content>
26-
<div class="overlay-content" :style="{ backgroundColor: '#fff', padding: '20px' }">
27-
Positioned Content
28-
</div>
29-
</template>
30-
</CdrObjectOverlay>
31-
32-
<hr />
33-
34-
<CdrObjectOverlay position="bottom-left" :margin="{ xs: 'zero', lg: ['half-x', 'four-x'] }" :gradient="{ xs: 'to-top', lg: 'to-right' }">
35-
<template #container>
36-
<img src="https://placehold.co/600x400" width="100%" height="100%" alt="Background image" :style="{ display: 'block' }"/>
37-
</template>
38-
<template #content>
39-
<div class="overlay-content" :style="{ backgroundColor: '#fff', padding: '20px' }">
40-
Positioned Content
41-
</div>
42-
</template>
43-
</CdrObjectOverlay>
54+
<div class="example">
55+
<h2>Media Object with Overlay</h2>
56+
57+
<hr class="example__hr" />
58+
<CdrLayout class="example__container" gap="two-x">
59+
<template v-for="({ props, label }, index) in overlayExamples">
60+
<div>
61+
<CdrText>
62+
<code>
63+
<strong v-html="label" />
64+
<br />
65+
{{ JSON.stringify(props) }}
66+
</code>
67+
</CdrText>
68+
<CdrMediaObject
69+
:as="CdrSurface"
70+
background="secondary"
71+
:content-padding="index === 0 ? 'zero' : 'two-x'"
72+
v-bind="props"
73+
>
74+
<template #content>
75+
<CdrTitle>A CdrTitle example</CdrTitle>
76+
<CdrBody class="example__content">
77+
{{ contentShort }}
78+
</CdrBody>
79+
</template>
80+
<template #media>
81+
<CdrImg
82+
alt="Test image"
83+
:src="cedarImage"
84+
class="example__image"
85+
/>
86+
</template>
87+
</CdrMediaObject>
88+
</div>
89+
</template>
90+
</CdrLayout>
91+
92+
<hr />
93+
94+
<h2>Media Object with Multiple Overlays</h2>
95+
<CdrMediaObject>
96+
<template #media>
97+
<CdrObjectOverlay position="top-left" margin="zero">
98+
<template #container>
99+
<CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" />
100+
</template>
101+
<template #content>
102+
<div class="overlay-content" :style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff', padding: '20px' }">
103+
Top Left Overlay
104+
</div>
105+
</template>
106+
</CdrObjectOverlay>
107+
<CdrObjectOverlay position="bottom-right" margin="zero">
108+
<template #content>
109+
<div class="overlay-content" :style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff', padding: '20px' }">
110+
Bottom Right Overlay
111+
</div>
112+
</template>
113+
</CdrObjectOverlay>
114+
</template>
115+
<template #content>
116+
<div>
117+
<h3>Media Object Title</h3>
118+
<p>This is the content of the media object.</p>
119+
</div>
120+
</template>
121+
</CdrMediaObject>
122+
123+
<hr />
124+
125+
<h2>Media Object with Responsive Overlay</h2>
126+
<CdrMediaObject>
127+
<template #media>
128+
<CdrObjectOverlay :position="{ xs: 'top-left', md: 'center-center', lg: 'bottom-right' }" margin="zero">
129+
<template #container>
130+
<CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" />
131+
</template>
132+
<template #content>
133+
<div class="overlay-content" :style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff', padding: '20px' }">
134+
Responsive Overlay
135+
</div>
136+
</template>
137+
</CdrObjectOverlay>
138+
</template>
139+
<template #content>
140+
<div>
141+
<h3>Media Object Title</h3>
142+
<p>This is the content of the media object.</p>
143+
</div>
144+
</template>
145+
</CdrMediaObject>
146+
147+
<hr />
148+
149+
<h2>Media Object with Multiple Overlays and Content</h2>
150+
<CdrMediaObject>
151+
<template #media>
152+
<CdrObjectOverlay position="top-left" margin="zero">
153+
<template #container>
154+
<CdrImg src="https://placehold.co/600x400" width="100%" height="100%" alt="Media image" />
155+
</template>
156+
<template #content>
157+
<div class="overlay-content" :style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff', padding: '20px' }">
158+
Top Left Overlay
159+
</div>
160+
</template>
161+
</CdrObjectOverlay>
162+
<CdrObjectOverlay position="bottom-right" margin="zero">
163+
<template #content>
164+
<div class="overlay-content" :style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff', padding: '20px' }">
165+
Bottom Right Overlay
166+
</div>
167+
</template>
168+
</CdrObjectOverlay>
169+
<CdrObjectOverlay position="center-center" margin="zero">
170+
<template #content>
171+
<div class="overlay-content" :style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff', padding: '20px' }">
172+
Center Overlay
173+
</div>
174+
</template>
175+
</CdrObjectOverlay>
176+
</template>
177+
<template #content>
178+
<div>
179+
<h3>Media Object Title</h3>
180+
<p>This is the content of the media object.</p>
181+
</div>
182+
</template>
183+
</CdrMediaObject>
184+
</div>
44185
</template>
186+
187+
<style scoped>
188+
.overlay-content {
189+
color: white;
190+
font-size: 1.5rem;
191+
padding: 20px;
192+
}
193+
194+
.example {
195+
&__hr {
196+
margin: $cdr-space-two-x 0;
197+
}
198+
199+
&__container {
200+
max-width: 1300px;
201+
}
202+
203+
&__content {
204+
&--color-inverse {
205+
color: $cdr-color-text-inverse;
206+
}
207+
208+
&--narrow {
209+
max-width: 50%;
210+
}
211+
}
212+
213+
&__image {
214+
&--height {
215+
height: 200px;
216+
width: 100%;
217+
object-fit: cover;
218+
}
219+
220+
&--11 {
221+
height: 100%;
222+
width: 100%;
223+
}
224+
225+
&--badge {
226+
position: absolute;
227+
top: 20px;
228+
left: 0;
229+
border: 1px solid red;
230+
}
231+
}
232+
233+
&__badge-example {
234+
position: relative;
235+
}
236+
}
237+
</style>

0 commit comments

Comments
 (0)