8000 Add new banner for Vuemastery free weekend + test guide page by pieer · Pull Request #2517 · vuejs/v2.vuejs.org · GitHub
[go: up one dir, main page]
Skip to content

Add new banner for Vuemastery free weekend + test guide page #2517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 6, 2020
Merged

Add new banner for Vuemastery free weekend + test guide page #2517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/images/logo-vuemastery.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions themes/vue/layout/layout.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
</head>
<body class="<%- isIndex ? '' : 'docs' -%>">
<%- partial('partials/vuemastery_banner.ejs') %>
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
<a class="menu-button"></a>
<a class="logo" href="/"></a>
Expand Down
99 changes: 99 additions & 0 deletions themes/vue/layout/partials/vuemastery_banner.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<div id="vm-banner" class="vuemastery-banner hide" role="banner">
<a href="https://www.vuemastery.com/free-weekend" target="_blank">
<img class="vuemastery-banner--logo" src="/images/logo-vuemastery.svg" alt="vuemastery" />
<div class="vuemastery-banner--wrapper">
<p>Free Vue Courses on Vue Mastery March 13 - March 15.<span>Sign up today to get access.</span></p>
</div>
<div id="vm-close" class="vuemastery-banner--close"></div>
</a>
</div>

<script>
(function () {
// Get elements
var elBody = document.getElementsByTagName("body")[0];
var elBanner = document.getElementById("vm-banner");
var elClose = document.getElementById("vm-close");
var elMenu = document.getElementById("mobile-bar");

// Variable names
var nameWrapper = "vuemastery-weekend-promo";
var nameFixMenu = "vuemastery-menu-fixed";
var nameStorage = "vuemastery-banner";

// Defaults values
var isMenuFixed = false;
var posMenu = 80;

var initBanner = function () {
// Add event listeners
toggleBannerEvents(true);
// Add class to the body to push fixed elements
elBody.classList.add(nameWrapper);
// Display the banner
elBanner.style.display = "block";
// Init close button action
elClose.onclick = closeBanner;
// Get the menu position
getMenuPosition();
// Check current page offset position
isMenuFixed = isUnderBanner();
// And position menu accordingly
if (isMenuFixed) {
elBody.classList.add("fixed");
}
}

var closeBanner = function(e) {
// Prevent bubbling event that redirect to vuemastery.com
e.preventDefault();
// Remove events
toggleBannerEvents(false);
// Hide the banner
elBanner.style.display = "none";
// Remove class to the body that push fixed elements
elBody.classList.remove(nameWrapper);
// Save action in the local storage
localStorage.setItem(nameStorage, true);
}

var getMenuPosition = function() {
posMenu = elBanner.clientHeight;
}

var isUnderBanner = function() {
return window.pageYOffset > posMenu;
}

var fixMenuAfterBanner = function() {
if (isUnderBanner()) {
if (!isMenuFixed) {
// The menu will be fixed
toggleFixedPosition(true);
}
} else if (isMenuFixed) {
// The menu stay under the banner
toggleFixedPosition(false);
}
}

var toggleBannerEvents = function (on) {
// Add or remove event listerners attached to the DOM
var method = on ? "addEventListener" : "removeEventListener";
window[method]("resize", getMenuPosition);
window[method]("scroll", fixMenuAfterBanner);
}

var toggleFixedPosition = function (on) {
// Switch between relative and fixed position
var method = on ? "add" : "remove";
elBody.classList[method](nameFixMenu);
isMenuFixed = on;
}

// Load component according to user preferences
if (!localStorage.getItem(nameStorage)) {
initBanner();
}
})()
</script>
198 changes: 198 additions & 0 deletions themes/vue/source/css/_vuemastery-banner.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
.vuemastery-banner
display none
background #4fc08d
background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
overflow hidden
position relative

&:before
content ''
background #35495E
background-image linear-gradient(to right, #4fc08d, #4fc08d 80%, #35495E 100%)
position absolute
top 0
bottom 0
left 0
width 0
transition width .15s ease-out .1s

&:hover
&:before
transition width .15s ease-in
width 50%
p
transition-delay 0
color #fff

.vuemastery-banner--wrapper::before
width 100vw
transition width .15s ease-in .10s

a
display flex
height 80px
justify-content center

.vuemastery-banner--wrapper
display flex
height 100%
align-items center
background #4fc08d
margin-left -50px
padding-left 50px
position relative

&:before
content ''
pointer-events none
background #35495E
background-image linear-gradient(to right, #35495E, #35495E 80%, #4fc08d 100%)
position absolute
top 0
bottom 0
left 0
width 0
transition width .15s ease-out

&:hover
+ .vuemastery-banner--close
&:before,
&:after
transform-origin 100%

p
margin -3px 50px 0 20px
font-size 1.17rem
font-weight 600
color #2c3e50
position relative
transition-delay .15s

span
font-size 1rem
display block
color #fff

.vuemastery-banner--logo
height 102%
margin-top: -1px
margin-left 125px
position relative
z-index 2

.vuemastery-banner--close
position absolute
top 20px
right 25px
height 40px
width 40px
-webkit-tap-highlight-color transparent
border-radius 50%
cursor pointer

&:before,
&:after
content ''
position absolute
top 19px
left 14px
width 25px
height 2px
background-color #fff
transform-origin 50%
transform rotate(-45deg)
transition all .2s ease-out

&:after
transform rotate(45deg)

&:hover
&:before,
&:after
transform rotate(180deg)

.vuemastery-weekend-promo
#mobile-bar,
#mobile-bar.top
position relative
background-color #fff

&.docs:not(.vuemastery-menu-fixed)
padding-top 0
#header
position relative
width auto
#nav
position absolute

&.vuemastery-menu-fixed
#mobile-bar
position fixed

@media screen and (min-width: 901px)
.vuemastery-weekend-promo
&.docs:not(.vuemastery-menu-fixed)
#main.fix-sidebar .sidebar
position absolute
top 141px

#sidebar-sponsors-platinum-right
position absolute
top: 170px;

&.vuemastery-menu-fixed.docs
.vuemastery-banner
margin-bottom 0

@media screen and (max-width: 900px)
.vuemastery-banner
.vuemastery-banner--logo
margin-left 0

.vuemastery-weekend-promo
&.vuemastery-menu-fixed
.vuemastery-banner
margin-bottom 40px


@media screen and (max-width: 700px)
.vuemastery-banner
a
height 40px
overflow hidden

.vuemastery-banner--logo
margin-left 0
justify-content flex-start

p, span
font-size .8rem
color #fff

.vuemastery-banner--close
top 0px
right 0px

&:before,
&:after
top 19px
left 14px
width 15px
height 2px

@media screen and (max-width: 465px)
.vuemastery-banner
p
max-width 185px
span
display none

@media screen and (max-width 330px)
.vuemastery-banner p
font-size 0.6rem
margin -3px 28px 0 0px
max-width 140px

@media print
.vuemastery-banner
display none
1 change: 1 addition & 0 deletions themes/vue/source/css/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import "_sidebar"
@import "_sponsors-index"
@import "_modal"
@import "_vuemastery-banner"
@import "_themes"

$width = 900px
Expand Down
1 change: 1 addition & 0 deletions themes/vue/source/css/page.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
@import "_style-guide"
@import "_modal"
@import "_scrimba"
@import "_vuemastery-banner"
@import "_vue-mastery"
@import "_themes"

Expand Down
0