Skip to content

Commit 5cb019d

Browse files
PierreBrisorgueilPierreBrisorgueil
committed
feat(config, home): add slideshow component ✨
1 parent 8de34f0 commit 5cb019d

File tree

3 files changed

+114
-0
lines changed

3 files changed

+114
-0
lines changed

‎src/config/defaults/development.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,29 @@ module.exports = {
152152
},
153153
],
154154
},
155+
slideshow: {
156+
title: 'Demos',
157+
data: [
158+
{
159+
img: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
160+
icon: 'fa-users',
161+
title: 'Vibrant Community',
162+
text: '**Lorem** ipsum dolor sit amet consectetur adipisicing elit. Iusto cupiditate sint ...',
163+
},
164+
{
165+
img: 'https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
166+
icon: 'fa-cloud-upload-alt',
167+
title: 'Frequent Updates',
168+
// text: '**Sed** ut elementum justo. Suspendisse non justo enim. Vestibulum cursus mauris dui, a luctus ex blandit. Lorem ipsum dolor sit amet consectetur adipisicing elit. qui ipsum eveniet facilis obcaecati corrupti consectetur adipisicing elit.',
169+
},
170+
{
171+
img: 'https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2027&q=80',
172+
icon: 'fa-history',
173+
title: 'Long-term Support',
174+
// text: '**Lorem** ipsum dolor sit amet consectetur adipisicing elit. Iusto cupiditate sint possimus quidem atque harum excepturi nemo velit tempora! Enim inventore fuga, qui ipsum eveniet facilis obcaecati corrupti asperiores nam',
175+
},
176+
],
177+
},
155178
stats: {
156179
background: 'https://images.unsplash.com/photo-1510915228340-29c85a43dcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
157180
data: [

‎src/modules/home/components/home.slideshow.component.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<section
3+
id="features"
4+
:class="full ? '': 'py-12'"
5+
:style="custom && custom.section ? custom.section : null"
6+
v-if="slides.data.length > 0"
7+
>
8+
<!-- slideshow full -->
9+
<v-carousel v-if="full" cycle :height="height" hide-delimiter-background :show-arrows="false">
10+
<v-carousel-item v-for="({img, title}, i) in slides.data" :key="i">
11+
<v-sheet color="transparent" height="100%">
12+
<v-row class="fill-height" align="center" justify="center">
13+
<v-img :src="img" class="mb-4" height="100%" max-width="100%">
14+
<div class="pt-10 display-2 text-center">{{ title }}</div>
15+
</v-img>
16+
</v-row>
17+
</v-sheet>
18+
</v-carousel-item>
19+
</v-carousel>
20+
<!-- slideshow with text -->
21+
<v-container v-else class="text-center">
22+
<h2
23+
class="display-1 font-weight-bold mb-3 text-uppercase"
24+
v-if="slides.title"
25+
>{{ slides.title }}</h2>
26+
<v-carousel cycle :height="height + 100" hide-delimiter-background :light='this.theme === "light" ? true : false' :show-arrows="false">
27+
<v-carousel-item v-for="({ img, icon, title, text }, i) in slides.data" :key="i">
28+
<v-sheet color="transparent" height="100%">
29+
<v-row justify="center" align="center" class="fill-height">
30+
<v-col cols="12" :md="mdImage || 6">
31+
<v-img :src="img" class="mb-4" :height="height" max-width="100%"></v-img>
32+
</v-col>
33+
<v-col v-if="title || text || icon" cols="12" :md="mdText || 6">
34+
<v-card
35+
class="py-12 px-4"
36+
:flat="config.vuetify.theme.flat"
37+
color="rgb(255, 255, 255, 0)"
38+
>
39+
<div>
40+
<v-avatar v-if="icon" color="primary" size="88">
41+
<v-icon dark large data-aos="fade-up">{{ icon }}</v-icon>
42+
</v-avatar>
43+
</div>
44+
<v-card-title
45+
v-if="title"
46+
class="justify-center font-weight-black text-uppercase"
47+
v-text="title"
48+
></v-card-title>
49+
<v-card-text v-if="text" class="subtitle-1 text--secondary">
50+
<vue-markdown :source="text" />
51+
</v-card-text>
52+
</v-card>
53+
</v-col>
54+
</v-row>
55+
</v-sheet>
56+
</v-carousel-item>
57+
</v-carousel>
58+
</v-container>
59+
</section>
60+
</template>
61+
62+
<script>
63+
/**
64+
* Module dependencies.
65+
*/
66+
import { mapGetters } from 'vuex';
67+
import VueMarkdown from 'vue-markdown';
68+
/**
69+
* Export default
70+
*/
71+
export default {
72+
name: 'homeSlideshowComponent',
73+
props: ['slides', 'custom', 'height', 'mdImage', 'mdText', 'full'],
74+
computed: {
75+
...mapGetters(['theme']),
76+
},
77+
components: {
78+
VueMarkdown,
79+
},
80+
};
81+
</script>

‎src/modules/home/views/home.view.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@
66
v-bind:features="config.home.features"
77
v-bind:custom="{ section : { background: config.vuetify.theme.themes[theme].surface }, card: { background: config.vuetify.theme.themes[theme].background }}"
88
></homeFeaturesComponent>
9+
<homeSlideshowComponent
10+
v-bind:slides="config.home.slideshow"
11+
v-bind:custom="null"
12+
v-bind:height="350"
13+
v-bind:mdImage="8"
14+
v-bind:mdText="4"
15+
v-bind:full="false"
16+
></homeSlideshowComponent>
917
<homeStatsComponent v-bind:statistics="statistics"></homeStatsComponent>
1018
<homeBlogComponent
1119
v-bind:title="config.home.blog.title"
@@ -31,6 +39,7 @@ import 'aos/dist/aos.css';
3139
import homeBannerComponent from '../components/home.banner.component.vue';
3240
import homeAboutsComponent from '../components/home.abouts.component.vue';
3341
import homeFeaturesComponent from '../components/home.features.component.vue';
42+
import homeSlideshowComponent from '../components/home.slideshow.component.vue';
3443
import homeStatsComponent from '../components/home.stats.component.vue';
3544
import homeBlogComponent from '../components/home.blog.component.vue';
3645
import homeContactComponent from '../components/home.contact.component.vue';
@@ -44,6 +53,7 @@ export default {
4453
homeBannerComponent,
4554
homeAboutsComponent,
4655
homeFeaturesComponent,
56+
homeSlideshowComponent,
4757
homeStatsComponent,
4858
homeBlogComponent,
4959
homeContactComponent,

0 commit comments

Comments
 (0)