Skip to content

Commit 574fbc5

Browse files
nicodevsnicodevs
authored
Add VueSchool Summer Sale banner (#1082)
* Add VueSchool Summer Sale banner * Update VueSchool Summer Sale banner
1 parent 8fb147b commit 574fbc5

File tree

7 files changed

+217
-2
lines changed

7 files changed

+217
-2
lines changed

‎src/.vuepress/config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -475,7 +475,8 @@ module.exports = {
475475
carbon: 'CEBDT27Y',
476476
custom: 'CKYD62QM',
477477
placement: 'vuejsorg'
478-
}
478+
},
479+
topBanner: true
479480
},
480481
plugins: [
481482
[

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

Lines changed: 7 additions & 0 deletions
Loading

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

6.09 KB
Loading

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

Lines changed: 13 additions & 0 deletions
Loading

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

Lines changed: 16 additions & 0 deletions
Loading

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

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

‎src/.vuepress/theme/layouts/Layout.vue

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
@touchstart="onTouchStart"
66
@touchend="onTouchEnd"
77
>
8+
<BannerTop v-if="showTopBanner" @close="closeBannerTop" />
9+
810
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
911

1012
<div class="sidebar-mask" @click="toggleSidebar(false)" />
@@ -50,6 +52,7 @@ import Page from '@theme/components/Page.vue'
5052
import Sidebar from '@theme/components/Sidebar.vue'
5153
import BuySellAds from '@theme/components/BuySellAds.vue'
5254
import CarbonAds from '@theme/components/CarbonAds.vue'
55+
import BannerTop from '@theme/components/BannerTop.vue'
5356
import { resolveSidebarItems } from '../util'
5457
5558
export default {
@@ -60,12 +63,14 @@ export default {
6063
Page,
6164
Sidebar,
6265
Navbar,
66+
BannerTop,
6367
BuySellAds,
6468
CarbonAds
6569
},
6670
6771
data() {
6872
return {
73+
showTopBanner: false,
6974
isSidebarOpen: false
7075
}
7176
},
@@ -110,7 +115,8 @@ export default {
110115
{
111116
'no-navbar': !this.shouldShowNavbar,
112117
'sidebar-open': this.isSidebarOpen,
113-
'no-sidebar': !this.shouldShowSidebar
118+
'no-sidebar': !this.shouldShowSidebar,
119+
'has-top-banner': this.showTopBanner
114120
},
115121
userPageClass
116122
]
@@ -125,9 +131,16 @@ export default {
125131
this.$router.afterEach(() => {
126132
this.isSidebarOpen = false
127133
})
134+
135+
this.showTopBanner = !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')
128136
},
129137
130138
methods: {
139+
closeBannerTop () {
140+
this.showTopBanner = false
141+
localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
142+
},
143+
131144
toggleSidebar(to) {
132145
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
133146
this.$emit('toggle-sidebar', this.isSidebarOpen)

0 commit comments

Comments
 (0)