Rename vuemastery variables

vuejs · yyx990803 · Mar 5, 2020 · Feb 13, 2019 · Feb 13, 2019 · Feb 13, 2019
commit b19ad3e0681c7253138d32bcdd6640436258690d
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -78,7 +78,7 @@
     <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
-    <%- partial('partials/vue_mastery_promo.ejs') %>
+    <%- partial('partials/vuemastery_banner.ejs') %>
     <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
       <a class="menu-button"></a>
       <a class="logo" href="/"></a>

diff --git a/...vue/layout/partials/vue_mastery_promo.ejs → ...vue/layout/partials/vuemastery_banner.ejs b/...vue/layout/partials/vue_mastery_promo.ejs → ...vue/layout/partials/vuemastery_banner.ejs
@@ -1,43 +1,23 @@
-<div id="vue-mastery-promo" class="vue-mastery-promo hide" role="banner">
+<div id="vm-banner" class="vuemastery-banner hide" role="banner">
   <a href="https://www.vuemastery.com/free-weekend" target="_blank">
-    <img class="vue-mastery-logo" src="/images/logo-vuemastery.svg" alt="vue-mastery" />
-    <div class="vue-mastery-wrapper">
+    <img class="vuemastery-banner--logo" src="/images/logo-vuemastery.svg" alt="vuemastery" />
+    <div class="vuemastery-banner--wrapper">
       <p>Free Vue Courses on Vue Mastery Feb 22 - Feb 24.<span>Sign up today to get access.</span></p>
     </div>
-    <div id="close-vue-mastery-promo" class="close"></div>
+    <div id="vm-close" class="vuemastery-banner--close"></div>
   </a>
 </div>
 
 <script>
   (function () {
-    var elBody, elMenu, elBanner, elClose, posMenu, isMenuFixed;
-
-    // This allow the mobile menu to scroll once the banner is not visible
-    var fixMenuAfterBanner = function() {
-      if (window.pageYOffset > posMenu) {
-        if (!isMenuFixed) {
-          // The menu will be fixed
-          elBody.classList.add('fixed');
-          isMenuFixed = true;
-        }
-      } else if(isMenuFixed) {
-        // The menu stay under the banner
-        elBody.classList.remove('fixed');
-        isMenuFixed = false;
-      }
-    }
-
-    // Get position of the menu when the windows is resized
-    var getMenuPosition = function() {
-      posMenu = elBanner.clientHeight;
-    }
+    var elBody, elBanner, elClose, elMenu, posMenu, isMenuFixed;
 
     var initBanner = function () {
       // Get elements
-      elMenu = document.getElementById('mobile-bar');
-      elBanner = document.getElementById('vue-mastery-promo');
-      elClose = document.getElementById('close-vue-mastery-promo');
       elBody = document.getElementsByTagName("body")[0];
+      elBanner = document.getElementById('vm-banner');
+      elClose = document.getElementById('vm-close');
+      elMenu = document.getElementById('mobile-bar');
 
       // Add class to the body
       elBody.classList.add('vuemastery-weekend-promo');
@@ -53,6 +33,26 @@
       if (isMenuFixed) elBody.classList.add('fixed');
     }
 
+    // Get position of the menu when the windows is resized
+    var getMenuPosition = function() {
+      posMenu = elBanner.clientHeight;
+    }
+
+    // This allow the mobile menu to scroll once the banner is not visible
+    var fixMenuAfterBanner = function() {
+      if (window.pageYOffset > posMenu) {
+        if (!isMenuFixed) {
+          // The menu will be fixed
+          elBody.classList.add('fixed');
+          isMenuFixed = true;
+        }
+      } else if(isMenuFixed) {
+        // The menu stay under the banner
+        elBody.classList.remove('fixed');
+        isMenuFixed = false;
+      }
+    }
+
     // Remove the banner once the user click on the cross
     var closeBanner = function(e) {
       // Prevent redirection to vuemastery if click on the close button
@@ -67,7 +67,8 @@
       // Remove css
       elBody.classList.remove('vuemastery-weekend-promo');
     }
-
+
+    // LOAD COMPONENT
     // Check if user already removed the banner
     if(!localStorage.getItem('hideVuemasteryBanner')) {
       // Add event listeners

diff --git a/...es/vue/source/css/_vue-mastery-promo.styl → ...es/vue/source/css/_vuemastery-banner.styl b/...es/vue/source/css/_vue-mastery-promo.styl → ...es/vue/source/css/_vuemastery-banner.styl
@@ -1,4 +1,4 @@
-.vue-mastery-promo
+.vuemastery-banner
   background #4fc08d
   background-image linear-gradient(to right, #35495E, #35495E 50%, #4fc08d 50%)
   overflow hidden
@@ -23,7 +23,7 @@
       transition-delay 0
       color #fff
 
-    .vue-mastery-wrapper::before
+    .vuemastery-banner--wrapper::before
       width 100vw
       transition width .15s ease-in .10s
 
@@ -35,40 +35,33 @@
     height 80px
     justify-content center
 
-  .vue-mastery-wrapper
-    display flex
-    height 100%
-    align-items center
-    background #4fc08d
-    margin-left -50px
-    padding-left 50px
-    position relative
+.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
-      + .close
-        &:before,
-        &:after
-          transform-origin 100%
-
-  .vue-mastery-logo
-    height 102%
-    margin-top: -1px
-    margin-left 125px
-    position relative
-    z-index 2
+  &: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
@@ -81,37 +74,44 @@
     font-size 1rem
     display block
     color #fff
+
+.vuemastery-banner--logo
+  height 102%
+  margin-top: -1px
+  margin-left 125px
+  position relative
+  z-index 2
 
-  .close
+.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 20px
-    right 25px
-    height 40px
-    width 40px
-    -webkit-tap-highlight-color transparent
-    border-radius 50%
-    cursor pointer
+    top 19px
+    left 14px
+    width 25px
+    height 2px
+    background-color #fff
+    transform-origin 50%
+    transform rotate(-45deg)
+    transition all .2s ease-out
 
-    &: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(45deg)
-
-    &:hover
-      &:before,
-      &:after
-        transform rotate(180deg)
+      transform rotate(180deg)
 
 .vuemastery-weekend-promo
   #mobile-bar,
@@ -143,35 +143,35 @@
         top: 170px;
 
     &.fixed.docs
-      .vue-mastery-promo
+      .vuemastery-banner
         margin-bottom 0
 
 @media screen and (max-width: 900px)
-  .vue-mastery-promo
-    .vue-mastery-logo
+  .vuemastery-banner
+    .vuemastery-banner--logo
       margin-left 0
 
   .vuemastery-weekend-promo
     &.fixed
-      .vue-mastery-promo
+      .vuemastery-banner
         margin-bottom 40px
 
 
 @media screen and (max-width: 700px)
-  .vue-mastery-promo
+  .vuemastery-banner
     a
       height 40px
       overflow hidden
 
-    .vue-mastery-logo
+    .vuemastery-banner--logo
       margin-left 0
       justify-content flex-start
 
     p, span
       font-size .8rem
       color #fff
 
-    .close
+    .vuemastery-banner--close
       top 0px
       right 0px
 
@@ -183,17 +183,17 @@
         height 2px
 
 @media screen and (max-width: 425px)
-  .vue-mastery-promo
+  .vuemastery-banner
     p
       max-width 185px
     span
       display none
 
 @media screen and (max-width 286px)
-  .vue-mastery-promo p
+  .vuemastery-banner p
     font-size 0.6rem
     margin -3px 28px 0 0px
 
 @media print
-  .vue-mastery-promo
+  .vuemastery-banner
     display none
diff --git a/themes/vue/source/css/_vue-mastery.styl → themes/vue/source/css/_vuemastery.styl b/themes/vue/source/css/_vue-mastery.styl → themes/vue/source/css/_vuemastery.styl
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
@@ -3,7 +3,7 @@
 @import "_sidebar"
 @import "_sponsors-index"
 @import "_modal"
-@import "_vue-mastery-promo"
+@import "_vuemastery-banner"
 
 $width = 900px
 $space = 40px

diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
@@ -13,8 +13,8 @@
 @import "_style-guide"
 @import "_modal"
 @import "_scrimba"
-@import "_vue-mastery"
-@import "_vue-mastery-promo"
+@import "_vuemastery"
+@import "_vuemastery-banner"
 
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)