Skip to content

Commit b22219e

Browse files
yyx990803yyx990803
authored
Add new banner for Vuemastery free weekend (vuejs#2512)
1 parent 97cec40 commit b22219e

File tree

7 files changed

+322
-0
lines changed

7 files changed

+322
-0
lines changed

‎src/images/logo-vuemastery.svg

+22
Loading

‎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/vuemastery_banner.ejs') %>
9394
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
9495
<a class="menu-button"></a>
9596
<a class="logo" href="/"></a>

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

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

‎themes/vue/source/css/_vuemastery-banner.styl

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

‎themes/vue/source/css/_vue-mastery.styl renamed to ‎themes/vue/source/css/_vuemastery.styl

File renamed without changes.

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

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "_sidebar"
44
@import "_sponsors-index"
55
@import "_modal"
6+
@import "_vuemastery-banner"
67
@import "_themes"
78

89
$width = 900px

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

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
@import "_style-guide"
1515
@import "_modal"
1616
@import "_scrimba"
17+
@import "_vuemastery-banner"
1718
@import "_vue-mastery"
1819
@import "_themes"
1920

0 commit comments

Comments
 (0)