Skip to content

Commit ced0242

Browse files
nicodevsnicodevs
authored
docs: Add VueSchool Summer Sale banner (vuejs#991)
* docs(docs): Add VueSchool Summer Sale banner * docs(docs): Update VueSchool Summer Sale banner * docs(docs): Make BannerTop async
1 parent aadeb52 commit ced0242

File tree

6 files changed

+306
-25
lines changed

6 files changed

+306
-25
lines changed

‎docs/.vitepress/components/BannerTop.vue

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<template>
2+
<a id="vs" href="https://vueschool.io/sales/summer-vue/?friend=vuerouter" target="_blank" rel="noreferrer">
3+
<div class="vs-iso">
4+
<img src="/images/vueschool/vs-iso.svg" alt="Vue School Logo">
5+
</div>
6+
<div class="vs-logo">
7+
<img src="/images/vueschool/vs-logo.svg" alt="Vue School Logo">
8+
</div>
9+
<div class="vs-core">
10+
<div class="vs-backpack">
11+
<img src="/images/vueschool/vs-backpack.png" alt="Backpack">
12+
</div>
13+
<div class="vs-slogan">
14+
3-months Vue School for only $49 <span style="text-decoration: line-through">$75</span>!
15+
<span class="vs-slogan-light">
16+
Limited Time Offer
17+
</span>
18+
</div>
19+
<div class="vs-button">
20+
GET ACCESS
21+
</div>
22+
</div>
23+
<div
24+
id="vs-close"
25+
class="vs-close"
26+
@click.stop.prevent="$emit('close')">
27+
<img src="/images/vueschool/close.svg" alt="Close">
28+
</div>
29+
</a>
30+
</template>
31+
32+
<style>
33+
#vs {
34+
align-items: center;
35+
background-color: #202A5A;
36+
box-sizing: border-box;
37+
color: #fff;
38+
font-family: 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif;
39+
justify-content: center;
40+
position: fixed;
41+
padding: 0 10px;
42+
left: 0;
43+
right: 0;
44+
top: 0;
45+
z-index: 100;
46+
height: 3.125rem;
47+
display: flex;
48+
}
49+
50+
#vs:hover {
51+
text-decoration: none;
52+
}
53+
54+
@media (min-width: 680px) {
55+
#vs {
56+
height: 5rem;
57+
}
58+
}
59+
60+
#vs:hover .vs-core .vs-button {
61+
background: #f22606;
62+
}
63+
64+
#vs .vs-iso {
65+
position: absolute;
66+
left: 20px;
67+
height: 26px;
68+
display: none;
69+
}
70+
71+
#vs .vs-iso img {
72+
height: 26px;
73+
}
74+
75+
@media (min-width: 680px) {
76+
#vs .vs-iso {
77+
left: 40px;
78+
height: 40px;
79+
display: inline-block;
80+
}
81+
82+
#vs .vs-iso img {
83+
height: 40px;
84+
}
85+
}
86+
87+
@media (min-width: 900px) {
88+
#vs .vs-iso {
89+
display: none;
90+
}
91+
}
92+
93+
#vs .vs-logo {
94+
position: absolute;
95+
display: none;
96+
left: 40px;
97+
}
98+
99+
@media (min-width: 900px) {
100+
#vs .vs-logo {
101+
display: block;
102+
}
103+
}
104+
105+
#vs .vs-core {
106+
display: flex;
107+
align-items: center;
108+
}
109+
110+
#vs .vs-core .vs-backpack {
111+
margin-right: 14px;
112+
}
113+
114+
#vs .vs-core .vs-backpack img {
115+
height: 50px;
116+
}
117+
118+
@media (min-width: 680px) {
119+
#vs .vs-core .vs-backpack img {
120+
height: 74px;
121+
}
122+
}
123+
124+
#vs .vs-core .vs-slogan {
125+
color: #FFF;
126+
font-weight: bold;
127+
font-size: 14px;
128+
margin-right: 26px;
129+
}
130+
131+
@media (min-width: 680px) {
132+
#vs .vs-core .vs-slogan {
133+
margin-right: 0;
134+
font-size: 18px;
135+
}
136+
}
137+
138+
#vs .vs-core .vs-slogan > .vs-slogan-light {
139+
color: #ff5338;
140+
display: block;
141+
text-align: left;
142+
}
143+
144+
@media (min-width: 900px) {
145+
#vs .vs-core .vs-slogan > .vs-slogan-light {
146+
text-align: center;
147+
display: inline;
148+
}
149+
}
150+
151+
#vs .vs-core .vs-button {
152+
margin-left: 43px;
153+
color: #fff;
154+
padding: 13px 24px;
155+
border-radius: 40px;
156+
display: none;
157+
background: #ff5338;
158+
font-weight: bold;
159+
}
160+
161+
@media (min-width: 680px) {
162+
#vs .vs-core .vs-button {
163+
display: inline-block;
164+
}
165+
}
166+
167+
#vs .vs-close {
168+
right: 10px;
169+
position: absolute;
170+
padding: 10px;
171+
}
172+
173+
@media (min-width: 680px) {
174+
#vs .vs-close {
175+
right: 20px;
176+
}
177+
}
178+
179+
#vs .vs-close:hover {
180+
color: #56d8ff;
181+
}
182+
183+
/************************************/
184+
185+
.main-container.has-top-banner #vs {
186+
display: flex;
187+
}
188+
189+
.main-container.has-top-banner {
190+
margin-top: 3.125rem;
191+
}
192+
193+
.main-container.has-top-banner .nav-bar {
194+
margin-top: 3.125rem;
195+
}
196+
197+
.main-container.has-top-banner .sidebar {
198+
margin-top: 3.125rem;
199+
}
200+
201+
.main-container.has-top-banner .page {
202+
margin-top: 3.125rem;
203+
}
204+
205+
@media (min-width: 680px) {
206+
.main-container.has-top-banner {
207+
margin-top: 5rem;
208+
}
209+
210+
.main-container.has-top-banner .nav-bar {
211+
margin-top: 5rem;
212+
}
213+
214+
.main-container.has-top-banner .sidebar {
215+
margin-top: 5rem;
216+
}
217+
218+
.main-container.has-top-banner .page {
219+
margin-top: 5rem;
220+
}
221+
}
222+
</style>

‎docs/.vitepress/theme/Layout.vue

Lines changed: 48 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,65 @@
11
<template>
2-
<ParentLayout>
3-
<template #sidebar-bottom>
4-
<div class="sponsors">
5-
<a
6-
href="https://github.com/sponsors/posva"
7-
target="_blank"
8-
rel="noopener"
9-
>Sponsors</a
10-
>
2+
<div
3+
class="main-container"
4+
:class="{ 'has-top-banner': showTopBanner }"
5+
>
6+
<BannerTop
7+
v-if="showTopBanner"
8+
@close="closeBannerTop"
9+
/>
10+
<ParentLayout>
11+
<template #sidebar-bottom>
12+
<div class="sponsors">
13+
<a
14+
href="https://github.com/sponsors/posva"
15+
target="_blank"
16+
rel="noopener"
17+
>Sponsors</a
18+
>
1119

12-
<a
13-
v-for="sponsor in sponsors.gold"
14-
:href="sponsor.href"
15-
:key="sponsor.href"
16-
target="_blank"
17-
rel="noopener"
18-
>
19-
<img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
20-
</a>
21-
</div>
22-
</template>
23-
</ParentLayout>
20+
<a
21+
v-for="sponsor in sponsors.gold"
22+
:href="sponsor.href"
23+
:key="sponsor.href"
24+
target="_blank"
25+
rel="noopener"
26+
>
27+
<img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
28+
</a>
29+
</div>
30+
</template>
31+
</ParentLayout>
32+
</div>
2433
</template>
2534

2635
<script>
36+
import { defineAsyncComponent } from 'vue'
2737
import DefaultTheme from 'vitepress/dist/client/theme-default'
2838
import sponsors from '../components/sponsors.json'
2939
40+
const BannerTop = defineAsyncComponent(() => import('../components/BannerTop.vue'))
41+
3042
export default {
3143
name: 'Layout',
32-
3344
components: {
3445
ParentLayout: DefaultTheme.Layout,
46+
BannerTop
3547
},
36-
37-
setup() {
38-
return { sponsors }
48+
data () {
49+
return {
50+
sponsors,
51+
showTopBanner: false
52+
}
53+
},
54+
mounted () {
55+
this.showTopBanner = !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')
3956
},
57+
methods: {
58+
closeBannerTop () {
59+
this.showTopBanner = false
60+
localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
61+
}
62+
}
4063
}
4164
</script>
4265

‎docs/public/images/vueschool/close.svg

Lines changed: 7 additions & 0 deletions
Loading

‎docs/public/images/vueschool/vs-backpack.png

6.09 KB
Loading

‎docs/public/images/vueschool/vs-iso.svg

Lines changed: 13 additions & 0 deletions
Loading

‎docs/public/images/vueschool/vs-logo.svg

Lines changed: 16 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)