From d19061a3622deb5d568e5a2761d984885d5845d7 Mon Sep 17 00:00:00 2001 From: Nico Devs Date: Fri, 1 Apr 2022 11:18:28 -0300 Subject: [PATCH] Add Vue School 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 | 1 + 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 | 21 +- 15 files changed, 691 insertions(+), 4 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 011b52a9bd..82b99fc1f6 100644 --- a/themes/vue/layout/index.ejs +++ b/themes/vue/layout/index.ejs @@ -165,10 +165,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 72eaa8b515..12c63b7315 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 f0105af42b..1e341be245 100644 --- a/themes/vue/source/css/_header.styl +++ b/themes/vue/source/css/_header.styl @@ -143,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/_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 5e081274cd..bec2ecd6f2 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..4fee93a6ab --- /dev/null +++ b/themes/vue/source/images/banners/close.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file 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..7c8f7c490a --- /dev/null +++ b/themes/vue/source/images/banners/free-access.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file 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..985476ee66 --- /dev/null +++ b/themes/vue/source/images/banners/vs-iso.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file 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..9b72a0ed0e --- /dev/null +++ b/themes/vue/source/images/banners/vs-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file 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..adb1c11dc6 --- /dev/null +++ b/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg @@ -0,0 +1,219 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file 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..5a3c53666b --- /dev/null +++ b/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file 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..de06abe8b0 --- /dev/null +++ b/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js index 74428f007d..172bc52397 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,24 @@ }) } + /** + * Banner closing + */ + function initVueSchoolBanner () { + const banner = document.getElementById('vs') + if (banner && !localStorage.getItem('VS_FW_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_FW_BANNER_CLOSED', 1) + }) + } + } + /** * Modal Video Player */ @@ -422,7 +441,7 @@ if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') { return 300 } - return 0 + return localStorage.getItem('VS_FW_BANNER_CLOSED') ? 0 : 80 } }) }