-
Notifications
You must be signed in to change notification settings - Fork 3.4k
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.
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
Changes from all commits
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 98a96e3
Add banner only on homepage
pieer 4336b97
Add vuemastery weekend promo on every pages
pieer eff58be
Add vuemastery banner transition
pieer 8fdde11
Fix platinium sponsor sidebar with vuemastery banner
pieer b725f67
Fix double line
pieer f021942
Remove banner animation and timeout
pieer 5fd5baa
Add javascript after HTML content
pieer a07fc45
Optimise code on scroll with vue mastery banner
pieer 8eaa956
Rename variable for better understanding
pieer b19ad3e
Rename vuemastery variables
pieer 59ecdf1
Refactor code and remove unecessary wait for DOMContentLoaded
pieer 1febd2f
Lint code
pieer 2f3ff4a
Refactor, clean and lint code
pieer 9711645
Fix menu position initialization
pieer abbb038
Remove unuecessary hardcoded position
pieer 4dda4d1
Fix menu initialization
pieer 0f97377
Clean code and comment
pieer fd6d3f2
Final refactor and fix closing button
pieer 4a5d2f0
Merge remote-tracking branch 'upstream/master'
8000
pieer 0e57cfb
Add vue mastery new banner
pieer File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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 _vuemasteryor revert the filename change. Explains an empty https://vuejs.org/css/page.css anyways. Thanks!