Skip to content

Commit b319326

Browse files
Samuell1Samuell1
committed
refactor: ecosystem cards layout
- add links - add ripple - use colored cards - rework layout
1 parent 95083e5 commit b319326

File tree

1 file changed

+97
-51
lines changed

1 file changed

+97
-51
lines changed

‎docs/app/pages/Home/HomeEcosystem.vue

Lines changed: 97 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,61 @@
55
{{ $t('pages.home.ecosystem') }}
66
</h2>
77
<div class="page-wrapper">
8-
<div class="md-layout md-gutter">
9-
<div class="md-layout-item md-small-size-100">
10-
<md-card md-with-hover class="md-elevation-2 full-height">
11-
<div class="content">
12-
<div class="md-title">Advanced Webpack SPA</div>
13-
<p>A full-featured Webpack + Vue Material setup with hot-reload, lint-on-save, unit testing, scss preprocessing & css extraction.</p>
14-
</div>
15-
<div class="image webpack">
16-
<img src="/assets/boilerplates/webpack-advanced.png" alt="webpack">
17-
</div>
8+
<div class="md-layout md-alignment-top-center">
9+
<div class="md-layout-item md-small-size-100 md-size-50">
10+
<md-card md-with-hover class="md-elevation-2 md-primary" md-theme="blue-card" @click.native="openLink('https://github.com/vuematerial/webpack')">
11+
<md-ripple>
12+
<md-card-content>
13+
<div class="content">
14+
<div class="md-title">Advanced Webpack SPA</div>
15+
<p>A full-featured Webpack + Vue Material setup with hot-reload, lint-on-save, unit testing, scss preprocessing & css extraction.</p>
16+
</div>
17+
<div class="image">
18+
<img src="/assets/boilerplates/webpack-advanced.png" alt="webpack">
19+
</div>
20+
</md-card-content>
21+
</md-ripple>
1822
</md-card>
1923
</div>
20-
<div class="md-layout-item md-small-size-100">
21-
<md-card md-with-hover class="md-elevation-2 full-height">
22-
<div class="content">
23-
<div class="md-title">NuxtJs Universal</div>
24-
<p>Nuxt.js is a framework for creating Universal Vue.js Applications. All the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.</p>
25-
</div>
26-
<div class="image nuxt">
27-
<img src="/assets/boilerplates/nuxt.png" alt="nuxtjs">
28-
</div>
24+
<div class="md-layout-item md-small-size-100 md-size-30">
25+
<md-card md-with-hover class="md-elevation-2 flying" @click.native="$router.push('/getting-started')">
26+
<md-ripple>
27+
<md-card-content>
28+
<div class="content">
29+
<div class="md-title">Single HTML file</div>
30+
<p>The simplest possible Vue Material setup in a single HTML file. But without SCSS or ES7.</p>
31+
</div>
32+
<img src="/assets/boilerplates/html.png" alt="html">
33+
</md-card-content>
34+
</md-ripple>
2935
</md-card>
3036
</div>
31-
<div class="md-layout-item md-small-size-100">
32-
<md-card md-with-hover class="md-elevation-2 flying">
33-
<div class="content">
34-
<div class="md-title">Single HTML file</div>
35-
<p>The simplest possible Vue Material setup in a single HTML file. But without SCSS or ES7.</p>
36-
</div>
37-
<img src="/assets/boilerplates/html.png" alt="">
37+
<div class="md-layout-item md-small-size-100 md-size-30">
38+
<md-card md-with-hover class="md-elevation-2 flying" @click.native="openLink('CODEPEN')">
39+
<md-ripple>
40+
<md-card-content>
41+
<div class="content">
42+
<div class="md-title">Codepen for prototyping</div>
43+
<p>For fast prototyping, examples or issues reports is best to use codepen.</p>
44+
</div>
45+
<img src="/assets/boilerplates/codepen.svg" alt="codepen">
46+
</md-card-content>
47+
</md-ripple>
3848
</md-card>
39-
<md-card md-with-hover class="md-elevation-2 flying">
40-
<div class="content">
41-
<div class="md-title">Codepen for prototyping</div>
42-
<p>For fast prototyping, examples or issues reports is best to use codepen.</p>
43-
</div>
44-
<img src="/assets/boilerplates/codepen.svg" alt="">
49+
</div>
50+
<div class="md-layout-item md-small-size-100 md-size-50">
51+
<md-card md-with-hover class="md-elevation-2 md-primary" md-theme="green-card" @click.native="openLink('https://github.com/vuematerial/nuxtjs')">
52+
<md-ripple>
53+
<md-card-content>
54+
<div class="content">
55+
<div class="md-title">Nuxt.js Universal</div>
56+
<p>Nuxt.js is a framework for creating Universal Vue.js Applications. All the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.</p>
57+
</div>
58+
<div class="image">
59+
<img src="/assets/boilerplates/nuxt.png" alt="nuxtjs">
60+
</div>
61+
</md-card-content>
62+
</md-ripple>
4563
</md-card>
4664
</div>
4765
</div>
@@ -51,62 +69,90 @@
5169

5270
<script>
5371
export default {
54-
name: 'HomeEcosystem'
72+
name: 'HomeEcosystem',
73+
methods: {
74+
openLink (link) {
75+
window.open(link, '_blank')
76+
}
77+
}
5578
}
5679
</script>
5780

5881
<style lang="scss" scoped>
5982
@import "~vue-material/components/MdAnimation/variables";
6083
@import "~vue-material/components/MdLayout/mixins";
6184
85+
@import "~vue-material/theme/engine";
86+
87+
@include md-register-theme("blue-card", (
88+
primary: md-get-palette-color(blue, A200)
89+
));
90+
@include md-register-theme("green-card", (
91+
primary: md-get-palette-color(teal, 500)
92+
));
93+
94+
@import "~vue-material/base/theme";
95+
@import "~vue-material/components/MdCard/theme";
96+
6297
.home-ecosystem {
6398
width: calc(100% + 32px);
6499
padding-bottom: 28px;
65100
margin: 0 -16px;
66101
background: #f5f5f5;
67-
.md-layout-item {
68-
@include md-layout-small {
69-
margin-top: 16px;
102+
.md-layout {
103+
align-items: stretch;
104+
padding: 32px 0;
105+
margin-right: -8px;
106+
margin-left: -8px;
107+
.md-layout-item {
108+
padding-right: 8px;
109+
padding-left: 8px;
110+
margin-bottom: 16px;
70111
}
71112
}
72113
.md-card {
73-
padding: 16px;
74-
display: flex;
75-
margin-bottom: 16px;
76-
flex-direction: column;
77114
position: relative;
78115
overflow: hidden;
79116
background: #fff;
80-
&.full-height {
117+
min-height: 270px;
118+
height: 100%;
119+
.md-card-content {
120+
display: flex;
121+
padding: 16px;
81122
height: 100%;
82123
}
124+
&.row {
125+
flex-direction: row;
126+
}
127+
&.column {
128+
flex-direction: column;
129+
}
83130
.content {
84131
z-index: 1;
85132
flex-grow: 1;
86133
}
87134
.image {
88-
padding: 16px;
89-
margin: 16px -16px -16px -16px;
90-
max-height: 200px;
135+
width: 100%;
91136
overflow: hidden;
92137
text-align: center;
138+
display: flex;
139+
align-items: center;
140+
justify-content: center;
93141
img {
94-
max-height: 180px;
95-
}
96-
&.nuxt {
97-
background: #64D1A1;
98-
}
99-
&.webpack {
100-
background: #8ED6FB;
142+
max-height: 160px;
101143
}
102144
}
103145
&.flying {
146+
p {
147+
margin-right: 80px;
148+
}
104149
img {
105150
position: absolute;
106151
bottom: -40px;
107152
right: -40px;
108153
max-height: 160px;
109154
z-index: 0;
155+
opacity: .7;
110156
}
111157
}
112158
}

0 commit comments

Comments
 (0)