Skip to content

Commit 5613227

Browse files
nicodevsnicodevs
authored
Add VueSchool Summer Sale banner (#2829)
* Add VueSchool Summer Sale banner * Update VueSchool Summer Sale banner
1 parent d0927f8 commit 5613227

File tree

14 files changed

+245
-16
lines changed

14 files changed

+245
-16
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "vuejs.org",
33
"private": true,
44
"hexo": {
5-
"version": "3.8.0"
5+
"version": "3.9.0"
66
},
77
"scripts": {
88
"start": "hexo server",
@@ -29,4 +29,4 @@
2929
"hoek": "^6.1.2",
3030
"request": "^2.85.0"
3131
}
32-
}
32+
}

‎themes/vue/layout/index.ejs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,10 +163,11 @@
163163
})
164164
165165
window.addEventListener('scroll', function () {
166-
if (window.pageYOffset > 165 && !topScrolled) {
166+
var offset = 20
167+
if (window.pageYOffset > offset && !topScrolled) {
167168
topScrolled = true
168169
document.getElementById('mobile-bar').classList.remove('top')
169-
} else if (window.pageYOffset <= 165 && topScrolled) {
170+
} else if (window.pageYOffset <= offset && topScrolled) {
170171
topScrolled = false
171172
document.getElementById('mobile-bar').classList.add('top')
172173
}

‎themes/vue/layout/layout.ejs

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<% var isIndex = page.path === 'index.html' %>
22
<% var isThemes = page.path === 'resources/themes.html' %>
3+
<% var hasVueSchoolBanner = true %>
34

45
<!DOCTYPE html>
56
<html lang="en" class="with-v3-banner">
@@ -54,7 +55,7 @@
5455
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
5556
<link href="https://maxcdn.bootstrapcdn.com" rel="preconnect" crossorigin>
5657

57-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono&display=swap" rel="stylesheet">
58+
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto|Roboto Mono&display=swap" rel="stylesheet">
5859
<link href="https://fonts.googleapis.com/css?family=Dosis:500&text=Vue.js&display=swap" rel="stylesheet">
5960

6061
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@@ -90,6 +91,11 @@
9091
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
9192
</head>
9293
<body class="<%- isIndex ? '' : 'docs' -%>">
94+
95+
<% if (hasVueSchoolBanner) { %>
96+
<%- partial('partials/vueschool_banner') %>
97+
<% } %>
98+
9399
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
94100
<a class="menu-button"></a>
95101
<a class="logo" href="/"></a>

‎themes/vue/layout/partials/vueschool_banner.ejs

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<a id="vs" class="vs-hidden" href="https://vueschool.io/sales/summer-vue?friend=vuejs" target="_blank" rel="noreferrer">
2+
<div class="vs-iso">
3+
<img src="/images/banners/vs-iso.svg">
4+
</div>
5+
<div class="vs-logo">
6+
<img src="/images/banners/vs-logo.svg">
7+
</div>
8+
<div class="vs-core">
9+
<div class="vs-backpack">
10+
<img src="/images/banners/vs-backpack.png" alt="Backpack">
11+
</div>
12+
<div class="vs-slogan">
13+
3-months Vue School for only $49 <span style="text-decoration: line-through">$75</span>!
14+
<span class="vs-slogan-light">
15+
Limited Time Offer
16+
</span>
17+
</div>
18+
<div class="vs-button">
19+
GET ACCESS
20+
</div>
21+
</div>
22+
<div id="vs-close" class="vs-close">
23+
<img src="/images/banners/close.svg" alt="Close">
24+
</div>
25+
</a>

‎themes/vue/source/css/_header.styl

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "_settings"
12
$header-height = 40px
23

34
red-dot-before(leftPos = -8px)
@@ -12,10 +13,12 @@ red-dot-before(leftPos = -8px)
1213

1314
#header
1415
background-color: #fff
15-
height: $header-height
16-
padding: $heading-padding-vertical 60px
16+
padding: $heading-padding-vertical 30px $heading-padding-vertical 60px
1717
position: relative
1818
z-index: $z-header
19+
display: flex
20+
justify-content: space-between
21+
box-sizing: border-box
1922

2023
#v3-banner
2124
background-color: $green
@@ -40,18 +43,11 @@ body.docs
4043
position: fixed
4144
width: 100%
4245
top: 0
43-
#nav
44-
position: fixed
45-
top: $heading-padding-vertical
4646

4747
#nav
4848
list-style-type: none
4949
margin: 0
5050
padding: 0
51-
position: absolute
52-
right: 30px
53-
top: $heading-padding-vertical
54-
height: $header-height
5551
line-height: $header-height
5652
.break
5753
display: none
@@ -147,6 +143,7 @@ body.docs
147143
display: none
148144
box-shadow: 0 0 2px rgba(0,0,0,.25)
149145
pointer-events: none
146+
transition: background-color 0.25s ease-in
150147
> *
151148
pointer-events: auto
152149
.menu-button

‎themes/vue/source/css/_sidebar.styl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
position: fixed
6868
background-color: #f9f9f9
6969
height: 100%
70-
top: 0
70+
top: 40px
7171
left: 0
7272
box-shadow: 0 0 10px rgba(0,0,0,.2)
7373
transition: all .4s cubic-bezier(0.4, 0, 0, 1)

‎themes/vue/source/css/_vueschool.styl

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
@import "_settings"
2+
$mobile-bar-height = 40px
3+
$vs-banner-height-desktop = 80px
4+
$vs-banner-height-mobile = 50px
5+
$menu-height = 63px
6+
7+
body.has-vs-banner
8+
9+
#v3-banner
10+
margin-top: $vs-banner-height-mobile
11+
@media (min-width: 680px)
12+
margin-top: $vs-banner-height-desktop
13+
@media (min-width: 900px)
14+
margin-top: 0
15+
16+
#mobile-bar
17+
top: $vs-banner-height-mobile
18+
@media (min-width: 680px)
19+
top: $vs-banner-height-desktop
20+
21+
.sidebar
22+
top: $vs-banner-height-mobile + $mobile-bar-height
23+
@media (min-width: 680px)
24+
top: $vs-banner-height-desktop + $mobile-bar-height
25+
@media (min-width: 900px)
26+
top: $vs-banner-height-desktop + $menu-height
27+
28+
.content
29+
padding-top: 85px
30+
@media (min-width: 680px)
31+
padding-top: 125px
32+
@media (min-width: 900px)
33+
padding-top: 35px
34+
35+
&.docs
36+
@media (min-width: 900px)
37+
padding-top: 144px
38+
39+
#vs
40+
position: fixed
41+
42+
#header
43+
top: $vs-banner-height-mobile
44+
@media (min-width: 680px)
45+
top: $vs-banner-height-desktop
46+
47+
#sidebar-sponsors-platinum-right
48+
@media (min-width: 900px)
49+
top: 160px
50+
51+
#vs
52+
font-family "Roboto", sans-serif
53+
z-index: 8
54+
box-sizing: border-box
55+
color: #FFF
56+
background: #202A5A
57+
display: flex
58+
align-items: center
59+
position: fixed
60+
left: 0
61+
right: 0
62+
padding: 0 10px
63+
min-height: $vs-banner-height-mobile
64+
top: 0
65+
@media (min-width: 680px)
66+
justify-content: center
67+
min-height: $vs-banner-height-desktop
68+
@media (min-width: 900px)
69+
position: static
70+
71+
&.vs-hidden
72+
display: none
73+
74+
&:hover
75+
.vs-core
76+
.vs-button
77+
background: #f22606
78+
79+
.vs-iso
80+
display: none
81+
position: absolute
82+
left: 20px
83+
height: 26px
84+
img
85+
height: 26px
86+
@media (min-width: 680px)
87+
display: inline-block
88+
height: 40px
89+
img
90+
height: 40px
91+
@media (min-width: 900px)
92+
display: none
93+
94+
.vs-logo
95+
position: absolute
96+
display: none
97+
left: 40px
98+
@media (min-width: 900px)
99+
display: block
100+
101+
.vs-core
102+
display: flex
103+
align-items: center
104+
105+
.vs-backpack
106+
margin-right: 14px
107+
img
108+
height: 50px
109+
@media (min-width: 680px)
110+
height: 74px
111+
112+
.vs-slogan
113+
color: #FFF
114+
font-weight: bold
115+
font-size: 14px
116+
@media (min-width: 680px)
117+
font-size: 18px
118+
> .vs-slogan-light
119+
color: #ff5338
120+
display: block
121+
text-align: left
122+
@media (min-width: 900px)
123+
text-align: center
124+
display: inline
125+
126+
.vs-button
127+
margin-left: 43px
128+
color: #FFF
129+
padding: 13px 24px
130+
border-radius: 40px
131+
display: none
132+
background: #ff5338
133+
font-weight: bold
134+
@media (min-width: 680px)
135+
display: inline-block
136+
137+
.vs-close
138+
right: 10px
139+
position: absolute
140+
padding: 10px
141+
@media (min-width: 680px)
142+
right: 20px
143+
&:hover
144+
color: #56D8FF

‎themes/vue/source/css/index.styl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "_sponsors-index"
55
@import "_modal"
66
@import "_themes"
7+
@import "_vueschool.styl"
78

89
$width = 900px
910
$space = 40px

‎themes/vue/source/css/page.styl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
@import "_scrimba"
1717
@import "_vue-mastery"
1818
@import "_themes"
19+
@import "_vueschool.styl"
1920

2021
#header
2122
box-shadow: 0 0 1px rgba(0,0,0,.25)

‎themes/vue/source/images/banners/close.svg

Lines changed: 7 additions & 0 deletions
Loading

‎themes/vue/source/images/banners/vs-backpack.png

6.09 KB
Loading

‎themes/vue/source/images/banners/vs-iso.svg

Lines changed: 13 additions & 0 deletions
Loading

‎themes/vue/source/images/banners/vs-logo.svg

Lines changed: 16 additions & 0 deletions
Loading

‎themes/vue/source/js/common.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
initMobileMenu()
44
initVideoModal()
55
initNewNavLinks()
6+
initVueSchoolBanner()
67
if (PAGE_TYPE) {
78
initVersionSelect()
89
initApiSpecLinks()
@@ -280,6 +281,23 @@
280281
})
281282
}
282283

284+
/**
285+
* Banner closing
286+
*/
287+
function initVueSchoolBanner () {
288+
const banner = document.getElementById('vs')
289+
if (banner && !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')) {
290+
banner.classList.remove('vs-hidden')
291+
document.body.classList.add('has-vs-banner')
292+
document.getElementById('vs-close').addEventListener('click', function (e) {
293+
e.preventDefault()
294+
e.stopPropagation()
295+
document.getElementById('vs').remove()
296+
document.body.classList.remove('has-vs-banner')
297+
localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
298+
})
299+
}
300+
}
283301

284302
/**
285303
* Modal Video Player
@@ -423,7 +441,7 @@
423441
if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') {
424442
return 300
425443
}
426-
return 0
444+
return localStorage.getItem('VS_SUMMER_BANNER_CLOSED') ? 0 : 80
427445
}
428446
})
429447
}

0 commit comments

Comments
 (0)