Skip to content

Commit b9a4770

Browse files
author
Jeff
committed
update splash page
1 parent 17312da commit b9a4770

File tree

3 files changed

+56
-100
lines changed

3 files changed

+56
-100
lines changed

‎docs/homepage/assets/scss/_demo.scss

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -135,20 +135,14 @@ code {
135135
}
136136
}
137137

138-
.overlay {
139-
display: flex;
140-
justify-content: center;
141-
align-items: center;
142-
z-index: 999;
143-
position: fixed;
144-
width: 100%;
145-
height: 100vh;
146-
top: 0;
147-
left: 0;
148-
background: rgba($code-black, .8);
149-
transform: translateY(200vh);
150-
transition: .25s transform;
151-
&.active {
152-
transform: translateY(0);
153-
}
138+
.content {
139+
transition: opacity .25s;
140+
}
141+
142+
.hidden {
143+
opacity: 0;
144+
}
145+
146+
.dropdown-action {
147+
margin-top: 5em;
154148
}

‎docs/homepage/home.html

Lines changed: 41 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -30,46 +30,6 @@
3030
<body>
3131
<div id="app">
3232

33-
<div class="overlay" :class="{ active: loading }" v-cloak v-show="loading">
34-
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
35-
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
36-
<g fill="none" fill-rule="evenodd" stroke-width="2">
37-
<circle cx="22" cy="22" r="1">
38-
<animate attributeName="r"
39-
begin="0s" dur="1.8s"
40-
values="1; 20"
41-
calcMode="spline"
42-
keyTimes="0; 1"
43-
keySplines="0.165, 0.84, 0.44, 1"
44-
repeatCount="indefinite" />
45-
<animate attributeName="stroke-opacity"
46-
begin="0s" dur="1.8s"
47-
values="1; 0"
48-
calcMode="spline"
49-
keyTimes="0; 1"
50-
keySplines="0.3, 0.61, 0.355, 1"
51-
repeatCount="indefinite" />
52-
</circle>
53-
<circle cx="22" cy="22" r="1">
54-
<animate attributeName="r"
55-
begin="-0.9s" dur="1.8s"
56-
values="1; 20"
57-
calcMode="spline"
58-
keyTimes="0; 1"
59-
keySplines="0.165, 0.84, 0.44, 1"
60-
repeatCount="indefinite" />
61-
<animate attributeName="stroke-opacity"
62-
begin="-0.9s" dur="1.8s"
63-
values="1; 0"
64-
calcMode="spline"
65-
keyTimes="0; 1"
66-
keySplines="0.3, 0.61, 0.355, 1"
67-
repeatCount="indefinite" />
68-
</circle>
69-
</g>
70-
</svg>
71-
</div>
72-
7333
<h1>Vue Select</h1>
7434

7535
<p class="accolades lead">
@@ -98,46 +58,56 @@ <h1>Vue Select</h1>
9858
to Select2/Chosen without the overhead of jQuery.
9959
</p>
10060

101-
<v-select @input="onInput" id="v-select" :options="options" label="title">
61+
<v-select id="v-select" :options="options" v-model="selected" label="title">
10262
<template slot="option" slot-scope="option">
10363
<span class="octicon" :class="option.icon"></span>
10464
{{ option.title }}
10565
</template>
10666
</v-select>
10767

108-
<div class="feature-list">
109-
<ul class="list-vue">
110-
<li>Supports Vuex</li>
111-
<li>Tagging Support</li>
112-
<li>Custom Templating</li>
113-
<li>Zero JS/CSS dependencies</li>
114-
<li>Custom Filtering Algoirthms</li>
115-
</ul>
116-
117-
<ul class="list-vue">
118-
<li>+95% Test Coverage</li>
119-
<li>Select Single/Multiple</li>
120-
<li>Typeahead Suggestions</li>
121-
<li>Supports RTL & Translations</li>
122-
<li>Plays nice with CSS Frameworks</li>
123-
</ul>
124-
</div>
125-
126-
<p>
127-
And so much more! Get started with: <br>
128-
<code>yarn add vue-select</code>
129-
</p>
130-
131-
<div class="cta">
132-
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
133-
<span class="octicon octicon-mark-github"></span> View on GitHub
134-
</a>
135-
136-
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select/docs/">
137-
<span class="octicon octicon-book"></span> Read the Docs
68+
<div v-cloak v-if="!! selected" class="dropdown-action">
69+
<a class="btn btn-primary btn-outline btn-lg" :href="selected.url">
70+
<span class="octicon" :class="selected.icon"></span>
71+
{{ selected.title }}
13872
</a>
13973
</div>
14074

75+
<section class="content" :class="{ hidden: selected }">
76+
77+
<div class="feature-list">
78+
<ul class="list-vue">
79+
<li>Supports Vuex</li>
80+
<li>Tagging Support</li>
81+
<li>Custom Templating</li>
82+
<li>Zero JS/CSS dependencies</li>
83+
<li>Custom Filtering Algoirthms</li>
84+
</ul>
85+
86+
<ul class="list-vue">
87+
<li>+95% Test Coverage</li>
88+
<li>Select Single/Multiple</li>
89+
<li>Typeahead Suggestions</li>
90+
<li>Supports RTL & Translations</li>
91+
<li>Plays nice with CSS Frameworks</li>
92+
</ul>
93+
</div>
94+
95+
<p>
96+
And so much more! Get started with: <br>
97+
<code>yarn add vue-select</code>
98+
</p>
99+
100+
<div class="cta">
101+
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
102+
<span class="octicon octicon-mark-github"></span> View on GitHub
103+
</a>
104+
105+
<a class="btn btn-primary btn-outline btn-lg" href="/docs/">
106+
<span class="octicon octicon-book"></span> Read the Docs
107+
</a>
108+
</div>
109+
</section>
110+
141111
</div>
142112
<script>
143113
(function (i, s, o, g, r, a, m) {

‎docs/homepage/home.js

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,22 @@ new Vue({
1111
data() {
1212
return {
1313
loading: false,
14+
selected: null,
1415
options: [
1516
{
1617
title: 'Read the Docs',
1718
icon: 'octicon-book',
18-
url: 'https://codeclimate.com/github/sagalbot/vue-select'
19+
url: '/docs/'
1920
},
2021
{
2122
title: 'View on GitHub',
2223
icon: 'octicon-mark-github',
23-
url: 'https://codeclimate.com/github/sagalbot/vue-select'
24+
url: 'https://github.com/sagalbot/vue-select'
2425
},
2526
{
2627
title: 'View on NPM',
2728
icon: 'octicon-database',
28-
url: 'https://codeclimate.com/github/sagalbot/vue-select'
29+
url: 'https://www.npmjs.com/package/vue-select'
2930
},
3031
{
3132
title: 'View Code Climate Analysis',
@@ -35,18 +36,9 @@ new Vue({
3536
{
3637
title: 'View Codepen Examples',
3738
icon: 'octicon-pencil',
38-
url: 'https://codeclimate.com/github/sagalbot/vue-select'
39+
url: 'https://codepen.io/collection/nrkgxV/'
3940
},
4041
]
4142
}
42-
},
43-
methods: {
44-
onInput(option) {
45-
this.loading = true;
46-
this.go(option.url);
47-
},
48-
go(url) {
49-
window.location = url;
50-
}
5143
}
5244
});

0 commit comments

Comments
 (0)