Skip to content

Commit aa11adb

Browse files
marcos-hotmartmarcos-hotmart
committed
docs: improve ecosystem section of start page
1 parent cfd7bc1 commit aa11adb

File tree

13 files changed

+94
-91
lines changed

13 files changed

+94
-91
lines changed

‎docs/app/components/AdManager.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
position: fixed;
8787
right: 16px;
8888
bottom: 16px;
89+
z-index: 1000;
8990
}
9091
9192
@media (max-width: $ad-responsive-small) {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@
5555
letter-spacing: normal;
5656
font-size: 15px;
5757
line-height: 1.7em;
58+
59+
section {
60+
padding: 32px 0 48px;
61+
}
5862
}
5963
6064
.home-splash {
@@ -100,13 +104,9 @@
100104
101105
.home-title {
102106
max-width: 1312px;
103-
margin: 0 auto;
104-
color: rgba(#000, .87);
107+
margin-bottom: 36px;
105108
position: relative;
106-
padding: 16px 0;
107-
@include md-layout-medium {
108-
padding: 16px;
109-
}
109+
110110
.md-icon {
111111
position: absolute;
112112
top: 2px;

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

Lines changed: 78 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,86 @@
11
<template>
22
<md-content md-tag="section" md-theme="default" class="home-ecosystem">
3-
<h2 class="home-title md-headline">
4-
<md-icon>settings</md-icon>
5-
{{ $t('pages.home.ecosystem') }}
6-
</h2>
73
<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 md-primary full-height" md-theme="blue-card" @click.native="openLink('https://github.com/vuematerial/webpack')">
4+
<h2 class="home-title md-headline">
5+
<md-icon>settings</md-icon>
6+
<span>{{ $t('pages.home.ecosystem') }}</span>
7+
</h2>
8+
9+
<p>You can use some of our tools to make the development environment easier, more productive and with a better integration with Vue Material. You can choose between a batteries-included webpack boilerplate, a SSR template for Nuxt.js and a Single HTML file to start with the framework:</p>
10+
11+
<div class="md-layout md-gutter md-alignment-top-left">
12+
<div class="md-layout-item md-xsmall-size-100">
13+
<md-card class="md-primary" md-with-hover @click.native="openLink('https://github.com/vuematerial/webpack')">
1114
<md-ripple>
12-
<md-card-content>
13-
<div class="content">
15+
<md-card-header>
16+
<md-card-header-text>
1417
<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>
18+
<div class="md-subhead">Full-featured</div>
19+
</md-card-header-text>
20+
21+
<md-card-media>
22+
<img src="/assets/boilerplates/webpack.png" alt="Webpack">
23+
</md-card-media>
24+
</md-card-header>
25+
26+
<md-card-content>
27+
A full-featured boilerplate with Webpack, Dev Server, Hot Reload, ESLint, Unit Testing, Assets Optimization, SCSS preprocessing and more.
2028
</md-card-content>
2129
</md-ripple>
2230
</md-card>
2331
</div>
24-
<div class="md-layout-item md-small-size-100">
25-
<md-card md-with-hover class="md-elevation-2 md-primary full-height" md-theme="green-card" @click.native="openLink('https://github.com/vuematerial/nuxtjs')">
32+
33+
<div class="md-layout-item md-xsmall-size-100">
34+
<md-card class="md-primary" md-theme="nuxt" md-with-hover @click.native="openLink('https://github.com/vuematerial/nuxtjs')">
2635
<md-ripple>
36+
<md-card-header>
37+
<md-card-header-text>
38+
<div class="md-title">Universal App with Nuxt.js</div>
39+
<div class="md-subhead">For Server Side Rendering</div>
40+
</md-card-header-text>
41+
42+
<md-card-media>
43+
<img src="/assets/boilerplates/nuxt.png" alt="Nuxt">
44+
</md-card-media>
45+
</md-card-header>
46+
2747
<md-card-content>
28-
<div class="content">
29-
<div class="md-title">Nuxt.js Universal</div>
30-
<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>
31-
</div>
32-
<div class="image">
33-
<img src="/assets/boilerplates/nuxt.png" alt="nuxtjs">
34-
</div>
48+
All the configuration needed to make more enjoyable the development of your application with full support for Server Side Rendering.
3549
</md-card-content>
3650
</md-ripple>
3751
</md-card>
3852
</div>
39-
<div class="md-layout-item md-small-size-100 md-size-30">
40-
<md-card md-with-hover class="md-elevation-2 flying" @click.native="$router.push('/getting-started')">
53+
54+
<div class="md-layout-item md-xsmall-size-100">
55+
<md-card md-with-hover class="flying" @click.native="$router.push('/getting-started')">
4156
<md-ripple>
57+
<md-card-header>
58+
<div class="md-title">Single HTML file</div>
59+
</md-card-header>
60+
4261
<md-card-content>
43-
<div class="content">
44-
<div class="md-title">Single HTML file</div>
45-
<p>The simplest possible Vue Material setup in a single HTML file. But without SCSS or ES7.</p>
46-
</div>
47-
<img src="/assets/boilerplates/html.png" alt="html">
62+
The simplest Vue Material setup.
4863
</md-card-content>
64+
65+
<div class="ecosystem-logo">
66+
<img src="/assets/boilerplates/html5.png" alt="HTML File">
67+
</div>
4968
</md-ripple>
5069
</md-card>
51-
<md-card md-with-hover class="md-elevation-2 flying" @click.native="openLink('https://codepen.io/vue-material/pen/RxGmyb')">
70+
71+
<md-card md-with-hover class="flying" @click.native="openLink('https://codepen.io/vue-material/pen/RxGmyb')">
5272
<md-ripple>
73+
<md-card-header>
74+
<div class="md-title">Codepen</div>
75+
</md-card-header>
76+
5377
<md-card-content>
54-
<div class="content">
55-
<div class="md-title">Codepen for prototyping</div>
56-
<p>For fast prototyping, examples or issues reports is best to use codepen.</p>
57-
</div>
58-
<img src="/assets/boilerplates/codepen.svg" alt="codepen">
78+
For examples or issues reporting.
5979
</md-card-content>
80+
81+
<div class="ecosystem-logo">
82+
<img src="/assets/boilerplates/codepen.png" alt="Codepen">
83+
</div>
6084
</md-ripple>
6185
</md-card>
6286
</div>
@@ -82,65 +106,43 @@
82106
83107
@import "~vue-material/theme/engine";
84108
85-
@include md-register-theme("blue-card", (
86-
primary: md-get-palette-color(blue, A200)
87-
));
88-
@include md-register-theme("green-card", (
89-
primary: md-get-palette-color(teal, 500)
109+
@include md-register-theme("nuxt", (
110+
primary: #46A37A
90111
));
91112
92-
@import "~vue-material/base/theme";
93113
@import "~vue-material/components/MdCard/theme";
94114
95115
.home-ecosystem {
96116
width: calc(100% + 32px);
97-
padding-bottom: 28px;
98-
margin: 0 -16px;
99117
background: #f5f5f5;
118+
100119
.md-layout-item {
101120
@include md-layout-small {
102121
margin-top: 16px;
103122
}
104123
}
124+
105125
.md-card {
106-
position: relative;
107-
overflow: hidden;
108-
background: #fff;
109-
margin-bottom: 16px;
110-
.md-card-content {
111-
display: flex;
112-
padding: 16px;
113-
height: 100%;
114-
}
115-
&.full-height {
116-
height: 100%;
117-
}
118-
.content {
119-
z-index: 1;
120-
flex-grow: 1;
121-
}
122-
.image {
123-
width: 100%;
124-
overflow: hidden;
125-
text-align: center;
126-
display: flex;
127-
align-items: center;
128-
justify-content: center;
129-
img {
130-
max-height: 160px;
131-
}
126+
+ .md-card {
127+
margin-top: 24px;
132128
}
129+
133130
&.flying {
134131
p {
135-
margin-right: 80px;
132+
margin-right: 15%;
136133
}
137-
img {
134+
135+
.ecosystem-logo {
136+
width: 100px;
137+
padding: 16px;
138138
position: absolute;
139-
bottom: -40px;
140-
right: -40px;
141-
max-height: 160px;
139+
right: -20px;
140+
bottom: -20px;
142141
z-index: 0;
143-
opacity: .7;
142+
overflow: hidden;
143+
opacity: .38;
144+
background-color: rgba(#000, .26);
145+
border-radius: 50%;
144146
}
145147
}
146148
}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
2-
<md-content md-tag="section" md-theme="default" class="home-sponsors">
3-
<h2 class="home-title md-headline">
4-
<md-icon>monetization_on</md-icon>
5-
{{ $t('pages.home.sponsors') }} & {{ $t('pages.home.backers') }}
6-
</h2>
2+
<md-content md-tag="section" class="home-sponsors">
73
<div class="page-wrapper">
4+
<h2 class="home-title md-headline">
5+
<md-icon>monetization_on</md-icon>
6+
{{ $t('pages.home.sponsors') }} & {{ $t('pages.home.backers') }}
7+
</h2>
8+
89
<div class="home-sponsors-description">
910
<i18n path="pages.home.sponsorsDescription" tag="p">
1011
<a href="https://www.github.com/marcosmoura" target="_blank">Marcos Moura</a>

‎docs/app/template/MainHeader.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
<md-menu-content class="fixed-theme-selector-items">
6060
<md-menu-item :class="getPrimaryClass('default')" @click="setTheme('default')">Light</md-menu-item>
6161
<md-menu-item :class="getPrimaryClass('default-dark')" @click="setTheme('default-dark')">Dark</md-menu-item>
62-
<md-menu-item :class="getPrimaryClass('light-green')" @click="setTheme('light-green')">Light Teal</md-menu-item>
62+
<md-menu-item :class="getPrimaryClass('light-green')" @click="setTheme('light-green')">Light Green</md-menu-item>
6363
<md-menu-item :class="getPrimaryClass('dark-green')" @click="setTheme('dark-green')">Dark Green</md-menu-item>
6464
</md-menu-content>
6565
</md-menu>

‎docs/app/themes/docs-imports.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "~vue-material/components/MdAvatar/theme";
22
@import "~vue-material/components/MdButton/theme";
3+
@import "~vue-material/components/MdCard/theme";
34
@import "~vue-material/components/MdContent/theme";
45
@import "~vue-material/components/MdDivider/theme";
56
@import "~vue-material/components/MdDrawer/theme";

‎docs/assets/boilerplates/codepen.png

12.5 KB
Loading

‎docs/assets/boilerplates/codepen.svg

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

‎docs/assets/boilerplates/html.png

-52.6 KB
Binary file not shown.

‎docs/assets/boilerplates/html5.png

1.43 KB
Loading

‎docs/assets/boilerplates/webpack-advanced.png

-24.3 KB
Binary file not shown.

‎docs/assets/boilerplates/webpack.png

9.46 KB
Loading

‎src/components/MdButton/MdButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,6 @@
9797
transition: $md-transition-default;
9898
font-family: inherit;
9999
line-height: normal;
100-
text-transform: uppercase;
101100
text-decoration: none;
102101
vertical-align: top;
103102
white-space: nowrap;
@@ -112,6 +111,7 @@
112111
border-radius: $md-button-radius;
113112
font-size: $md-button-font-size;
114113
font-weight: 500;
114+
text-transform: uppercase;
115115
116116
&:active {
117117
outline: none;

0 commit comments

Comments
 (0)