From 22466e64a2344a81dbf6f71d6f7d9217f041765c Mon Sep 17 00:00:00 2001 From: Pierre Schweiger Date: Sat, 18 Dec 2021 11:39:48 +0700 Subject: [PATCH 1/2] Update vue mastery banner --- src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue b/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue index f2e620b5f6..45cf0e264d 100644 --- a/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue +++ b/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue @@ -4,7 +4,7 @@

Access the ultimate collection of Vue courses free. Dec 17-20

- +
From 5727f0cbfd4ed88a0003501a267f1bc00e99f93d Mon Sep 17 00:00:00 2001 From: Pierre Schweiger Date: Wed, 22 Dec 2021 16:46:17 +0700 Subject: [PATCH 2/2] Remove Vue mastery promotion banner --- .../background-bubbles-vuemastery.svg | 109 ------- .../vuemastery/background-vuemastery.svg | 34 --- .../images/vuemastery/lock-vuemastery.svg | 230 -------------- .../images/vuemastery/logo-vuemastery.svg | 22 -- .../images/vuemastery/unlock-vuemastery.svg | 283 ------------------ .../components/sponsors/VueMasteryBanner.vue | 18 -- src/.vuepress/theme/layouts/Layout.vue | 66 +--- src/.vuepress/theme/styles/index.styl | 1 - .../theme/styles/vuemastery-banner.styl | 243 --------------- 9 files changed, 1 insertion(+), 1005 deletions(-) delete mode 100644 src/.vuepress/public/images/vuemastery/background-bubbles-vuemastery.svg delete mode 100644 src/.vuepress/public/images/vuemastery/background-vuemastery.svg delete mode 100644 src/.vuepress/public/images/vuemastery/lock-vuemastery.svg delete mode 100644 src/.vuepress/public/images/vuemastery/logo-vuemastery.svg delete mode 100644 src/.vuepress/public/images/vuemastery/unlock-vuemastery.svg delete mode 100644 src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue delete mode 100644 src/.vuepress/theme/styles/vuemastery-banner.styl diff --git a/src/.vuepress/public/images/vuemastery/background-bubbles-vuemastery.svg b/src/.vuepress/public/images/vuemastery/background-bubbles-vuemastery.svg deleted file mode 100644 index 8f5ec7e888..0000000000 --- a/src/.vuepress/public/images/vuemastery/background-bubbles-vuemastery.svg +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/.vuepress/public/images/vuemastery/background-vuemastery.svg b/src/.vuepress/public/images/vuemastery/background-vuemastery.svg deleted file mode 100644 index fdb8488e2c..0000000000 --- a/src/.vuepress/public/images/vuemastery/background-vuemastery.svg +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/.vuepress/public/images/vuemastery/lock-vuemastery.svg b/src/.vuepress/public/images/vuemastery/lock-vuemastery.svg deleted file mode 100644 index c9583a1a0b..0000000000 --- a/src/.vuepress/public/images/vuemastery/lock-vuemastery.svg +++ /dev/null @@ -1,230 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/.vuepress/public/images/vuemastery/logo-vuemastery.svg b/src/.vuepress/public/images/vuemastery/logo-vuemastery.svg deleted file mode 100644 index b4ce163d48..0000000000 --- a/src/.vuepress/public/images/vuemastery/logo-vuemastery.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/.vuepress/public/images/vuemastery/unlock-vuemastery.svg b/src/.vuepress/public/images/vuemastery/unlock-vuemastery.svg deleted file mode 100644 index 917b2bd2ae..0000000000 --- a/src/.vuepress/public/images/vuemastery/unlock-vuemastery.svg +++ /dev/null @@ -1,283 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue b/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue deleted file mode 100644 index 45cf0e264d..0000000000 --- a/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue index e625dc8e32..10e09d60bd 100644 --- a/src/.vuepress/theme/layouts/Layout.vue +++ b/src/.vuepress/theme/layouts/Layout.vue @@ -5,11 +5,6 @@ @touchstart="onTouchStart" @touchend="onTouchEnd" > -
@@ -53,7 +48,6 @@ import Home from '@theme/components/Home.vue' import Navbar from '@theme/components/Navbar.vue' import Page from '@theme/components/Page.vue' import Sidebar from '@theme/components/Sidebar.vue' -import VueMasteryBanner from '@theme/components/sponsors/VueMasteryBanner.vue' import BuySellAds from '@theme/components/BuySellAds.vue' import CarbonAds from '@theme/components/CarbonAds.vue' import { resolveSidebarItems } from '../util' @@ -66,7 +60,6 @@ export default { Page, Sidebar, Navbar, - VueMasteryBanner, BuySellAds, CarbonAds }, @@ -74,9 +67,7 @@ export default { data() { return { isSidebarOpen: false, - isBannerOpen: false, isMenuFixed: false, - nameStorage: 'vuemastery-banner--free-weekend-december-2021', menuPosition: 0 } }, @@ -121,9 +112,7 @@ export default { { 'no-navbar': !this.shouldShowNavbar, 'sidebar-open': this.isSidebarOpen, - 'no-sidebar': !this.shouldShowSidebar, - 'vuemastery-menu-fixed': this.isMenuFixed, - 'vuemastery-promo': this.isBannerOpen + 'no-sidebar': !this.shouldShowSidebar }, userPageClass ] @@ -138,13 +127,6 @@ export default { this.$router.afterEach(() => { this.isSidebarOpen = false }) - - this.isBannerOpen = !localStorage.getItem(this.nameStorage) - - // Load component according to user preferences - if (this.isBannerOpen) { - this.$nextTick(this.initBanner) - } }, methods: { @@ -171,52 +153,6 @@ export default { this.toggleSidebar(false) } } - }, - - // Vue Mastery Banner - initBanner() { - // Add event listeners - this.toggleBannerEvents(true) - // Get the menu position - this.getMenuPosition() - // Check current page offset position - this.isMenuFixed = this.isUnderBanner() - }, - - closeBanner(e) { - // Remove events - this.toggleBannerEvents(false) - // Hide the banner - this.isBannerOpen = false - // Save action in the local storage - localStorage.setItem(this.nameStorage, true) - }, - - getMenuPosition() { - this.menuPosition = this.$refs.vueMasteryBanner.$el.clientHeight - }, - - isUnderBanner() { - return window.pageYOffset > this.menuPosition - }, - - fixMenuAfterBanner() { - if (this.isUnderBanner()) { - if (!this.isMenuFixed) { - // The menu will be fixed - this.isMenuFixed = true - } - } else if (this.isMenuFixed) { - // The menu stay under the banner - this.isMenuFixed = false - } - }, - - toggleBannerEvents(on) { - // Add or remove event listerners attached to the DOM - let method = on ? 'addEventListener' : 'removeEventListener' - window[method]('resize', this.getMenuPosition) - window[method]('scroll', this.fixMenuAfterBanner) } } } diff --git a/src/.vuepress/theme/styles/index.styl b/src/.vuepress/theme/styles/index.styl index d8e1bad138..f23c9deebf 100644 --- a/src/.vuepress/theme/styles/index.styl +++ b/src/.vuepress/theme/styles/index.styl @@ -4,7 +4,6 @@ @require './arrow' @require './wrapper' @require './toc' -@require './vuemastery-banner' html, body padding 0 diff --git a/src/.vuepress/theme/styles/vuemastery-banner.styl b/src/.vuepress/theme/styles/vuemastery-banner.styl deleted file mode 100644 index e71506daba..0000000000 --- a/src/.vuepress/theme/styles/vuemastery-banner.styl +++ /dev/null @@ -1,243 +0,0 @@ -.vuemastery-banner - background: url(/images/vuemastery/background-vuemastery.svg) center center no-repeat - background-size 100% auto - overflow hidden - position relative - - &:before - content '' - background: url(/images/vuemastery/background-bubbles-vuemastery.svg) left center no-repeat - background-size cover - position absolute - top 0 - bottom 0 - left 0 - right 0 - transition all .3s ease-out .1s - transform: scale(1.1) - - &:after - content: '' - background: url(/images/vuemastery/lock-vuemastery.svg) right center no-repeat - background-size: auto 100% - position: absolute - width: 100% - height: 100% - top: 0 - left: 0 - pointer-events: none - - &:hover - background-size 150% auto - - &:before - transform: scale(1) - - &:after - background-image url(/images/vuemastery/unlock-vuemastery.svg) - - a - display flex - height 80px - justify-content center - -.vuemastery-banner--wrapper - display flex - height 100% - align-items center - width: 100% - justify-content: center - position relative - - &:before - content '' - pointer-events none - position absolute - top 0 - bottom 0 - left 0 - width 0 - transition width .3s ease-out - - &:hover - + .vuemastery-banner--close - &:before, - &:after - transform-origin 100% - - p - margin -3px 50px 0 20px - font-size 1rem - line-height 1.4rem - color #fff - position relative - transition-delay .15s - - span - font-size 1.17rem - font-weight 600 - color #BEFF74 - background -webkit-linear-gradient(#41E281, #BEFF74) - -webkit-background-clip text - -webkit-text-fill-color transparent - -@media screen and (min-width: 700px) - .vuemastery-banner--wrapper span - display block - -.vuemastery-banner--logo - height 102% - margin-top: -1px - margin-left -200px - 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) - -.vuemastery-button - display: inline-flex; - background: linear-gradient(to top right,#3d2c61,#835ec2); - height: 38px; - margin: .5em 0; - line-height: 38px; - padding: 0 30px; - color: #fff; - text-decoration: none; - align-items: center; - justify-content: center; - outline: 0; - text-transform: uppercase; - border: none; - border-radius: 36px; - font-weight: bold; - font-size: 12px; - cursor: pointer; - position: relative - overflow hidden - - &:before, - &:after - background: linear-gradient(to top right,transparent,#fff); - content: ""; - height: 150px; - left: -175px; - opacity: .1; - position: absolute; - top: -50px; - transform: rotate(35deg); - width: 100px; - -@media screen and (max-width: 1200px) - .vuemastery-banner - &, - &:hover - background-size cover - - &:before - transform: scale(1) - - &:hover:before - transform: scale(1) - -@media screen and (max-width: 1100px) - .vuemastery-button - display none - -@media screen and (max-width: 700px) - .vuemastery-banner - &:after - background-position right -2rem center - a - height 40px - overflow hidden - - .vuemastery-banner--logo - margin-left 0 - justify-content flex-start - - p, span - font-size .8rem - color #fff - line-height .9rem - - .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 - &:after - display: none - p - margin-right 40px - margin-left 5px - - &:after - background-position right -3rem center -@media screen and (max-width 330px) - .vuemastery-banner p - font-size 0.6rem - margin-right 20px - margin-left 0 - -@media print - .vuemastery-banner - display none - - -.vuemastery-promo - .navbar - position relative - - .sidebar - position absolute - top 8.6rem - bottom -5rem - - @media screen and (max-width: 700px) - top: 98px; - bottom: -20px; - - &.vuemastery-menu-fixed - .vuemastery-banner - margin-bottom 56px - - .sidebar, - .navbar - position fixed - top -1px - - .sidebar - top 3.5rem - bottom 0 \ No newline at end of file