vuejs · yyx990803 · Nov 25, 2019 · Nov 22, 2019 · Nov 22, 2019
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -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/vueschool_banner') %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>

diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs
@@ -0,0 +1,90 @@
+<div id="vs-banner" class="vueschool-banner hide" role="banner">
+  <a href="https://vueschool.io/sales/blackfriday?friend=vuejs&utm_source=Vuejs.org&utm_medium=Link&utm_content=TopBanner&utm_campaign=Black%20Friday" title="Learn Vue.js with Vue School's video courses" target="_blank">
+    <img class="vueschool-banner--logo" src="/images/vueschool_logo.svg" alt="Vue School Logo">
+    <div class="vueschool-banner--wrapper">
+      <p>Black Friday 40% OFF at Vue School<span>Learn Vue.js through video courses.</span></p>
+    </div>
+    <div id="vs-close" class="vueschool-banner--close"></div>
+  </a>
+</div>
+
+<script>
+
+  (function () {
+    // Get elements
+    var elBody = document.getElementsByTagName("body")[0];
+    var elBanner = document.getElementById("vs-banner");
+    var elClose = document.getElementById("vs-close");
+    var elMenu = document.getElementById("mobile-bar");
+    // Variable names
+    var nameWrapper = "vueschool-weekend-promo";
+    var nameFixMenu = "vueschool-menu-fixed";
+    var nameStorage = "vueschool-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 vueschool.io
+      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>
diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl
@@ -0,0 +1,212 @@
+.vueschool-weekend-promo.docs
+  .vueschool-banner
+    z-index 100
+
+.vueschool-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
+
+    .vueschool-banner--wrapper::before
+      width 100vw
+      transition width .15s ease-in .10s
+
+  a
+    display flex
+    height 80px
+    justify-content center
+
+  .hidden
+    display none
+
+.vueschool-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
+    + .vueschool-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
+
+.vueschool-banner--logo
+  height 102%
+  margin-top: -1px
+  margin-left 125px
+  position relative
+  z-index 2
+
+.vueschool-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)
+
+.vueschool-weekend-promo
+  #mobile-bar,
+  #mobile-bar.top
+    position relative
+    background-color #fff
+
+  &.docs:not(.vueschool-menu-fixed)
+    padding-top 0
+    #header
+      position relative
+      width auto
+    #nav
+      position absolute
+
+  &.vueschool-menu-fixed
+    #mobile-bar
+      position fixed
+
+@media screen and (min-width: 901px)
+  .vueschool-weekend-promo.docs:not(.vueschool-menu-fixed)
+    #main.fix-sidebar .sidebar .sidebar-inner
+      padding-top 110px
+
+@media screen and (min-width: 415px) and (max-width: 900px)
+  .vueschool-weekend-promo.docs:not(.vueschool-menu-fixed)
+      #main.fix-sidebar .sidebar .sidebar-inner
+        padding-top 140px
+
+      #sidebar-sponsors-platinum-right
+        position absolute
+        top: 170px;
+
+    &.vueschool-menu-fixed.docs
+      .vueschool-banner
+        margin-bottom 0
+
+@media screen and (max-width: 414px)
+  // Docs menu
+  .vueschool-weekend-promo.docs:not(.vueschool-menu-fixed)
+    #main.fix-sidebar .sidebar .sidebar-inner
+     padding-top 100px
+
+  .vueschool-banner
+    .vueschool-banner--logo
+      margin-left 0
+
+  .vueschool-weekend-promo
+    &.vueschool-menu-fixed
+      .vueschool-banner
+        margin-bottom 40px
+
+
+@media screen and (max-width: 700px)
+  .vueschool-banner
+    a
+      height 40px
+      overflow hidden
+
+    .vueschool-banner--logo
+      margin-left 0
+      justify-content flex-start
+
+    p, span
+      font-size .8rem
+      color #fff
+
+    .vueschool-banner--close
+      top 0px
+      right 0px
+
+      &:before,
+      &:after
+        top 19px
+        left 14px
+        width 15px
+        height 2px
+
+@media screen and (max-width: 425px)
+  .vueschool-banner
+    p
+      max-width 200px
+    span
+      display none
+
+@media screen and (max-width 286px)
+  .vueschool-banner p
+    font-size 0.6rem
+    margin -3px 28px 0 0px
+
+@media print
+  .vueschool-banner
+    display none
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
@@ -4,6 +4,7 @@
 @import "_sponsors-index"
 @import "_modal"
 @import "_themes"
+@import "_vueschool"
 
 $width = 900px
 $space = 40px

diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
@@ -15,6 +15,7 @@
 @import "_modal"
 @import "_scrimba"
 @import "_vue-mastery"
+@import "_vueschool"
 @import "_themes"
 
 #header

diff --git a/themes/vue/source/images/vueschool_logo.svg b/themes/vue/source/images/vueschool_logo.svg