Skip to content

Commit 6b9cbf6

Browse files
rahaugyyx990803
rahaug
authored and
yyx990803
committed
Vue School Black Friday Announcement (vuejs#2399)
1 parent 22dceba commit 6b9cbf6

File tree

6 files changed

+359
-0
lines changed

6 files changed

+359
-0
lines changed

‎themes/vue/layout/layout.ejs

+1
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
9191
</head>
9292
<body class="<%- isIndex ? '' : 'docs' -%>">
93+
<%- partial('partials/vueschool_banner') %>
9394
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
9495
<a class="menu-button"></a>
9596
<a class="logo" href="/"></a>

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

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<div id="vs-banner" class="vueschool-banner hide" role="banner">
2+
<a href="https://vueschool.io/sales/blackfriday?friend=vuejs&utm_source=Vuejs.org&utm_medium=Link&utm_content=TopBanner&utm_campaign=Black%20Friday" title="Learn Vue.js with Vue School's video courses" target="_blank">
3+
<img class="vueschool-banner--logo" src="/images/vueschool_logo.svg" alt="Vue School Logo">
4+
<div class="vueschool-banner--wrapper">
5+
<p>Black Friday 40% OFF at Vue School<span>Learn Vue.js through video courses.</span></p>
6+
</div>
7+
<div id="vs-close" class="vueschool-banner--close"></div>
8+
</a>
9+
</div>
10+
11+
<script>
12+
13+
(function () {
14+
// Get elements
15+
var elBody = document.getElementsByTagName("body")[0];
16+
var elBanner = document.getElementById("vs-banner");
17+
var elClose = document.getElementById("vs-close");
18+
var elMenu = document.getElementById("mobile-bar");
19+
// Variable names
20+
var nameWrapper = "vueschool-weekend-promo";
21+
var nameFixMenu = "vueschool-menu-fixed";
22+
var nameStorage = "vueschool-banner";
23+
// Defaults values
24+
var isMenuFixed = false;
25+
var posMenu = 80;
26+
var initBanner = function () {
27+
// Add event listeners
28+
toggleBannerEvents(true);
29+
// Add class to the body to push fixed elements
30+
elBody.classList.add(nameWrapper);
31+
// Display the banner
32+
elBanner.style.display = "block";
33+
// Init close button action
34+
elClose.onclick = closeBanner;
35+
// Get the menu position
36+
getMenuPosition();
37+
// Check current page offset position
38+
isMenuFixed = isUnderBanner();
39+
// And position menu accordingly
40+
if (isMenuFixed) {
41+
elBody.classList.add("fixed");
42+
}
43+
}
44+
var closeBanner = function(e) {
45+
// Prevent bubbling event that redirect to vueschool.io
46+
e.preventDefault();
47+
// Remove events
48+
toggleBannerEvents(false);
49+
// Hide the banner
50+
elBanner.style.display = "none";
51+
// Remove class to the body that push fixed elements
52+
elBody.classList.remove(nameWrapper);
53+
// Save action in the local storage
54+
localStorage.setItem(nameStorage, true);
55+
}
56+
var getMenuPosition = function() {
57+
posMenu = elBanner.clientHeight;
58+
}
59+
var isUnderBanner = function() {
60+
return window.pageYOffset > posMenu;
61+
}
62+
var fixMenuAfterBanner = function() {
63+
if (isUnderBanner()) {
64+
if (!isMenuFixed) {
65+
// The menu will be fixed
66+
toggleFixedPosition(true);
67+
}
68+
} else if (isMenuFixed) {
69+
// The menu stay under the banner
70+
toggleFixedPosition(false);
71+
}
72+
}
73+
var toggleBannerEvents = function (on) {
74+
// Add or remove event listerners attached to the DOM
75+
var method = on ? "addEventListener" : "removeEventListener";
76+
window[method]("resize", getMenuPosition);
77+
window[method]("scroll", fixMenuAfterBanner);
78+
}
79+
var toggleFixedPosition = function (on) {
80+
// Switch between relative and fixed position
81+
var method = on ? "add" : "remove";
82+
elBody.classList[method](nameFixMenu);
83+
isMenuFixed = on;
84+
}
85+
// Load component according to user preferences
86+
if (!localStorage.getItem(nameStorage)) {
87+
initBanner();
88+
}
89+
})()
90+
</script>

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

+212
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
.vueschool-weekend-promo.docs
2+
.vueschool-banner
3+
z-index 100
4+
5+
.vueschool-banner
6+
display none
7+
background #4fc08d
8+
background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
9+
overflow hidden
10+
position relative
11+
12+
&:before
13+
content ''
14+
background #35495E
15+
background-image linear-gradient(to right, #4fc08d, #4fc08d 80%, #35495E 100%)
16+
position absolute
17+
top 0
18+
bottom 0
19+
left 0
20+
width 0
21+
transition width .15s ease-out .1s
22+
23+
&:hover
24+
&:before
25+
transition width .15s ease-in
26+
width 50%
27+
p
28+
transition-delay 0
29+
color #fff
30+
31+
.vueschool-banner--wrapper::before
32+
width 100vw
33+
transition width .15s ease-in .10s
34+
35+
a
36+
display flex
37+
height 80px
38+
justify-content center
39+
40+
.hidden
41+
display none
42+
43+
.vueschool-banner--wrapper
44+
display flex
45+
height 100%
46+
align-items center
47+
background #4fc08d
48+
margin-left -50px
49+
padding-left 50px
50+
position relative
51+
52+
&:before
53+
content ''
54+
pointer-events none
55+
background #35495E
56+
background-image linear-gradient(to right, #35495E, #35495E 80%, #4fc08d 100%)
57+
position absolute
58+
top 0
59+
bottom 0
60+
left 0
61+
width 0
62+
transition width .15s ease-out
63+
64+
&:hover
65+
+ .vueschool-banner--close
66+
&:before,
67+
&:after
68+
transform-origin 100%
69+
70+
p
71+
margin -3px 50px 0 20px
72+
font-size 1.17rem
73+
font-weight 600
74+
color #2c3e50
75+
position relative
76+
transition-delay .15s
77+
78+
span
79+
font-size 1rem
80+
display block
81+
color #fff
82+
83+
.vueschool-banner--logo
84+
height 102%
85+
margin-top: -1px
86+
margin-left 125px
87+
position relative
88+
z-index 2
89+
90+
.vueschool-banner--close
91+
position absolute
92+
top 20px
93+
right 25px
94+
height 40px
95+
width 40px
96+
-webkit-tap-highlight-color transparent
97+
border-radius 50%
98+
cursor pointer
99+
100+
&:before,
101+
&:after
102+
content ''
103+
position absolute
104+
top 19px
105+
left 14px
106+
width 25px
107+
height 2px
108+
background-color #fff
109+
transform-origin 50%
110+
transform rotate(-45deg)
111+
transition all .2s ease-out
112+
113+
&:after
114+
transform rotate(45deg)
115+
116+
&:hover
117+
&:before,
118+
&:after
119+
transform rotate(180deg)
120+
121+
.vueschool-weekend-promo
122+
#mobile-bar,
123+
#mobile-bar.top
124+
position relative
125+
background-color #fff
126+
127+
&.docs:not(.vueschool-menu-fixed)
128+
padding-top 0
129+
#header
130+
position relative
131+
width auto
132+
#nav
133+
position absolute
134+
135+
&.vueschool-menu-fixed
136+
#mobile-bar
137+
position fixed
138+
139+
@media screen and (min-width: 901px)
140+
.vueschool-weekend-promo.docs:not(.vueschool-menu-fixed)
141+
#main.fix-sidebar .sidebar .sidebar-inner
142+
padding-top 110px
143+
144+
@media screen and (min-width: 415px) and (max-width: 900px)
145+
.vueschool-weekend-promo.docs:not(.vueschool-menu-fixed)
146+
#main.fix-sidebar .sidebar .sidebar-inner
147+
padding-top 140px
148+
149+
#sidebar-sponsors-platinum-right
150+
position absolute
151+
top: 170px;
152+
153+
&.vueschool-menu-fixed.docs
154+
.vueschool-banner
155+
margin-bottom 0
156+
157+
@media screen and (max-width: 414px)
158+
// Docs menu
159+
.vueschool-weekend-promo.docs:not(.vueschool-menu-fixed)
160+
#main.fix-sidebar .sidebar .sidebar-inner
161+
padding-top 100px
162+
163+
.vueschool-banner
164+
.vueschool-banner--logo
165+
margin-left 0
166+
167+
.vueschool-weekend-promo
168+
&.vueschool-menu-fixed
169+
.vueschool-banner
170+
margin-bottom 40px
171+
172+
173+
@media screen and (max-width: 700px)
174+
.vueschool-banner
175+
a
176+
height 40px
177+
overflow hidden
178+
179+
.vueschool-banner--logo
180+
margin-left 0
181+
justify-content flex-start
182+
183+
p, span
184+
font-size .8rem
185+
color #fff
186+
187+
.vueschool-banner--close
188+
top 0px
189+
right 0px
190+
191+
&:before,
192+
&:after
193+
top 19px
194+
left 14px
195+
width 15px
196+
height 2px
197+
198+
@media screen and (max-width: 425px)
199+
.vueschool-banner
200+
p
201+
max-width 200px
202+
span
203+
display none
204+
205+
@media screen and (max-width 286px)
206+
.vueschool-banner p
207+
font-size 0.6rem
208+
margin -3px 28px 0 0px
209+
210+
@media print
211+
.vueschool-banner
212+
display none

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

+1
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"
78

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

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

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
@import "_modal"
1616
@import "_scrimba"
1717
@import "_vue-mastery"
18+
@import "_vueschool"
1819
@import "_themes"
1920

2021
#header

‎themes/vue/source/images/vueschool_logo.svg

+54
Loading

0 commit comments

Comments
 (0)