From f38872209cc2e72bad67c9a39caad4eaba804897 Mon Sep 17 00:00:00 2001 From: Nico Devs Date: Mon, 8 Nov 2021 12:31:43 -0300 Subject: [PATCH 1/2] Add Vue School Black Friday 21 banners --- themes/vue/layout/layout.ejs | 4 +- .../vue/layout/partials/vueschool_banner.ejs | 23 +- themes/vue/source/css/_vueschool.styl | 96 ++++----- themes/vue/source/css/index.styl | 1 + themes/vue/source/css/page.styl | 1 + ...eschool_blackfriday_background_desktop.svg | 200 ++++++++++++++++++ ...ueschool_blackfriday_background_tablet.svg | 200 ++++++++++++++++++ .../banners/vueschool_blackfriday_logo.svg | 7 + .../source/images/banners/vueschool_close.svg | 7 + themes/vue/source/js/common.js | 7 +- 10 files changed, 470 insertions(+), 76 deletions(-) create mode 100644 themes/vue/source/images/banners/vueschool_blackfriday_background_desktop.svg create mode 100644 themes/vue/source/images/banners/vueschool_blackfriday_background_tablet.svg create mode 100644 themes/vue/source/images/banners/vueschool_blackfriday_logo.svg create mode 100644 themes/vue/source/images/banners/vueschool_close.svg diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs index 1adeae6962..facab36968 100644 --- a/themes/vue/layout/layout.ejs +++ b/themes/vue/layout/layout.ejs @@ -1,6 +1,6 @@ <% var isIndex = page.path === 'index.html' %> <% var isThemes = page.path === 'resources/themes.html' %> -<% var hasVueSchoolBanner = false %> +<% var hasVueSchoolBanner = true %> @@ -55,7 +55,7 @@ - + diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs index 9f39650e0d..a52d2980e7 100644 --- a/themes/vue/layout/partials/vueschool_banner.ejs +++ b/themes/vue/layout/partials/vueschool_banner.ejs @@ -1,22 +1,21 @@ - -
- -
- +
-
- Backpack +
- Less than 48 hours left for the Vue School offer +
+ Access to all Vue Courses at Vue School +
+
+ Black Friday 40% OFF +
- GET ACCESS + Get Discount
- Close + Close
diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl index 90072df14f..e142680d98 100644 --- a/themes/vue/source/css/_vueschool.styl +++ b/themes/vue/source/css/_vueschool.styl @@ -1,7 +1,7 @@ @import "_settings" $mobile-bar-height = 40px $vs-banner-height-desktop = 80px -$vs-banner-height-mobile = 50px +$vs-banner-height-mobile = 80px $menu-height = 63px body.has-vs-banner @@ -49,11 +49,11 @@ body.has-vs-banner top: 160px #vs - font-family "Roboto", sans-serif + font-family "Archivo", sans-serif z-index: 8 box-sizing: border-box color: #FFF - background: #202A5A + background-color: #000c19 display: flex align-items: center position: fixed @@ -65,8 +65,10 @@ body.has-vs-banner @media (min-width: 680px) justify-content: center min-height: $vs-banner-height-desktop + background-image: url(/images/banners/vueschool_blackfriday_background_tablet.svg) @media (min-width: 900px) position: static + background-image: url(/images/banners/vueschool_blackfriday_background_desktop.svg) &.vs-hidden display: none @@ -74,78 +76,54 @@ body.has-vs-banner &:hover .vs-core .vs-button - background: #f22606 - - .vs-iso - display: none - position: absolute - left: 20px - height: 26px - img - height: 26px - @media (min-width: 680px) - display: inline-block - 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 + background: linear-gradient(261deg, #e61463 100%, #db5248 3%); .vs-core display: flex align-items: center - .vs-backpack - margin-right: 14px - img - height: 50px - @media (min-width: 680px) - height: 74px - .vs-slogan + font-family: Archivo color: #FFF - font-weight: bold - font-size: 14px - width: 150px - text-align: center - margin-left: 40px - @media (min-width: 400px) - margin-left: 60px + margin-left: 8px @media (min-width: 680px) - margin-left: 0 - width: auto - text-align: left - font-size: 18px - > .vs-slogan-light - color: #ff5338 - text-align: left - @media (min-width: 900px) - text-align: center - display: inline + margin-left: 24px + .vs-slogan-subtitle + font-size: 12px + @media (min-width: 680px) + font-size: 14px + .vs-slogan-title + margin-top: 6px + font-size: 16px + font-weight: 600 + @media (min-width: 680px) + font-size: 18px + strong + color: #ffae29 + font-weight: 600 .vs-button - margin-left: 43px + margin-left: 16px color: #FFF - padding: 13px 24px - border-radius: 40px - display: none - background: #ff5338 - font-weight: bold + padding: 7px 10px + border-radius: 4px + background: linear-gradient(to left, #e61b60, #dd4a4c) + font-weight: 600 + white-space: nowrap + margin-right: 30px + @media (min-width: 680px) + margin-right: 0 + padding: 8px 24px + margin-left: 32px @media (min-width: 680px) - display: inline-block + margin-left: 69px .vs-close - right: 10px + right: 6px position: absolute - padding: 10px @media (min-width: 680px) + right: 10px + padding: 10px 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/vueschool_blackfriday_background_desktop.svg b/themes/vue/source/images/banners/vueschool_blackfriday_background_desktop.svg new file mode 100644 index 0000000000..b7327da38d --- /dev/null +++ b/themes/vue/source/images/banners/vueschool_blackfriday_background_desktop.svg @@ -0,0 +1,200 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet.svg b/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet.svg new file mode 100644 index 0000000000..022da2d0a1 --- /dev/null +++ b/themes/vue/source/images/banners/vueschool_blackfriday_background_tablet.svg @@ -0,0 +1,200 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vueschool_blackfriday_logo.svg b/themes/vue/source/images/banners/vueschool_blackfriday_logo.svg new file mode 100644 index 0000000000..351c55977e --- /dev/null +++ b/themes/vue/source/images/banners/vueschool_blackfriday_logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/themes/vue/source/images/banners/vueschool_close.svg b/themes/vue/source/images/banners/vueschool_close.svg new file mode 100644 index 0000000000..0e2f31fcd4 --- /dev/null +++ b/themes/vue/source/images/banners/vueschool_close.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js index a8e12f90dd..bb3b9a4941 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() @@ -285,7 +286,7 @@ */ function initVueSchoolBanner () { const banner = document.getElementById('vs') - if (banner && !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')) { + if (banner && !localStorage.getItem('VS_BF21_BANNER_CLOSED')) { banner.classList.remove('vs-hidden') document.body.classList.add('has-vs-banner') document.getElementById('vs-close').addEventListener('click', function (e) { @@ -293,7 +294,7 @@ e.stopPropagation() document.getElementById('vs').remove() document.body.classList.remove('has-vs-banner') - localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1) + localStorage.setItem('VS_BF21_BANNER_CLOSED', 1) }) } } @@ -440,7 +441,7 @@ if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') { return 300 } - return 0 + return localStorage.getItem('VS_BF21_BANNER_CLOSED') ? 0 : 80 } }) } From d66b7bc959f0e6cb58cfcd15e0c12ca94749a2e3 Mon Sep 17 00:00:00 2001 From: Nico Devs Date: Tue, 16 Nov 2021 13:00:21 -0300 Subject: [PATCH 2/2] Update Black Friday Vue School banner --- .../vue/layout/partials/vueschool_banner.ejs | 21 ++ themes/vue/source/css/_vueschool.styl | 84 +++++++- .../source/images/banners/tech-coin-js.png | Bin 0 -> 4545 bytes .../source/images/banners/tech-coin-nuxt.png | Bin 0 -> 5420 bytes .../source/images/banners/tech-coin-ts.png | Bin 0 -> 3483 bytes .../source/images/banners/tech-coin-vue.png | Bin 0 -> 4382 bytes .../source/images/banners/tech-coin-vuex.png | Bin 0 -> 3718 bytes ...eschool_blackfriday_background_desktop.svg | 200 ------------------ 8 files changed, 101 insertions(+), 204 deletions(-) create mode 100644 themes/vue/source/images/banners/tech-coin-js.png create mode 100644 themes/vue/source/images/banners/tech-coin-nuxt.png create mode 100644 themes/vue/source/images/banners/tech-coin-ts.png create mode 100644 themes/vue/source/images/banners/tech-coin-vue.png create mode 100644 themes/vue/source/images/banners/tech-coin-vuex.png delete mode 100644 themes/vue/source/images/banners/vueschool_blackfriday_background_desktop.svg diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs index a52d2980e7..100dbefd3e 100644 --- a/themes/vue/layout/partials/vueschool_banner.ejs +++ b/themes/vue/layout/partials/vueschool_banner.ejs @@ -1,4 +1,25 @@ +<% + +const coins = [ + { id: 'js', direction: 'left' }, + { id: 'ts', direction: 'right' }, + { id: 'vue', direction: 'left' }, + { id: 'vuex', direction: 'left' }, + { id: 'nuxt', direction: 'right' } +] + +%> + +
+ <% for (let i = 0; i < coins.length; i++) { %> + <% const coin = coins[i] %> + <%- coin.id %> + <% } %> +