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

Add new banner for Vuemastery free weekend #2512

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 21 commits into from
Mar 5, 2020
Merged

Add new banner for Vuemastery free weekend #2512

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c5b0b45
Add Vue Mastery banner for free weekend lessons
pieer Feb 13, 2019
98a96e3
Add banner only on homepage
pieer Feb 13, 2019
4336b97
Add vuemastery weekend promo on every pages
pieer Feb 13, 2019
eff58be
Add vuemastery banner transition
pieer Feb 13, 2019
8fdde11
Fix platinium sponsor sidebar with vuemastery banner
pieer Feb 13, 2019
b725f67
Fix double line
pieer Feb 13, 2019
f021942
Remove banner animation and timeout
pieer Feb 13, 2019
5fd5baa
Add javascript after HTML content
pieer Feb 13, 2019
a07fc45
Optimise code on scroll with vue mastery banner
pieer Feb 14, 2019
8eaa956
Rename variable for better understanding
pieer Feb 14, 2019
b19ad3e
Rename vuemastery variables
pieer Feb 14, 2019
59ecdf1
Refactor code and remove unecessary wait for DOMContentLoaded
pieer Feb 14, 2019
1febd2f
Lint code
pieer Feb 14, 2019
2f3ff4a
Refactor, clean and lint code
pieer Feb 14, 2019
9711645
Fix menu position initialization
pieer Feb 14, 2019
abbb038
Remove unuecessary hardcoded position
pieer Feb 14, 2019
4dda4d1
Fix menu initialization
pieer Feb 14, 2019
10000 0f97377
Clean code and comment
pieer Feb 14, 2019
fd6d3f2
Final refactor and fix closing button
pieer Feb 15, 2019
4a5d2f0
Merge remote-tracking branch 'upstream/master'
pieer Mar 4, 2020
0e57cfb
Add vue mastery new banner
pieer Mar 4, 2020
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
Prev Previous commit
Next Next commit
Add vuemastery weekend promo on every pages
  • Loading branch information
@pieer
pieer committed Feb 13, 2019
commit 4336b97b192f44f18f86b441795b13f89a0c23cb
4 changes: 1 addition & 3 deletions themes/vue/layout/layout.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,7 @@
<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
</head>
<body class="<%- isIndex ? '' : 'docs' -%>">
<% if (isIndex) { %>
<%- partial('partials/vue_mastery_promo.ejs') %>
<% } %>
<%- partial('partials/vue_mastery_promo.ejs') %>
<div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
<a class="menu-button"></a>
<a class="logo" href="/"></a>
Expand Down
14 changes: 10 additions & 4 deletions themes/vue/layout/partials/vue_mastery_promo.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<script>
(function () {
var mobileBar, vuemasteryPromo, menuTop, close;
var mobileBar, vuemasteryPromo, menuTop, close, wrapper;

// This allow the mobile menu to scroll once the banner is not visible
var fixMenuAfterBanner = function() {
if (window.pageYOffset > menuTop) {
// The menu will be fixed
vuemasteryPromo.classList.add('fixed');
wrapper.classList.add('fixed');
} else {
// The menu stay under the banner
vuemasteryPromo.classList.remove('fixed');
wrapper.classList.remove('fixed');
}
}

Expand All @@ -23,7 +23,11 @@
mobileBar = document.getElementById('mobile-bar');
vuemasteryPromo = document.getElementById('vue-mastery-promo');
close = document.getElementById('close-vue-mastery-promo');
close = document.getElementById('close-vue-mastery-promo');
wrapper = document.getElementsByTagName("body")[0];

// Add class to wrapper
wrapper.classList.add('vuemastery-weekend-promo');
// Initialize the banner
vuemasteryPromo.classList.remove('hide');
// Init close button action
Expand All @@ -32,7 +36,7 @@
// Wait for the end of animation before getting position
setTimeout(function () {
// Get position of the menu bar
menuTop = mobileBar.offsetTop;
menuTop = vuemasteryPromo.clientHeight;
}, 500)
}

Expand All @@ -47,6 +51,8 @@
// Remove events
window.removeEventListener('resize', getMenuPosition)
window.removeEventListener('scroll', fixMenuAfterBanner)
// Remove css
wrapper.classList.remove('vuemastery-weekend-promo');
}

// Check if user already removed the banner
Expand Down
40 changes: 31 additions & 9 deletions themes/vue/source/css/_vue-mastery-promo.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
background #4fc08d
background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
overflow hidden
height 80px
transition height .3s ease-in

&:hover
background-image linear-gradient(to left, #35495E, #35495E 50%, #4fc08d 50%)
Expand All @@ -13,7 +11,6 @@
color #fff

&.hide
transition height .3s ease-out
height: 0

a
Expand Down Expand Up @@ -85,23 +82,48 @@
background-color closeBarBgHoverColor
transform rotate(180deg)

@media screen and (max-width: 900px)
.vue-mastery-promo + #mobile-bar.top
.vuemastery-weekend-promo
#mobile-bar,
#mobile-bar.top
position relative
background-color #fff

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

.vue-mastery-promo.fixed
margin-bottom 40px
+ #mobile-bar
&.fixed
#mobile-bar
position fixed

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

&.fixed.docs
.vue-mastery-promo
margin-bottom 0

@media screen and (max-width: 900px)
.vue-mastery-promo
.vue-mastery-logo
margin-left 0

.vuemastery-weekend-promo
&.fixed
.vue-mastery-promo
margin-bottom 40px


@media screen and (max-width: 700px)
.vue-mastery-promo
height 40px
a
height 40px
overflow hidden
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 "_modal"
@import "_scrimba"
@import "_vue-mastery"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For #2515 I suspect this line needs to match the file rename with @import _vuemastery or revert the filename change. Explains an empty https://vuejs.org/css/page.css anyways. Thanks!

@import "_vue-mastery-promo"

#header
box-shadow: 0 0 1px rgba(0,0,0,.25)
Expand Down
0