Skip to content

Commit 8cfacc7

Browse files
cristijorayyx990803
cristijora
authored and
yyx990803
committed
Add themes example (#2032)
Add themes example page with multiple free & paid Vue.js themes. Add option to display that certain links are new/updated
1 parent a01ab3f commit 8cfacc7

File tree

7 files changed

+253
-6
lines changed

7 files changed

+253
-6
lines changed

‎src/v2/examples/themes.md

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: Themes
3+
type: examples
4+
is_new: true
5+
order: 13
6+
---
7+
> With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application.
8+
9+
{% raw %}
10+
<div id="themes-example" class="themes-grid">
11+
<div v-for="product in products" :key="product.name" class="item-preview">
12+
<a class="item-preview-img" :href="`https://www.creative-tim.com/product/${product.name}?affiliate_id=${affiliateId}`" rel="nofollow">
13+
<img :src="`https://raw.githubusercontent.com/creativetimofficial/public-assets/master/${product.name}/${product.name}.jpg`" :alt="`${product.title} - ${product.description}`"></a>
14+
<div class="item-preview-title-container">
15+
<h3 :id="product.name" data-type="theme-product-title" class="item-preview-title" :class="{'free': product.free}">{{product.title}}</h3>
16+
<b v-if="product.price" class="item-preview-price">{{product.price}}$</b>
17+
</div>
18+
<div class="item-preview-description">{{product.description}}</div>
19+
</div>
20+
<div class="see-more-container">
21+
<a :href="`https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=${affiliateId}`"
22+
class="button white see-more-link">
23+
See More Themes
24+
</a>
25+
</div>
26+
</div>
27+
<script>
28+
new Vue({
29+
el: '#themes-example',
30+
data: {
31+
affiliateId: 116187,
32+
products: [
33+
{
34+
name: 'vue-argon-design-system',
35+
title: 'Vue Argon Design System',
36+
free: true,
37+
description: 'Free Vue.js Design System'
38+
},
39+
{
40+
name: 'vue-black-dashboard-pro',
41+
title: 'Vue Black Dashboard Pro',
42+
free: false,
43+
price: 59,
44+
description: 'Premium Vue.js Admin Template'
45+
},
46+
{
47+
name: 'vue-paper-dashboard-2-pro',
48+
title: 'Vue Paper Dashboard 2 Pro',
49+
free: false,
50+
price: 59,
51+
description: 'Premium Vue.js Admin Template'
52+
},
53+
{
54+
name: 'vue-material-kit',
55+
title: 'Vue Material Kit',
56+
free: true,
57+
description: 'Free Vue.js UI Kit'
58+
},
59+
{
60+
name: 'vue-black-dashboard',
61+
title: 'Vue Black Dashboard',
62+
free: true,
63+
description: 'Free Vue.js Admin Template'
64+
},
65+
{
66+
name: 'vue-now-ui-kit-pro',
67+
title: 'Vue Now UI Kit Pro',
68+
free: false,
69+
price: 79,
70+
description: 'Premium Vue.js UI Kit'
71+
},
72+
{
73+
name: 'vue-now-ui-dashboard-pro',
74+
title: 'Vue Now UI Dashboard Pro',
75+
free: false,
76+
price: 59,
77+
description: 'Premium Vue.js Admin Template'
78+
},
79+
{
80+
name: 'vue-now-ui-kit',
81+
title: 'Vue Now UI Kit',
82+
free: true,
83+
description: 'Free Vue.js UI Kit'
84+
},
85+
{
86+
name: 'vue-light-bootstrap-dashboard-pro',
87+
title: 'Vue Light Bootstrap Dashboard Pro',
88+
free: false,
89+
price: 49,
90+
description: 'Premium Vue.js Admin Template'
91+
},
92+
{
93+
name: 'vue-material-dashboard-pro',
94+
title: 'Vue Material Dashboard Pro',
95+
free: false,
96+
price: 59,
97+
description: 'Premium Vue.js Admin Template'
98+
},
99+
{
100+
name: 'vue-material-kit-pro',
101+
title: 'Vue Material Kit Pro',
102+
free: false,
103+
price: 89,
104+
description: 'Premium Vue.js UI Kit'
105+
},
106+
{
107+
name: 'vue-light-bootstrap-dashboard',
108+
title: 'Vue Light Bootstrap Dashboard',
109+
free: true,
110+
description: 'Free Vue.js Admin Template'
111+
}
112+
]
113+
}
114+
})
115+
</script>
116+
{% endraw %}

‎themes/vue/source/css/_header.styl

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
$header-height = 40px
22

3+
red-dot-before(leftPos = -8px)
4+
content: ""
5+
width: 0
6+
height: 0
7+
border 2px solid $red
8+
border-radius 50%
9+
position: absolute
10+
top: calc(50% - 1px)
11+
left: leftPos
12+
313
#header
414
background-color: #fff
515
height: $header-height
@@ -47,6 +57,8 @@ body.docs
4757
top: 50%
4858
margin-top: -4px
4959
left: 8px
60+
&.new::before
61+
red-dot-before(8px)
5062

5163
.nav-link
5264
padding-bottom: 3px
@@ -55,6 +67,8 @@ body.docs
5567
border-bottom: 3px solid $green
5668
&.team
5769
margin-left: 10px
70+
&.new::before
71+
red-dot-before()
5872

5973
.new-label
6074
position: absolute
@@ -130,4 +144,4 @@ body.docs
130144

131145
@media print
132146
#header
133-
display: none
147+
display: none

‎themes/vue/source/css/_themes-example.styl

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
$media-width = 1300px
2+
$item-margin-bottom = 10px
3+
$item-box-shadow = 0 2rem 1.5rem -1.5rem rgba(33,37,41,.15), 0 0 1.5rem 0.5rem rgba(33,37,41,.05)
4+
$item-box-shadow-hover = 0 2.25rem 1.5rem -1.5rem rgba(33,37,41,.2),0 0 1.5rem .5rem rgba(33,37,41,.05);
5+
6+
.themes-grid
7+
display: flex
8+
flex-wrap: wrap
9+
justify-content space-between
10+
.item-preview
11+
width: 290px
12+
margin-bottom 25px
13+
.item-preview-img
14+
transition: .15s box-shadow,.15s transform
15+
border-radius: .5rem
16+
box-shadow $item-box-shadow
17+
overflow: hidden
18+
display block
19+
&:hover
20+
transform: translateY(-0.25rem)
21+
box-shadow: $item-box-shadow-hover
22+
img
23+
max-width: 100%
24+
height: auto
25+
border-radius: .5rem
26+
vertical-align: middle
27+
border-style: none
28+
.item-preview-title-container
29+
display flex
30+
justify-content space-between
31+
align-items center
32+
h3.item-preview-title
33+
margin-top: .7rem
34+
margin-bottom: 0
35+
&.free::after
36+
content: "FREE";
37+
display: inline-block
38+
font-size: 10px
39+
font-weight: 600
40+
color: #fff
41+
background-color: $green
42+
line-height: 14px
43+
padding: 0 4px
44+
border-radius: 3px
45+
margin-left: 5px
46+
vertical-align: middle
47+
position: relative
48+
top: -1px
49+
.item-preview-price
50+
margin-top: .7rem
51+
.item-preview-description
52+
font-size: .9rem
53+
.see-more-container
54+
display: flex
55+
justify-content center
56+
width: 100%
57+
.see-more-link
58+
color: $green
59+
60+
@media screen and (max-width: $media-width)
61+
.themes-grid
62+
justify-content center
63+
.item-preview
64+
justify-content center
65+
width: 380px

‎themes/vue/source/css/index.styl

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "_sidebar"
44
@import "_sponsors-index"
55
@import "_modal"
6+
@import "_themes-example"
67

78
$width = 900px
89
$space = 40px

‎themes/vue/source/css/page.styl

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
@import "_modal"
1515
@import "_scrimba"
1616
@import "_vue-mastery"
17+
@import "_themes-example"
1718

1819
#header
1920
box-shadow: 0 0 1px rgba(0,0,0,.25)

‎themes/vue/source/js/common.js

+53-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
initHashLevelRedirects()
33
initMobileMenu()
44
initVideoModal()
5+
initNewNavLinks()
56
if (PAGE_TYPE) {
67
initVersionSelect()
78
initApiSpecLinks()
@@ -189,6 +190,50 @@
189190
}
190191
}
191192

193+
/**
194+
* Initializes a list of links to mark as "updated" by adding a red dot next to them
195+
*/
196+
197+
function initNewNavLinks() {
198+
var linkExpirePeriod = 60 * 24 * 3600 * 1000 // 2 months
199+
var links = [
200+
{
201+
title: 'Learn',
202+
updatedOn: new Date("Fri Mar 1 2019")
203+
},
204+
{
205+
title: 'Examples',
206+
updatedOn: new Date("Fri Mar 1 2019")
207+
}
208+
]
209+
var today = new Date().getTime()
210+
var updatedLinks = links
211+
.filter(function (link) {
212+
return link.updatedOn.getTime() + linkExpirePeriod > today
213+
})
214+
.map(function (link) {
215+
return link.title
216+
})
217+
218+
var navLinks = document.querySelectorAll('#nav a.nav-link')
219+
var newLinks = []
220+
navLinks.forEach(function (link) {
221+
if (updatedLinks.indexOf(link.textContent) !== -1) {
222+
newLinks.push(link)
223+
}
224+
})
225+
newLinks.forEach(function (link) {
226+
var classes = link.classList
227+
var linkKey = `visisted-${link.textContent}`
228+
if (localStorage.getItem(linkKey) || classes.contains('current')) {
229+
classes.remove('updated-link')
230+
localStorage.setItem(linkKey, 'true')
231+
} else {
232+
classes.add('new')
233+
}
234+
})
235+
}
236+
192237
/**
193238
* Mobile burger menu button and gesture for toggling sidebar
194239
*/
@@ -329,7 +374,6 @@
329374
} else {
330375
headers = content.querySelectorAll('h3')
331376
each.call(headers, function (h) {
332-
console.log(h)
333377
sectionContainer.appendChild(makeLink(h))
334378
allHeaders.push(h)
335379
})
@@ -364,9 +408,15 @@
364408
})
365409
.forEach(makeHeaderClickable)
366410

367-
smoothScroll.init({
411+
new SmoothScroll('a[href*="#"]', {
368412
speed: 400,
369-
offset: 0
413+
offset: function (anchor, toggle) {
414+
let dataTypeAttr = anchor.attributes['data-type']
415+
if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') {
416+
return 300
417+
}
418+
return 0
419+
}
370420
})
371421
}
372422

‎themes/vue/source/js/smooth-scroll.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)