Skip to content
This repository was archived by the owner on Feb 24, 2023. It is now read-only.

Commit 7bb85e7

Browse files
author
Łukasz Florczak
committed
Demo page update
1 parent cd0debb commit 7bb85e7

File tree

9 files changed

+281
-323
lines changed

9 files changed

+281
-323
lines changed

‎demo/components/CodePen.vue‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<template lang="pug">
2-
div.codepen(data-height="504" data-theme-id="dark" data-default-tab="js,result" data-user="lukaszflorczak" data-slug-hash="EJRNMM" style="height: 504px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue-agile – default settings and minimal styles")
3-
<span>See the Pen <a href="https://codepen.io/lukaszflorczak/pen/EJRNMM/">
4-
vue-agile – default settings and minimal styles</a> by Lukasz Florczak (<a href="https://codepen.io/lukaszflorczak">@lukaszflorczak</a>)
5-
on <a href="https://codepen.io">CodePen</a>.</span>
6-
</p>
7-
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
2+
div.codepen(v-if="id")
3+
a(:href="`https://codepen.io/lukaszflorczak/pen/${id}`" target="_blank")
4+
span Edit on
5+
span
6+
| C
7+
i.fab.fa-codepen
8+
| dePen
9+
810
</template>
911

1012
<script>
@@ -15,11 +17,6 @@
1517
id: {
1618
type: String,
1719
default: null
18-
},
19-
20-
height: {
21-
type: Integer,
22-
default: 400
2320
}
2421
}
2522
}

‎demo/components/SiteFooter.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
div.col-xs-12
66
div.copyright
77
span Copyright © 2017-2019 #[strong Łukasz Florczak]!{' '}
8-
a(href="https://twitter.com/lukaszflorczak" class="twitter-follow-button" data-show-count="false") Follow @lukaszflorczak!{' '}
8+
9+
a(href="https://twitter.com/lukaszflorczak" class="twitter-follow-button" data-show-count="false") Follow @lukaszflorczak
910
a(href="http://ko-fi.com/lukaszflorczak" target="_blank")
10-
img(src="https://img.shields.io/badge/buy%20me%20a%20coffee-+3€-red.svg?style=flat-square&logo=ko-fi")
11+
img(src="https://img.shields.io/badge/buy%20me%20a%20coffee-+3€-red.svg?style=flat&logo=ko-fi")
1112

1213
div.row
1314
div.col-xs-12

‎demo/examples/Example1.vue‎

Lines changed: 82 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
<template>
2-
<section class="section section--demo-1">
3-
<div class="container">
4-
<div class="row">
5-
<div class="col-xs-12">
6-
<h2 class="section__title"><strong>#1</strong> demo</h2>
7-
<p class="section__description">vue-agile with default settings and minimal styles</p>
8-
</div>
9-
</div>
10-
11-
<div class="row">
12-
<div class="col-xs-12">
13-
<p class="codepen" data-height="504" data-theme-id="dark" data-default-tab="css,result" data-user="lukaszflorczak" data-slug-hash="EJRNMM" style="height: 504px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue-agile – default settings and minimal styles">
14-
<span>See the Pen <a href="https://codepen.io/lukaszflorczak/pen/EJRNMM/">
15-
vue-agile – default settings and minimal styles</a> by Lukasz Florczak (<a href="https://codepen.io/lukaszflorczak">@lukaszflorczak</a>)
16-
on <a href="https://codepen.io">CodePen</a>.</span>
17-
</p>
18-
</div>
19-
</div>
20-
</div>
21-
</section>
1+
<template lang="pug">
2+
section.section.section--demo-1
3+
div.container
4+
div.row
5+
div.col-xs-12
6+
h2.section__title #[strong #1] demo
7+
code-pen(id="EJRNMM")
8+
p.section__description vue-agile with default settings and minimal styles
9+
10+
div.row
11+
div.col-xs-12
12+
agile
13+
div.slide(v-for="n in 6", :key="n", :class="`slide--${n}`")
14+
h3 {{ n }}
15+
16+
template(slot="prevButton")
17+
i.fas.fa-chevron-left
18+
19+
template(slot="nextButton")
20+
i.fas.fa-chevron-right
21+
2222
</template>
2323

2424

@@ -27,3 +27,64 @@
2727
name: 'Example1'
2828
}
2929
</script>
30+
31+
<style lang="sass">
32+
.section--demo-1
33+
.agile
34+
&__actions
35+
margin-top: 20px
36+
37+
&__nav-button
38+
background: transparent
39+
border: none
40+
color: #ccc
41+
cursor: pointer
42+
font-size: 24px
43+
transition-duration: .3s
44+
45+
&:hover
46+
color: #888
47+
48+
&__dot
49+
margin: 0 10px
50+
51+
button
52+
background-color: #eee
53+
border: none
54+
border-radius: 50%
55+
cursor: pointer
56+
display: block
57+
height: 10px
58+
font-size: 0
59+
line-height: 0
60+
margin: 0
61+
padding: 0
62+
transition-duration: .3s
63+
width: 10px
64+
65+
&--current,
66+
&:hover
67+
button
68+
background-color: #888
69+
70+
// Slides styles
71+
.slide
72+
align-items: center
73+
color: #fff
74+
display: flex
75+
height: 300px
76+
justify-content: center
77+
78+
h3
79+
font-size: 32px
80+
font-weight: 300
81+
82+
// Slides backgrounds
83+
$colors: #f1c40f #e67e22 #e74c3c #9b59b6 #3498db #2ecc71
84+
85+
@for $i from 1 through length($colors)
86+
$color: nth($colors, $i)
87+
88+
.slide--#{$i}
89+
background-color: $color
90+
</style>

‎demo/examples/Example2.vue‎

Lines changed: 90 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,97 @@
1-
<template>
2-
<section class="section section--demo-1">
3-
<div class="container">
4-
<div class="row">
5-
<div class="col-xs-12">
6-
<h2 class="section__title"><strong>#2</strong> demo</h2>
7-
<p class="section__description">vue-agile as a full size image carousel with custom styles for
8-
arrows and dots indicators</p>
9-
</div>
10-
</div>
11-
12-
<div class="row">
13-
<div class="col-xs-12">
14-
<p class="codepen" data-height="582" data-theme-id="dark" data-default-tab="result" data-user="lukaszflorczak" data-slug-hash="ROJKQg" style="height: 582px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue-agile – full size image carousel with custom styles for arrows and dots indicators">
15-
<span>See the Pen <a href="https://codepen.io/lukaszflorczak/pen/ROJKQg/">
16-
vue-agile – full size image carousel with custom styles for arrows and dots indicators</a> by Lukasz Florczak (<a href="https://codepen.io/lukaszflorczak">@lukaszflorczak</a>)
17-
on <a href="https://codepen.io">CodePen</a>.</span>
18-
</p>
19-
</div>
20-
</div>
21-
</div>
22-
</section>
23-
</template>
1+
<template lang="pug">
2+
section.section.section--demo-2
3+
div.container
4+
div.row
5+
div.col-xs-12
6+
h2.section__title #[strong #2] demo
7+
code-pen(id="ROJKQg")
8+
p.section__description vue-agile as a full size image carousel with custom styles for arrows and dots indicators
9+
10+
div.container-fluid
11+
div.row
12+
div.col-xs-12
13+
agile(:initial-slide="3")
14+
img.slide(src='https://images.unsplash.com/photo-1506260408121-e353d10b87c7?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
15+
img.slide(src='https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
16+
img.slide(src='https://images.unsplash.com/photo-1524260855046-f743b3cdad07?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
17+
img.slide(src='https://images.unsplash.com/photo-1526080676457-4544bf0ebba9?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
18+
img.slide(src='https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
19+
img.slide(src='https://images.unsplash.com/photo-1426170042593-200f250dfdaf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
20+
img.slide(src='https://images.unsplash.com/photo-1529815481058-55e5b656f6d6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
21+
22+
template(slot="prevButton")
23+
i.fas.fa-chevron-left
24+
25+
template(slot="nextButton")
26+
i.fas.fa-chevron-right
2427

2528

29+
</template>
30+
2631
<script>
2732
export default {
2833
name: 'Example2'
2934
}
3035
</script>
36+
37+
<style lang="sass">
38+
.section--demo-2
39+
.agile
40+
&__nav-button
41+
background: transparent
42+
border: none
43+
color: #fff
44+
cursor: pointer
45+
font-size: 24px
46+
height: 100%
47+
position: absolute
48+
top: 0
49+
transition-duration: .3s
50+
width: 80px
51+
52+
&:hover
53+
background-color: rgba(#000, .5)
54+
opacity: 1
55+
56+
&--prev
57+
left: 0
58+
59+
&--next
60+
right: 0
61+
62+
&__dots
63+
bottom: 10px
64+
left: 50%
65+
position: absolute
66+
transform: translateX(-50%)
67+
68+
&__dot
69+
margin: 0 10px
70+
71+
button
72+
background-color: transparent
73+
border: 1px solid #fff
74+
border-radius: 50%
75+
cursor: pointer
76+
display: block
77+
height: 10px
78+
font-size: 0
79+
line-height: 0
80+
margin: 0
81+
padding: 0
82+
transition-duration: .3s
83+
width: 10px
84+
85+
&--current,
86+
&:hover
87+
button
88+
background-color: #fff
89+
90+
// Slides styles
91+
.slide
92+
display: block
93+
height: 550px
94+
object-fit: cover
95+
width: 100%
96+
97+
</style>

‎demo/examples/Example3.vue‎

Lines changed: 57 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
<template>
2-
<section class="section section--demo-1">
3-
<div class="container">
4-
<div class="row">
5-
<div class="col-xs-12">
6-
<h2 class="section__title"><strong>#3</strong> demo</h2>
7-
<p class="section__description">vue-agile with autoplay and fade effect</p>
8-
</div>
9-
</div>
10-
11-
<div class="row">
12-
<div class="col-xs-12">
13-
<p class="codepen" data-height="582" data-theme-id="dark" data-default-tab="css,result" data-user="lukaszflorczak" data-slug-hash="xezgmO" style="height: 582px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue-agile – fade effect and autoplay">
14-
<span>See the Pen <a href="https://codepen.io/lukaszflorczak/pen/xezgmO/">
15-
vue-agile – fade effect and autoplay</a> by Lukasz Florczak (<a href="https://codepen.io/lukaszflorczak">@lukaszflorczak</a>)
16-
on <a href="https://codepen.io">CodePen</a>.</span>
17-
</p>
18-
</div>
19-
</div>
20-
</div>
21-
</section>
1+
<template lang="pug">
2+
section.section.section--demo-3
3+
div.container
4+
div.row
5+
div.col-xs-12
6+
h2.section__title #[strong #3] demo
7+
code-pen(id="xezgmO")
8+
p.section__description vue-agile with autoplay and fade effect
9+
10+
div.row
11+
div.col-xs-12
12+
agile(:nav-buttons="false" :autoplay-speed="5000" :speed="2500" fade pause-on-hover pause-on-dots-hover autoplay)
13+
img.slide(src='https://images.unsplash.com/photo-1509549649946-f1b6276d4f35?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
14+
img.slide(src='https://images.unsplash.com/photo-1511469054436-c7dedf24c66b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9')
15+
img.slide(src='https://images.unsplash.com/photo-1511135232973-c3ee80040060?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9')
16+
img.slide(src='https://images.unsplash.com/photo-1511231683436-44735d14c11c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9')
17+
img.slide(src='https://images.unsplash.com/photo-1517677129300-07b130802f46?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9')
18+
19+
2220
</template>
2321

2422

@@ -27,3 +25,41 @@
2725
name: 'Example3'
2826
}
2927
</script>
28+
29+
<style lang="sass">
30+
.section--demo-3
31+
.agile
32+
&__dots
33+
bottom: 10px
34+
flex-direction: column
35+
right: 30px
36+
position: absolute
37+
38+
&__dot
39+
margin: 5px 0
40+
41+
button
42+
background-color: transparent
43+
border: 1px solid #fff
44+
cursor: pointer
45+
display: block
46+
height: 10px
47+
font-size: 0
48+
line-height: 0
49+
margin: 0
50+
padding: 0
51+
transition-duration: .3s
52+
width: 10px
53+
54+
&--current,
55+
&:hover
56+
button
57+
background-color: #fff
58+
59+
// Slides styles
60+
.slide
61+
display: block
62+
height: 500px
63+
object-fit: cover
64+
width: 100%
65+
</style>

‎demo/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import Vue from 'vue'
22
import App from './App.vue'
33
import Agile from '../src'
4+
import CodePen from './components/CodePen'
45

56
Vue.config.productionTip = false
67

78
Vue.use(Agile)
9+
Vue.component('code-pen', CodePen)
810

911
new Vue({
1012
render: h => h(App)

‎demo/scss/_settings.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ $gutter-xl: $gutter-lg;
1919
$content-xs: 100%;
2020
$content-sm: $content-xs;
2121
$content-md: $content-sm;
22-
$content-lg: 1200px;
22+
$content-lg: 1000px;
2323
$content-xl: $content-lg;
2424

2525
// Number of columns in grid

0 commit comments

Comments
 (0)