Skip to content

Commit 161170e

Browse files
rahaugrahaug
authored
docs: add vueschool banner (vuejs#848)
1 parent 4142871 commit 161170e

File tree

9 files changed

+755
-19
lines changed

9 files changed

+755
-19
lines changed

‎docs/.vitepress/theme/Layout.vue

+47-19
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,39 @@
11
<template>
2-
<ParentLayout>
3-
<template #page-top-ads><span /></template>
4-
<template #page-top>
5-
<CarbonAds
6-
v-if="$site.themeConfig.carbonAds"
7-
:key="'carbon' + $page.relativePath"
8-
:code="$site.themeConfig.carbonAds.carbon"
9-
:placement="$site.themeConfig.carbonAds.placement"
10-
/>
11-
</template>
12-
<template #page-bottom>
13-
<BuySellAds
14-
v-if="$site.themeConfig.carbonAds"
15-
:key="'custom' + $page.relativePath"
16-
:code="$site.themeConfig.carbonAds.custom"
17-
:placement="$site.themeConfig.carbonAds.placement"
18-
/>
19-
</template>
20-
</ParentLayout>
2+
<div
3+
class="theme-container"
4+
:class="{ 'has-top-banner': showTopBanner }"
5+
>
6+
<BannerTop
7+
v-if="showTopBanner"
8+
@close="closeBannerTop"
9+
/>
10+
<ParentLayout>
11+
<template #page-top-ads><span /></template>
12+
<template #page-top>
13+
<CarbonAds
14+
v-if="$site.themeConfig.carbonAds"
15+
:key="'carbon' + $page.relativePath"
16+
:code="$site.themeConfig.carbonAds.carbon"
17+
:placement="$site.themeConfig.carbonAds.placement"
18+
/>
19+
</template>
20+
<template #page-bottom>
21+
<BuySellAds
22+
v-if="$site.themeConfig.carbonAds"
23+
:key="'custom' + $page.relativePath"
24+
:code="$site.themeConfig.carbonAds.custom"
25+
:placement="$site.themeConfig.carbonAds.placement"
26+
/>
27+
</template>
28+
</ParentLayout>
29+
</div>
2130
</template>
2231

2332
<script>
2433
import DefaultTheme from 'vitepress/dist/client/theme-default'
2534
import CarbonAds from './components/CarbonAds.vue'
2635
import BuySellAds from './components/BuySellAds.vue'
36+
import BannerTop from './components/BannerTop.vue'
2737
2838
export default {
2939
name: 'Layout',
@@ -32,7 +42,25 @@ export default {
3242
ParentLayout: DefaultTheme.Layout,
3343
CarbonAds,
3444
BuySellAds,
45+
BannerTop
3546
},
47+
48+
data () {
49+
return {
50+
showTopBanner: false
51+
}
52+
},
53+
54+
mounted () {
55+
this.showTopBanner = !localStorage.getItem('VS_OFFER_BANNER_CLOSED')
56+
},
57+
58+
methods: {
59+
closeBannerTop () {
60+
this.showTopBanner = false
61+
localStorage.setItem('VS_OFFER_BANNER_CLOSED', 1)
62+
}
63+
}
3664
}
3765
</script>
3866

‎docs/.vitepress/theme/components/BannerTop.vue

+245
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
<template>
2+
<a id="vs" href="https://vueschool.io/the-vuejs-master-class/?friend=vuerouter#plans" 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-slogan">
11+
<div class="vs-slogan-up">
12+
LEARN VUE AT VUE SCHOOL
13+
</div>
14+
<div class="vs-slogan-down">
15+
Register today and get <strong>20% OFF</strong>
16+
</div>
17+
</div>
18+
<div class="vs-button">
19+
<div class="vs-button-inside">
20+
<img src="/images/vueschool/learn-more.svg" alt="Learn More">
21+
</div>
22+
</div>
23+
</div>
24+
<div
25+
id="vs-close"
26+
class="vs-close"
27+
@click.stop.prevent="$emit('close')">
28+
<img src="/images/vueschool/close.svg" alt="Close">
29+
</div>
30+
</a>
31+
</template>
32+
33+
<style>
34+
#vs {
35+
align-items: center;
36+
background-color: #1e204d;
37+
background-position: top right;
38+
background-repeat: no-repeat;
39+
background-size: cover;
40+
box-sizing: border-box;
41+
color: #fff;
42+
font-family: 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif;
43+
justify-content: center;
44+
position: fixed;
45+
padding: 0 10px;
46+
left: 0;
47+
right: 0;
48+
top: 0;
49+
z-index: 100;
50+
background-image: url("/images/vueschool/vs-banner-bg-mobile-2.svg");
51+
height: 3.125rem;
52+
display: flex;
53+
}
54+
55+
#vs:hover {
56+
text-decoration: none;
57+
}
58+
59+
@media (min-width: 680px) {
60+
#vs {
61+
height: 5rem;
62+
background-image: url("/images/vueschool/vs-banner-bg-tablet-2.svg");
63+
}
64+
}
65+
66+
@media (min-width: 900px) {
67+
#vs {
68+
background-image: url("/images/vueschool/vs-banner-bg-desktop-2.svg");
69+
}
70+
}
71+
72+
#vs:hover .vs-core .vs-button .vs-button-inside {
73+
background: linear-gradient(#ed81eb, #d457d0);
74+
}
75+
76+
#vs .vs-iso {
77+
position: absolute;
78+
left: 20px;
79+
height: 26px;
80+
}
81+
82+
#vs .vs-iso img {
83+
height: 26px;
84+
}
85+
86+
@media (min-width: 680px) {
87+
#vs .vs-iso {
88+
left: 40px;
89+
height: 40px;
90+
}
91+
92+
#vs .vs-iso img {
93+
height: 40px;
94+
}
95+
}
96+
97+
@media (min-width: 900px) {
98+
#vs .vs-iso {
99+
display: none;
100+
}
101+
}
102+
103+
#vs .vs-logo {
104+
position: absolute;
105+
display: none;
106+
left: 40px;
107+
}
108+
109+
@media (min-width: 900px) {
110+
#vs .vs-logo {
111+
display: block;
112+
}
113+
}
114+
115+
#vs .vs-core {
116+
display: flex;
117+
align-items: center;
118+
}
119+
120+
#vs .vs-core .vs-slogan {
121+
text-align: center;
122+
}
123+
124+
#vs .vs-core .vs-slogan .vs-slogan-up {
125+
color: #47b785;
126+
font-size: 14px;
127+
font-weight: bold;
128+
}
129+
130+
@media (min-width: 680px) {
131+
#vs .vs-core .vs-slogan .vs-slogan-up {
132+
font-size: 18px;
133+
}
134+
}
135+
136+
#vs .vs-core .vs-slogan .vs-slogan-down {
137+
color: #fff;
138+
font-size: 12px;
139+
padding-top: 2px;
140+
}
141+
142+
@media (min-width: 680px) {
143+
#vs .vs-core .vs-slogan .vs-slogan-down {
144+
font-size: 16px;
145+
}
146+
}
147+
148+
#vs .vs-core .vs-slogan .vs-slogan-down strong {
149+
color: #fff;
150+
font-weight: bold;
151+
}
152+
153+
#vs .vs-core .vs-button {
154+
margin-left: 43px;
155+
color: #fff;
156+
background: linear-gradient(to bottom, #b349b0, #dc61da);
157+
padding: 2px;
158+
border-radius: 40px;
159+
display: none;
160+
}
161+
162+
@media (min-width: 680px) {
163+
#vs .vs-core .vs-button {
164+
display: inline-block;
165+
}
166+
}
167+
168+
#vs .vs-core .vs-button .vs-button-inside {
169+
border-radius: 40px;
170+
background: linear-gradient(#dc61da, #b349b0);
171+
transition: all 0.25s ease-in;
172+
padding: 12px 24px 8px;
173+
line-height: 0;
174+
}
175+
176+
@media (min-width: 680px) {
177+
#vs .vs-core .vs-button .vs-button-inside {
178+
padding: 12px 24px 8px;
179+
}
180+
}
181+
182+
#vs .vs-core .vs-button.vs-button-alt {
183+
background: linear-gradient(to bottom, #ffcc38, #ffd13d);
184+
}
185+
186+
#vs .vs-core .vs-button.vs-button-alt .vs-button-inside {
187+
background: linear-gradient(to bottom, #ffe24f, #ffa40e);
188+
}
189+
190+
#vs .vs-close {
191+
right: 10px;
192+
position: absolute;
193+
padding: 10px;
194+
}
195+
196+
@media (min-width: 680px) {
197+
#vs .vs-close {
198+
right: 20px;
199+
}
200+
}
201+
202+
#vs .vs-close:hover {
203+
color: #56d8ff;
204+
}
205+
206+
/************************************/
207+
208+
.theme-container.has-top-banner #vs {
209+
display: flex;
210+
}
211+
212+
.theme-container.has-top-banner {
213+
margin-top: 3.125rem;
214+
}
215+
216+
.theme-container.has-top-banner .nav-bar {
217+
margin-top: 3.125rem;
218+
}
219+
220+
.theme-container.has-top-banner .sidebar {
221+
margin-top: 3.125rem;
222+
}
223+
224+
.theme-container.has-top-banner .page {
225+
margin-top: 3.125rem;
226+
}
227+
228+
@media (min-width: 680px) {
229+
.theme-container.has-top-banner {
230+
margin-top: 5rem;
231+
}
232+
233+
.theme-container.has-top-banner .nav-bar {
234+
margin-top: 5rem;
235+
}
236+
237+
.theme-container.has-top-banner .sidebar {
238+
margin-top: 5rem;
239+
}
240+
241+
.theme-container.has-top-banner .page {
242+
margin-top: 5rem;
243+
}
244+
}
245+
</style>

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

+7
Loading

‎docs/public/images/vueschool/learn-more.svg

+9
Loading

0 commit comments

Comments
 (0)