From 7848cba6c714327da3f59edee70aed9c90fc6464 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Thu, 18 Mar 2021 21:32:34 +0100 Subject: [PATCH] vueschool free-weekend banner --- themes/vue/layout/index.ejs | 5 +- themes/vue/layout/layout.ejs | 8 +- .../vue/layout/partials/vueschool_banner.ejs | 26 +++ themes/vue/source/css/_header.styl | 15 +- themes/vue/source/css/_sidebar.styl | 2 +- themes/vue/source/css/_vueschool.styl | 161 +++++++++++++ themes/vue/source/css/index.styl | 1 + themes/vue/source/css/page.styl | 1 + themes/vue/source/images/banners/close.svg | 7 + .../vue/source/images/banners/free-access.svg | 7 + themes/vue/source/images/banners/vs-iso.svg | 10 + themes/vue/source/images/banners/vs-logo.svg | 13 ++ .../banners/vueschool-banner-bg-desktop.svg | 219 ++++++++++++++++++ .../banners/vueschool-banner-bg-mobile.svg | 14 ++ .../banners/vueschool-banner-bg-tablet.svg | 201 ++++++++++++++++ themes/vue/source/js/common.js | 20 +- 16 files changed, 696 insertions(+), 14 deletions(-) create mode 100644 themes/vue/layout/partials/vueschool_banner.ejs create mode 100644 themes/vue/source/css/_vueschool.styl create mode 100644 themes/vue/source/images/banners/close.svg create mode 100644 themes/vue/source/images/banners/free-access.svg create mode 100644 themes/vue/source/images/banners/vs-iso.svg create mode 100644 themes/vue/source/images/banners/vs-logo.svg create mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg create mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg create mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs index ae77e1e77f..d3524bb460 100644 --- a/themes/vue/layout/index.ejs +++ b/themes/vue/layout/index.ejs @@ -163,10 +163,11 @@ }) window.addEventListener('scroll', function () { - if (window.pageYOffset > 165 && !topScrolled) { + var offset = 20 + if (window.pageYOffset > offset && !topScrolled) { topScrolled = true document.getElementById('mobile-bar').classList.remove('top') - } else if (window.pageYOffset <= 165 && topScrolled) { + } else if (window.pageYOffset <= offset && topScrolled) { topScrolled = false document.getElementById('mobile-bar').classList.add('top') } diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs index 8205035927..7df4749d04 100644 --- a/themes/vue/layout/layout.ejs +++ b/themes/vue/layout/layout.ejs @@ -1,5 +1,6 @@ <% var isIndex = page.path === 'index.html' %> <% var isThemes = page.path === 'resources/themes.html' %> +<% var hasVueSchoolBanner = true %> @@ -54,7 +55,7 @@ - + @@ -90,6 +91,11 @@ + + <% if (hasVueSchoolBanner) { %> + <%- partial('partials/vueschool_banner') %> + <% } %> +
> diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs new file mode 100644 index 0000000000..a4a9934dd9 --- /dev/null +++ b/themes/vue/layout/partials/vueschool_banner.ejs @@ -0,0 +1,26 @@ + +
+ +
+ +
+
+
+ VUE 3 MASTERCLASS - FREE WEEKEND +
+
+ Register at vueschool.io/free-weekend +
+
+
+
+ Free Access +
+
+
+
+ Close +
+ diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl index 4b4a3f7119..7f43c6ffab 100644 --- a/themes/vue/source/css/_header.styl +++ b/themes/vue/source/css/_header.styl @@ -1,3 +1,4 @@ +@import "_settings" $header-height = 40px red-dot-before(leftPos = -8px) @@ -12,10 +13,12 @@ red-dot-before(leftPos = -8px) #header background-color: #fff - height: $header-height - padding: $heading-padding-vertical 60px + padding: $heading-padding-vertical 30px $heading-padding-vertical 60px position: relative z-index: $z-header + display: flex + justify-content: space-between + box-sizing: border-box #v3-banner background-color: $green @@ -40,18 +43,11 @@ body.docs position: fixed width: 100% top: 0 - #nav - position: fixed - top: $heading-padding-vertical #nav list-style-type: none margin: 0 padding: 0 - position: absolute - right: 30px - top: $heading-padding-vertical - height: $header-height line-height: $header-height .break display: none @@ -147,6 +143,7 @@ body.docs display: none box-shadow: 0 0 2px rgba(0,0,0,.25) pointer-events: none + transition: background-color 0.25s ease-in > * pointer-events: auto .menu-button diff --git a/themes/vue/source/css/_sidebar.styl b/themes/vue/source/css/_sidebar.styl index 81980f3f21..78a72dbcb1 100644 --- a/themes/vue/source/css/_sidebar.styl +++ b/themes/vue/source/css/_sidebar.styl @@ -67,7 +67,7 @@ position: fixed background-color: #f9f9f9 height: 100% - top: 0 + top: 40px left: 0 box-shadow: 0 0 10px rgba(0,0,0,.2) transition: all .4s cubic-bezier(0.4, 0, 0, 1) diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl new file mode 100644 index 0000000000..e822721727 --- /dev/null +++ b/themes/vue/source/css/_vueschool.styl @@ -0,0 +1,161 @@ +@import "_settings" +$mobile-bar-height = 40px +$vs-banner-height-desktop = 80px +$vs-banner-height-mobile = 50px +$menu-height = 63px + +body.has-vs-banner + + #v3-banner + margin-top: $vs-banner-height-mobile + @media (min-width: 680px) + margin-top: $vs-banner-height-desktop + @media (min-width: 900px) + margin-top: 0 + + #mobile-bar + top: $vs-banner-height-mobile + @media (min-width: 680px) + top: $vs-banner-height-desktop + + .sidebar + top: $vs-banner-height-mobile + $mobile-bar-height + @media (min-width: 680px) + top: $vs-banner-height-desktop + $mobile-bar-height + @media (min-width: 900px) + top: $vs-banner-height-desktop + $menu-height + + .content + padding-top: 85px + @media (min-width: 680px) + padding-top: 125px + @media (min-width: 900px) + padding-top: 35px + + &.docs + @media (min-width: 900px) + padding-top: 144px + + #vs + position: fixed + + #header + top: $vs-banner-height-mobile + @media (min-width: 680px) + top: $vs-banner-height-desktop + + #sidebar-sponsors-platinum-right + @media (min-width: 900px) + top: 160px + +#vs + font-family "Roboto", sans-serif + z-index: 8 + box-sizing: border-box + color: #fff + background-size: cover + background-color: #1E204D + background-repeat: no-repeat + background-position: top right + background-image: url(../images/banners/vueschool-banner-bg-mobile.svg) + display: flex + justify-content: center + align-items: center + position: fixed + left: 0 + right: 0 + padding: 0 10px + min-height: $vs-banner-height-mobile + top: 0 + @media (min-width: 680px) + min-height: $vs-banner-height-desktop + background-image: url(../images/banners/vueschool-banner-bg-tablet.svg) + @media (min-width: 900px) + position: static + background-image: url(../images/banners/vueschool-banner-bg-desktop.svg) + + &.vs-hidden + display: none + + &:hover + .vs-core + .vs-button + .vs-button-inside + background: linear-gradient(#ed81eb, #d457d0) + &.vs-button-alt + .vs-button-inside + background: linear-gradient(#ffea80, #ffba49) + + .vs-iso + position: absolute + left: 20px + height: 26px + img + height: 26px + @media (min-width: 680px) + left: 40px + height: 40px + img + height: 40px + @media (min-width: 900px) + display: none + + .vs-logo + position: absolute + display: none + left: 40px + @media (min-width: 900px) + display: block + + .vs-core + display: flex + align-items: center + + .vs-slogan + text-align: center + + .vs-slogan-up + color: #47b785 + font-size: 14px + font-weight: bold + @media (min-width: 680px) + font-size: 18px + + .vs-slogan-down + color: #fff + font-size: 12px + @media (min-width: 680px) + font-size: 16px + strong + color: #48a0ff + + .vs-button + margin-left: 43px + color: #fff + background: linear-gradient(to bottom, #b349b0, #dc61da) + padding: 2px + border-radius: 40px + display: none + @media (min-width: 680px) + display: inline-block + .vs-button-inside + border-radius: 40px + background: linear-gradient(#dc61da, #b349b0) + transition: all .25s ease-in + padding: 17px 27px + line-height: 0 + @media (min-width: 680px) + padding: 13px 24px + &.vs-button-alt + background: linear-gradient(to bottom, #ffcc38, #ffd13d) + .vs-button-inside + background: linear-gradient(to bottom, #ffe24f, #ffa40e) + + .vs-close + right: 10px + position: absolute + padding: 10px + @media (min-width: 680px) + right: 20px + &:hover + color: #56D8FF \ No newline at end of file diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl index ff77f319d9..b8f326fa8d 100644 --- 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.styl" $width = 900px $space = 40px diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl index 90746a3d07..e8b6b94cdc 100644 --- a/themes/vue/source/css/page.styl +++ b/themes/vue/source/css/page.styl @@ -16,6 +16,7 @@ @import "_scrimba" @import "_vue-mastery" @import "_themes" +@import "_vueschool.styl" #header box-shadow: 0 0 1px rgba(0,0,0,.25) diff --git a/themes/vue/source/images/banners/close.svg b/themes/vue/source/images/banners/close.svg new file mode 100644 index 0000000000..16b7786154 --- /dev/null +++ b/themes/vue/source/images/banners/close.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/themes/vue/source/images/banners/free-access.svg b/themes/vue/source/images/banners/free-access.svg new file mode 100644 index 0000000000..56a075ea97 --- /dev/null +++ b/themes/vue/source/images/banners/free-access.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/themes/vue/source/images/banners/vs-iso.svg b/themes/vue/source/images/banners/vs-iso.svg new file mode 100644 index 0000000000..d5fbbaac93 --- /dev/null +++ b/themes/vue/source/images/banners/vs-iso.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vs-logo.svg b/themes/vue/source/images/banners/vs-logo.svg new file mode 100644 index 0000000000..4e060ce4e2 --- /dev/null +++ b/themes/vue/source/images/banners/vs-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg b/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg new file mode 100644 index 0000000000..e2903c996d --- /dev/null +++ b/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg @@ -0,0 +1,219 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg b/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg new file mode 100644 index 0000000000..5ece8fd7dc --- /dev/null +++ b/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg b/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg new file mode 100644 index 0000000000..cc7dac8c61 --- /dev/null +++ b/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js index aead1b5ea8..0a89c563c9 100644 --- a/themes/vue/source/js/common.js +++ b/themes/vue/source/js/common.js @@ -3,6 +3,7 @@ initMobileMenu() initVideoModal() initNewNavLinks() + initVueSchoolBanner() if (PAGE_TYPE) { initVersionSelect() initApiSpecLinks() @@ -280,6 +281,23 @@ }) } + /** + * Banner closing + */ + function initVueSchoolBanner () { + const banner = document.getElementById('vs') + if (banner && !localStorage.getItem('VS_BANNER_CLOSED')) { + banner.classList.remove('vs-hidden') + document.body.classList.add('has-vs-banner') + document.getElementById('vs-close').addEventListener('click', function (e) { + e.preventDefault() + e.stopPropagation() + document.getElementById('vs').remove() + document.body.classList.remove('has-vs-banner') + localStorage.setItem('VS_BANNER_CLOSED', 1) + }) + } + } /** * Modal Video Player @@ -423,7 +441,7 @@ if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') { return 300 } - return 0 + return localStorage.getItem('VS_BANNER_CLOSED') ? 0 : 80 } }) }