Skip to content

Commit 046a093

Browse files
nicodevsnicodevs
authored
docs: add VueSchool Summer Sale banner (#3564)
1 parent 11dd184 commit 046a093

File tree

7 files changed

+276
-44
lines changed

7 files changed

+276
-44
lines changed

‎docs/.vuepress/components/HomeSponsors.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,17 @@ export default {
2727
<style>
2828
#sponsors {
2929
text-align: center;
30-
padding: 35px 40px 45px;
31-
margin: 0 -2rem;
30+
padding: 35px 30px 45px;
3231
background-color: #f6f6f6;
3332
}
3433
34+
@media (min-width: 768px) {
35+
#sponsors {
36+
padding: 35px 40px 45px;
37+
margin: 0 -2rem;
38+
}
39+
}
40+
3541
#sponsors h3 {
3642
color: #999;
3743
margin: 0 0 10px;

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

Lines changed: 7 additions & 0 deletions
Loading

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

6.09 KB
Loading

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

Lines changed: 13 additions & 0 deletions
Loading

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

Lines changed: 16 additions & 0 deletions
Loading

‎docs/.vuepress/theme/Layout.vue

Lines changed: 62 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,51 @@
11
<template>
2-
<ParentLayout>
3-
<template #page-top>
4-
<CarbonAds
5-
v-if="$site.themeConfig.carbonAds"
6-
:key="'ca:' + $page.path"
7-
:code="$site.themeConfig.carbonAds.carbon"
8-
:placement="$site.themeConfig.carbonAds.placement"
9-
/>
10-
</template>
11-
<template #page-bottom>
12-
<BuySellAds
13-
v-if="$site.themeConfig.carbonAds"
14-
:key="'bsa:' + $page.path"
15-
:code="$site.themeConfig.carbonAds.custom"
16-
:placement="$site.themeConfig.carbonAds.placement"
17-
/>
18-
</template>
19-
<template #sidebar-bottom>
20-
<div class="sponsors">
21-
<a
22-
href="https://github.com/sponsors/posva"
23-
target="_blank"
24-
rel="noopener"
25-
>Sponsors</a
26-
>
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 #page-top>
12+
<CarbonAds
13+
v-if="$site.themeConfig.carbonAds"
14+
:key="'ca:' + $page.path"
15+
:code="$site.themeConfig.carbonAds.carbon"
16+
:placement="$site.themeConfig.carbonAds.placement"
17+
/>
18+
</template>
19+
<template #page-bottom>
20+
<BuySellAds
21+
v-if="$site.themeConfig.carbonAds"
22+
:key="'bsa:' + $page.path"
23+
:code="$site.themeConfig.carbonAds.custom"
24+
:placement="$site.themeConfig.carbonAds.placement"
25+
/>
26+
</template>
27+
<template #sidebar-bottom>
28+
<div class="sponsors">
29+
<a
30+
href="https://github.com/sponsors/posva"
31+
target="_blank"
32+
rel="noopener"
33+
>Sponsors</a
34+
>
2735

28-
<a
29-
v-for="sponsor in sponsors.gold"
30-
:href="sponsor.href"
31-
:key="sponsor.href"
32-
target="_blank"
33-
rel="noopener"
34-
>
35-
<img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
36-
</a>
37-
</div>
38-
</template>
39-
</ParentLayout>
36+
<a
37+
v-for="sponsor in sponsors.gold"
38+
:href="sponsor.href"
39+
:key="sponsor.href"
40+
target="_blank"
41+
rel="noopener"
42+
>
43+
<img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
44+
</a>
45+
</div>
46+
</template>
47+
</ParentLayout>
48+
</div>
4049
</template>
4150

4251
<script>
@@ -47,15 +56,26 @@ import sponsors from '../components/sponsors.json'
4756
4857
export default {
4958
name: 'Layout',
50-
5159
components: {
5260
ParentLayout,
5361
CarbonAds,
54-
BuySellAds
62+
BuySellAds,
63+
BannerTop: () => import('./components/BannerTop.vue')
5564
},
56-
57-
created() {
58-
this.sponsors = sponsors
65+
data () {
66+
return {
67+
sponsors,
68+
showTopBanner: false
69+
}
70+
},
71+
mounted () {
72+
this.showTopBanner = !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')
73+
},
74+
methods: {
75+
closeBannerTop () {
76+
this.showTopBanner = false
77+
localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
78+
}
5979
}
6080
}
6181
</script>

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

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
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 lang="stylus">
33+
$topBannerHeight ?= 5rem
34+
$topBannerHeightMobile ?= 3.125rem
35+
$navbarHeight ?= 3.6rem
36+
$contentClass = '.theme-default-content'
37+
38+
@import url('https://fonts.googleapis.com/css?family=Roboto')
39+
40+
// Banner
41+
#vs
42+
align-items: center
43+
background-color: #202A5A
44+
box-sizing: border-box
45+
color: #fff
46+
display: none
47+
font-family 'Roboto', Oxygen, Fira Sans, Helvetica Neue, sans-serif
48+
justify-content: center
49+
position: fixed
50+
padding: 0 10px
51+
left: 0
52+
right: 0
53+
top: 0
54+
z-index: 100
55+
height: $topBannerHeightMobile
56+
@media (min-width: 680px)
57+
height: $topBannerHeight
58+
&:hover
59+
.vs-core
60+
.vs-button
61+
background: #f22606
62+
63+
.vs-iso
64+
position: absolute
65+
left: 20px
66+
height: 26px
67+
display: none
68+
img
69+
height: 26px
70+
@media (min-width: 680px)
71+
display: block
72+
left: 40px
73+
height: 40px
74+
img
75+
height: 40px
76+
@media (min-width: 900px)
77+
display: none
78+
79+
.vs-logo
80+
position: absolute
81+
display: none
82+
left: 40px
83+
@media (min-width: 900px)
84+
display: block
85+
86+
.vs-core
87+
display: flex
88+
align-items: center
89+
margin-right: 20px
90+
@media (min-width: 680px)
91+
margin-right: 0
92+
93+
.vs-backpack
94+
margin-right: 6px
95+
@media (min-width: 680px)
96+
margin-right: 14px
97+
img
98+
height: 50px
99+
@media (min-width: 680px)
100+
height: 74px
101+
102+
.vs-slogan
103+
color: #FFF
104+
font-weight: bold
105+
font-size: 14px
106+
@media (min-width: 680px)
107+
font-size: 18px
108+
> .vs-slogan-light
109+
color: #ff5338
110+
display: block
111+
text-align: left
112+
@media (min-width: 900px)
113+
text-align: center
114+
display: inline
115+
116+
.vs-button
117+
margin-left: 43px
118+
color: #FFF
119+
padding: 13px 24px
120+
border-radius: 40px
121+
display: none
122+
background: #ff5338
123+
font-weight: bold
124+
@media (min-width: 680px)
125+
display: inline-block
126+
127+
.vs-close
128+
right: 10px
129+
position: absolute
130+
padding: 10px
131+
@media (min-width: 680px)
132+
right: 20px
133+
&:hover
134+
color: #56D8FF
135+
136+
/************************************/
137+
138+
// Show banner only if the container has class "has-top-banner"
139+
.main-container.has-top-banner
140+
#vs
141+
display: flex
142+
143+
// Add margin top to body, navbar and sidebar
144+
.main-container.has-top-banner
145+
margin-top: $topBannerHeightMobile
146+
.navbar
147+
margin-top: $topBannerHeightMobile
148+
.sidebar
149+
margin-top: $topBannerHeightMobile
150+
@media (min-width: 680px)
151+
.main-container.has-top-banner
152+
margin-top: $topBannerHeight
153+
.navbar
154+
margin-top: $topBannerHeight
155+
.sidebar
156+
margin-top: $topBannerHeight
157+
158+
// Adjust titles margin and padding for anchor links
159+
.main-container.has-top-banner
160+
{$contentClass}:not(.custom)
161+
h1, h2, h3, h4, h5, h6
162+
margin-top (2.5rem - $topBannerHeightMobile - $navbarHeight)
163+
padding-top ($navbarHeight + $topBannerHeightMobile + 1rem)
164+
@media (min-width: 680px)
165+
.main-container.has-top-banner
166+
{$contentClass}:not(.custom)
167+
h1, h2, h3, h4, h5, h6
168+
margin-top (2.5rem - $topBannerHeight - $navbarHeight)
169+
padding-top ($navbarHeight + $topBannerHeight + 1rem)
170+
</style>

0 commit comments

Comments
 (0)