Skip to content

Commit

Permalink
docs: add ecosystem (#1319)
Browse files Browse the repository at this point in the history 
* docs: home page rework

* docs: fix home-page bottom margin

* docs:  ecosystem responsivity

* refactor: change md-content to md-card

* refactor: change background color for cards

* refactor: ecosystem cards layout

- add links
- add ripple
- use colored cards
- rework layout

* refactor: remove unused classes

* refactor: change layout

* refactor: fix responsivity

* docs: add codepen link
  • Loading branch information
@Samuell1 @marcosmoura
Samuell1 authored and marcosmoura committed Jan 29, 2018
1 parent a3baf78 commit ae49a63
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 77 deletions.
31 changes: 30 additions & 1 deletion docs/app/pages/Home/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<md-icon class="home-icon-indicator" @click.native="scrollDown">keyboard_arrow_down</md-icon>
</div>

<!-- <home-ecosystem /> -->
<home-ecosystem />
<home-sponsors />
</splash-container>
</template>
Expand Down Expand Up @@ -86,3 +86,32 @@
animation: home-icon-indicator 2s infinite $md-transition-stand-timing;
}
</style>

<style lang="scss">
@import "~vue-material/components/MdAnimation/variables";
@import "~vue-material/components/MdIcon/mixins";
@import "~vue-material/components/MdLayout/mixins";
.page-wrapper {
max-width: 1344px;
margin: 0 auto;
padding: 0 16px;
}
.home-title {
max-width: 1312px;
margin: 0 auto;
color: rgba(#000, .87);
position: relative;
padding: 16px 0;
@include md-layout-medium {
padding: 16px;
}
.md-icon {
position: absolute;
top: 2px;
bottom: 0;
left: -48px;
}
}
</style>
184 changes: 121 additions & 63 deletions docs/app/pages/Home/HomeEcosystem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,148 @@
<template>
<md-content md-tag="section" md-theme="default" class="home-ecosystem">
<h2 class="home-ecosystem-title md-display-1">{{ $t('pages.home.ecosystem') }}</h2>

<div class="home-repo-list md-layout-column">
<div
class="home-repo md-layout-row md-layout-column-xsmall"
v-for="(item, index) in 2"
:key="index"
:class="{ reverse: (index + 1) % 2 === 0 }">
<div class="home-repo-content md-layout-column md-flex-55 md-flex-xsmall-100 md-align-start-start">
<h3 class="home-repo-title md-headline">Official Boilerplate</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam qui enim harum excepturi nemo itaque quidem dolore unde asperiores, recusandae reiciendis perferendis laboriosam cum obcaecati quos assumenda libero labore! Expedita.</p>
<md-button class="md-primary md-raised md-button-spaced">{{ $t('pages.home.viewProject') }}</md-button>
<h2 class="home-title md-headline">
<md-icon>settings</md-icon>
{{ $t('pages.home.ecosystem') }}
</h2>
<div class="page-wrapper">
<div class="md-layout md-gutter">
<div class="md-layout-item md-small-size-100">
<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')">
<md-ripple>
<md-card-content>
<div class="content">
<div class="md-title">Advanced Webpack SPA</div>
<p>A full-featured Webpack + Vue Material setup with hot-reload, lint-on-save, unit testing, scss preprocessing & css extraction.</p>
</div>
<div class="image">
<img src="/assets/boilerplates/webpack-advanced.png" alt="webpack">
</div>
</md-card-content>
</md-ripple>
</md-card>
</div>
<div class="md-layout-item md-small-size-100">
<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')">
<md-ripple>
<md-card-content>
<div class="content">
<div class="md-title">Nuxt.js Universal</div>
<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>
</div>
<div class="image">
<img src="/assets/boilerplates/nuxt.png" alt="nuxtjs">
</div>
</md-card-content>
</md-ripple>
</md-card>
</div>
<div class="md-layout-item md-small-size-100 md-size-30">
<md-card md-with-hover class="md-elevation-2 flying" @click.native="$router.push('/getting-started')">
<md-ripple>
<md-card-content>
<div class="content">
<div class="md-title">Single HTML file</div>
<p>The simplest possible Vue Material setup in a single HTML file. But without SCSS or ES7.</p>
</div>
<img src="/assets/boilerplates/html.png" alt="html">
</md-card-content>
</md-ripple>
</md-card>
<md-card md-with-hover class="md-elevation-2 flying" @click.native="openLink('https://codepen.io/vue-material/pen/RxGmyb')">
<md-ripple>
<md-card-content>
<div class="content">
<div class="md-title">Codepen for prototyping</div>
<p>For fast prototyping, examples or issues reports is best to use codepen.</p>
</div>
<img src="/assets/boilerplates/codepen.svg" alt="codepen">
</md-card-content>
</md-ripple>
</md-card>
</div>

<img src="https://placeimg.com/656/300/tech/grayscale" class="md-flex-45">
</div>
</div>
</md-content>
</template>

<script>
export default {
name: 'HomeEcosystem'
name: 'HomeEcosystem',
methods: {
openLink (link) {
window.open(link, '_blank')
}
}
}
</script>

<style lang="scss" scoped>
@import "~vue-material/components/MdAnimation/variables";
@import "~vue-material/components/MdLayout/mixins";
.home-ecosystem {
width: calc(100% + 32px);
padding: 56px 16px;
margin: 0 -16px -16px;
}
.home-repo,
.home-ecosystem-title {
max-width: 1312px;
margin: 0 auto;
}
@import "~vue-material/theme/engine";
.home-ecosystem-title {
margin-bottom: 24px;
color: rgba(#000, .87);
}
@include md-register-theme("blue-card", (
primary: md-get-palette-color(blue, A200)
));
@include md-register-theme("green-card", (
primary: md-get-palette-color(teal, 500)
));
.home-repo {
margin-top: 48px;
@import "~vue-material/base/theme";
@import "~vue-material/components/MdCard/theme";
@include md-layout-xsmall {
flex-direction: column-reverse;
.home-ecosystem {
width: calc(100% + 32px);
padding-bottom: 28px;
margin: 0 -16px;
background: #f5f5f5;
.md-layout-item {
@include md-layout-small {
margin-top: 16px;
}
}
&.reverse {
flex-direction: row-reverse;
@include md-layout-xsmall {
flex-direction: column-reverse;
.md-card {
position: relative;
overflow: hidden;
background: #fff;
margin-bottom: 16px;
.md-card-content {
display: flex;
padding: 16px;
height: 100%;
}
.home-repo-content {
padding-right: 0;
padding-left: 48px;
@include md-layout-xsmall {
padding: 0;
&.full-height {
height: 100%;
}
.content {
z-index: 1;
flex-grow: 1;
}
.image {
width: 100%;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
img {
max-height: 160px;
}
}
&.flying {
p {
margin-right: 80px;
}
img {
position: absolute;
bottom: -40px;
right: -40px;
max-height: 160px;
z-index: 0;
opacity: .7;
}
}
}
}
.home-repo-content {
padding-right: 48px;
@include md-layout-xsmall {
padding: 0;
}
}
.home-repo-title {
margin-top: 16px;
}
.md-button {
margin: 24px 0 0;
}
</style>
18 changes: 5 additions & 13 deletions docs/app/pages/Home/HomeSponsors.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<template>
<md-content md-tag="section" md-theme="default" class="home-sponsors">
<h2 class="home-title md-headline">
<md-icon>monetization_on</md-icon>
{{ $t('pages.home.sponsors') }} & {{ $t('pages.home.backers') }}
</h2>
<div class="page-wrapper">
<h2 class="home-sponsors-title md-display-1">{{ $t('pages.home.sponsors') }} & {{ $t('pages.home.backers') }}</h2>

<div class="home-sponsors-description">
<i18n path="pages.home.sponsorsDescription" tag="p">
<a href="https://www.github.com/marcosmoura" target="_blank">Marcos Moura</a>
Expand Down Expand Up @@ -63,17 +65,7 @@
.home-sponsors {
width: calc(100% + 32px);
margin: 0 -16px -16px;
}
.page-wrapper {
max-width: 1344px;
margin: 0 auto;
padding: 56px 16px;
}
.home-sponsors-title {
margin-bottom: 56px;
color: rgba(#000, .87);
padding-bottom: 28px;
}
.home-sponsors-patreon {
Expand Down
2 changes: 2 additions & 0 deletions docs/assets/boilerplates/codepen.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/boilerplates/html.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/boilerplates/nuxt.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/boilerplates/webpack-advanced.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ae49a63

Please sign in to comment.