Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add ecosystem #1319

Merged
merged 11 commits into from
Jan 29, 2018
Merged

docs: add ecosystem #1319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1fbf280
docs: home page rework
Samuell1 Dec 12, 2017
66f28f0
docs: fix home-page bottom margin
Samuell1 Dec 12, 2017
51b444d
docs: ecosystem responsivity
Samuell1 Dec 12, 2017
d7865a1
refactor: change md-content to md-card
Samuell1 Dec 19, 2017
95083e5
refactor: change background color for cards
Samuell1 Dec 19, 2017
b319326
refactor: ecosystem cards layout
Samuell1 Dec 20, 2017
440bf67
refactor: remove unused classes
Samuell1 Dec 20, 2017
452fccb
refactor: change layout
Samuell1 Dec 20, 2017
62dd4ac
refactor: fix responsivity
Samuell1 Dec 20, 2017
071dfa7
docs: add codepen link
Samuell1 Dec 24, 2017
a61cce0
Merge remote-tracking branch 'refs/remotes/origin/dev' into docs/home…
Samuell1 Dec 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion docs/app/pages/Home/Home.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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 @@ -61,17 +63,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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.