Skip to content

Commit b5f672d

Browse files
phananphanan
committed
Refactor Themes
1 parent fc7eeac commit b5f672d

File tree

8 files changed

+172
-123
lines changed

8 files changed

+172
-123
lines changed

‎src/v2/examples/themes.md‎

Lines changed: 0 additions & 116 deletions
This file was deleted.

‎src/v2/guide/themes.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Themes
3+
type: guide
4+
order: 804
5+
---
6+
{% raw %}
7+
<div id="themes">
8+
<section v-for="partner in partners" :key="partner.name" class="partner-wrapper">
9+
<partner-component :partner="partner"></partner-component>
10+
</section>
11+
</div>
12+
13+
<script type="text/template" id="partnerTemplate">
14+
<div>
15+
<h2 :id="partner.name">{{partner.name}}</h2>
16+
<blockquote class="theme-partner-description" v-html="partnerDescription"></blockquote>
17+
<div class="themes-grid">
18+
<div v-for="product in partner.products" :key="product.name" class="item-preview">
19+
<a class="item-preview-img" :href="product.url" rel="nofollow">
20+
<img :src="product.image" :alt="`${product.name} - ${product.description}`"></a>
21+
<div class="item-preview-name-container">
22+
<h3 class="item-preview-name" :class="{'free': product.free}">{{product.name}}</h3>
23+
<b v-if="product.price" class="item-preview-price">{{product.price}}$</b>
24+
</div>
25+
<div class="item-preview-description">{{product.description}}</div>
26+
</div>
27+
<div class="see-more-container">
28+
<a :href="partner.seeMoreUrl" class="button white see-more-link">See More Themes from {{partner.name}}</a>
29+
</div>
30+
</div>
31+
</div>
32+
</script>
33+
34+
<script>
35+
var mdConverter = new showdown.Converter()
36+
37+
Vue.component('partner-component', {
38+
template: document.getElementById('partnerTemplate').innerHTML,
39+
props: {
40+
partner: {
41+
type: Object,
42+
required: true
43+
}
44+
},
45+
computed: {
46+
partnerDescription: function () {
47+
return mdConverter.makeHtml(this.partner.description)
48+
}
49+
}
50+
})
51+
52+
const app = new Vue({
53+
el: '#themes',
54+
data: function () {
55+
return {
56+
partners: themeData
57+
}
58+
}
59+
})
60+
</script>
61+
{% endraw %}

‎themes/vue/layout/layout.ejs‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<% var isIndex = page.path === 'index.html' %>
2+
<% var isThemes = page.path === 'v2/guide/themes.html' %>
23

34
<!DOCTYPE html>
45
<html lang="en">
@@ -61,7 +62,13 @@
6162
<%- css(isIndex ? 'css/index' : 'css/page') %>
6263

6364
<!-- this needs to be loaded before guide's inline scripts -->
64-
<script src="<%- url_for("/js/vue.js") %>"></script>
65+
<script src="<%- url_for('/js/vue.js') %>"></script>
66+
67+
<% if (isThemes) { %>
68+
<script src="<%- url_for('/js/theme-data.js') %>"></script>
69+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js" integrity="sha256-LSUpTY0kkXGKvcBC9kbmgibmx3NVVgJvAEfTZbs51mU=" crossorigin="anonymous"></script>
70+
<% } %>
71+
6572
<script>
6673
Vue.config.productionTip = false
6774
window.PAGE_TYPE = "<%- page.type %>"

‎themes/vue/layout/partials/main_menu.ejs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,7 @@
1212
<a href="<%- url_for("/partners") %>" class="nav-link <%- page.path.match(/partners/) ? 'current' : '' %>">Partners</a>
1313
</li> -->
1414
<%- partial('partials/support_vue_dropdown') %>
15+
<li>
16+
<a href="<%- url_for("/v2/guide/themes.html") %>" class="nav-link themes<%- page.path.match(/themes\.html/) ? ' current' : '' %>">Themes</a>
17+
</li>
1518
<%- partial('partials/language_dropdown') %>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ input.button
9090
&:hover
9191
.nav-dropdown
9292
display: block
93-
&.language, &.ecosystem
93+
&.ecosystem
9494
margin-left: 20px
9595
.arrow
9696
pointer-events: none

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ body.docs
6565
white-space: nowrap
6666
&:hover, &.current
6767
border-bottom: 3px solid $green
68-
&.team
68+
&.team, &.themes
6969
margin-left: 10px
7070
&.new::before
7171
red-dot-before()

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ $item-box-shadow-hover = 0 2.25rem 1.5rem -1.5rem rgba(33,37,41,.2),0 0 1.5rem .
2525
border-radius: .5rem
2626
vertical-align: middle
2727
border-style: none
28-
.item-preview-title-container
28+
.item-preview-name-container
2929
display flex
3030
justify-content space-between
3131
align-items center
32-
h3.item-preview-title
32+
h3.item-preview-name
3333
margin-top: .7rem
3434
margin-bottom: 0
3535
&.free::after
@@ -51,11 +51,12 @@ $item-box-shadow-hover = 0 2.25rem 1.5rem -1.5rem rgba(33,37,41,.2),0 0 1.5rem .
5151
.item-preview-description
5252
font-size: .9rem
5353
.see-more-container
54-
display: flex
55-
justify-content center
54+
text-align: center;
5655
width: 100%
5756
.see-more-link
5857
color: $green
58+
display: inline-block
59+
width: auto
5960

6061
@media screen and (max-width: $media-width)
6162
.themes-grid

‎themes/vue/source/js/theme-data.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
var themeData = [
2+
{
3+
name: 'Creative Tim',
4+
description: `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.`,
5+
seeMoreUrl: 'https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=116187',
6+
products: [
7+
{
8+
name: 'Vue Argon Design System',
9+
free: true,
10+
description: 'Free Vue.js Design System',
11+
url: 'https://www.creative-tim.com/product/vue-argon-design-system?affiliate_id=116187',
12+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-argon-design-system/vue-argon-design-system.jpg'
13+
},
14+
{
15+
name: 'Vue Black Dashboard Pro',
16+
price: 59,
17+
description: 'Premium Vue.js Admin Template',
18+
url: 'https://www.creative-tim.com/product/vue-black-dashboard-pro?affiliate_id=116187',
19+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard-pro/vue-black-dashboard-pro.jpg'
20+
},
21+
{
22+
name: 'Vue Paper Dashboard 2 Pro',
23+
price: 59,
24+
description: 'Premium Vue.js Admin Template',
25+
url: 'https://www.creative-tim.com/product/vue-paper-dashboard-2-pro?affiliate_id=116187',
26+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard-pro/vue-black-dashboard-pro.jpg'
27+
},
28+
{
29+
name: 'Vue Material Kit',
30+
free: true,
31+
description: 'Free Vue.js UI Kit',
32+
url: 'https://www.creative-tim.com/product/vue-material-kit?affiliate_id=116187',
33+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-kit/vue-material-kit.jpg'
34+
},
35+
{
36+
name: 'Vue Black Dashboard',
37+
free: true,
38+
description: 'Free Vue.js Admin Template',
39+
url: 'https://www.creative-tim.com/product/vue-black-dashboard?affiliate_id=116187',
40+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-black-dashboard/vue-black-dashboard.jpg'
41+
},
42+
{
43+
name: 'Vue Now UI Kit Pro',
44+
price: 79,
45+
description: 'Premium Vue.js UI Kit',
46+
url: 'https://www.creative-tim.com/product/vue-now-ui-kit-pro?affiliate_id=116187',
47+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-kit-pro/vue-now-ui-kit-pro.jpg'
48+
},
49+
{
50+
name: 'Vue Now UI Dashboard Pro',
51+
price: 59,
52+
description: 'Premium Vue.js Admin Template',
53+
url: 'https://www.creative-tim.com/product/vue-now-ui-dashboard-pro?affiliate_id=116187',
54+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-dashboard-pro/vue-now-ui-dashboard-pro.jpg'
55+
},
56+
{
57+
name: 'Vue Now UI Kit',
58+
free: true,
59+
description: 'Free Vue.js UI Kit',
60+
url: 'https://www.creative-tim.com/product/vue-now-ui-kit?affiliate_id=116187',
61+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-now-ui-kit/vue-now-ui-kit.jpg'
62+
},
63+
{
64+
name: 'Vue Light Bootstrap Dashboard Pro',
65+
price: 49,
66+
description: 'Premium Vue.js Admin Template',
67+
url: 'https://www.creative-tim.com/product/vue-light-bootstrap-dashboard-pro?affiliate_id=116187',
68+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-light-bootstrap-dashboard-pro/vue-light-bootstrap-dashboard-pro.jpg'
69+
},
70+
{
71+
name: 'Vue Material Dashboard Pro',
72+
price: 59,
73+
description: 'Premium Vue.js Admin Template',
74+
url: 'https://www.creative-tim.com/product/vue-material-dashboard-pro?affiliate_id=116187',
75+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-dashboard-pro/vue-material-dashboard-pro.jpg'
76+
},
77+
{
78+
name: 'Vue Material Kit Pro',
79+
price: 89,
80+
description: 'Premium Vue.js UI Kit',
81+
url: 'https://www.creative-tim.com/product/vue-material-kit-pro?affiliate_id=116187',
82+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-material-kit-pro/vue-material-kit-pro.jpg'
83+
},
84+
{
85+
name: 'Vue Light Bootstrap Dashboard',
86+
free: true,
87+
description: 'Free Vue.js Admin Template',
88+
url: 'https://www.creative-tim.com/product/vue-light-bootstrap-dashboard?affiliate_id=116187',
89+
image: 'https://raw.githubusercontent.com/creativetimofficial/public-assets/master/vue-light-bootstrap-dashboard/vue-light-bootstrap-dashboard.jpg'
90+
}
91+
]
92+
}
93+
]

0 commit comments

Comments
 (0)