Skip to content

Commit 3e6d078

Browse files
vuejs-jp-botjillztom
vuejs-jp-bot
and
jillztom
authored
Add VueToronto banner (#2723) (#2247)
* Add vuetoronto banner * Fix v2 banner typo Co-authored-by: jillztom <jilson@live.in>
1 parent 45bc866 commit 3e6d078

File tree

4 files changed

+299
-0
lines changed

4 files changed

+299
-0
lines changed

‎themes/vue/layout/layout.ejs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,14 @@
9090
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
9191
</head>
9292
<body class="<%- isIndex ? '' : 'docs' -%>">
93+
<% if (!isIndex) { %>
94+
<%- partial('partials/vuetoronto_banner') %>
95+
<% } %>
9396
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
9497
<a class="menu-button"></a>
9598
<a class="logo" href="/"></a>
9699
</div>
100+
97101
<%- partial('partials/header') %>
98102
<% if (!isIndex) { %>
99103
<div id="main" class="fix-sidebar">

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<div id="vs-banner" class="vueto-banner hide" role="banner">
2+
<a href="https://vuetoronto.com/tickets" title="VueConf Toronto - Vue.js Conference" target="_blank">
3+
<div class="vueto-banner--wrapper">
4+
<p>Join 10k+ devs on the largest Vue.js conference! - November 5-6</p>
5+
<button>Register for free</button>
6+
</div>
7+
<div id="vs-close" class="vueto-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("vs-banner");
16+
var elClose = document.getElementById("vs-close");
17+
var elMenu = document.getElementById("mobile-bar");
18+
// Variable names
19+
var nameWrapper = "vueto-weekend-promo";
20+
var nameFixMenu = "vueto-menu-fixed";
21+
var nameStorage = "vueto-banner";
22+
// Defaults values
23+
var isMenuFixed = false;
24+
var posMenu = 80;
25+
var initBanner = function () {
26+
// Add event listeners
27+
toggleBannerEvents(true);
28+
// Add class to the body to push fixed elements
29+
elBody.classList.add(nameWrapper);
30+
// Display the banner
31+
elBanner.style.display = "block";
32+
// Init close button action
33+
elClose.onclick = closeBanner;
34+
// Get the menu position
35+
getMenuPosition();
36+
// Check current page offset position
37+
isMenuFixed = isUnderBanner();
38+
// And position menu accordingly
39+
if (isMenuFixed) {
40+
elBody.classList.add("fixed");
41+
}
42+
}
43+
var closeBanner = function(e) {
44+
// Prevent bubbling event that redirect to vueto.io
45+
e.preventDefault();
46+
// Remove events
47+
toggleBannerEvents(false);
48+
// Hide the banner
49+
elBanner.style.display = "none";
50+
// Remove class to the body that push fixed elements
51+
elBody.classList.remove(nameWrapper);
52+
// Save action in the local storage
53+
localStorage.setItem(nameStorage, true);
54+
}
55+
var getMenuPosition = function() {
56+
posMenu = elBanner.clientHeight;
57+
}
58+
var isUnderBanner = function() {
59+
return window.pageYOffset > posMenu;
60+
}
61+
var fixMenuAfterBanner = function() {
62+
if (isUnderBanner()) {
63+
if (!isMenuFixed) {
64+
// The menu will be fixed
65+
toggleFixedPosition(true);
66+
}
67+
} else if (isMenuFixed) {
68+
// The menu stay under the banner
69+
toggleFixedPosition(false);
70+
}
71+
}
72+
var toggleBannerEvents = function (on) {
73+
// Add or remove event listerners attached to the DOM
74+
var method = on ? "addEventListener" : "removeEventListener";
75+
window[method]("resize", getMenuPosition);
76+
window[method]("scroll", fixMenuAfterBanner);
77+
}
78+
var toggleFixedPosition = function (on) {
79+
// Switch between relative and fixed position
80+
var method = on ? "add" : "remove";
81+
elBody.classList[method](nameFixMenu);
82+
isMenuFixed = on;
83+
}
84+
// Load component according to user preferences
85+
if (!localStorage.getItem(nameStorage)) {
86+
initBanner();
87+
}
88+
})()
89+
</script>

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

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
@import "_style-guide"
1515
@import "_modal"
1616
@import "_scrimba"
17+
@import "_vueto"
1718
@import "_vue-mastery"
1819
@import "_themes"
1920

0 commit comments

Comments
 (0)