From 8e4ec9668f94f7f2fde69ae5ff49bae230695a23 Mon Sep 17 00:00:00 2001 From: Rolf Haug Date: Tue, 30 Mar 2021 21:13:35 +0200 Subject: [PATCH] update vueschool banner --- .../vue/layout/partials/vueschool_banner.ejs | 16 +- themes/vue/source/css/_vueschool.styl | 71 ++---- .../vue/source/images/banners/free-access.svg | 7 - .../vue/source/images/banners/learn-more.svg | 9 - .../vue/source/images/banners/vs-backpack.svg | 71 ++++++ .../banners/vueschool-banner-bg-desktop-2.svg | 214 ----------------- .../banners/vueschool-banner-bg-desktop.svg | 219 ------------------ .../banners/vueschool-banner-bg-mobile-2.svg | 14 -- .../banners/vueschool-banner-bg-mobile.svg | 14 -- .../banners/vueschool-banner-bg-tablet-2.svg | 196 ---------------- .../banners/vueschool-banner-bg-tablet.svg | 201 ---------------- themes/vue/source/js/common.js | 6 +- 12 files changed, 105 insertions(+), 933 deletions(-) delete mode 100644 themes/vue/source/images/banners/free-access.svg delete mode 100644 themes/vue/source/images/banners/learn-more.svg create mode 100644 themes/vue/source/images/banners/vs-backpack.svg delete mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-desktop-2.svg delete mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg delete mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-mobile-2.svg delete mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg delete mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-tablet-2.svg delete mode 100644 themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg diff --git a/themes/vue/layout/partials/vueschool_banner.ejs b/themes/vue/layout/partials/vueschool_banner.ejs index d903f61b53..0bd837c32e 100644 --- a/themes/vue/layout/partials/vueschool_banner.ejs +++ b/themes/vue/layout/partials/vueschool_banner.ejs @@ -1,4 +1,4 @@ - +
Vue School logo
@@ -6,18 +6,14 @@ Vue School logo
+
+ backpack illustration +
-
- LEARN VUE AT VUE SCHOOL -
-
- Register today and get 20% OFF -
+ Flash Sale - Less than 48hrs left to get 20% OFF!
-
- Learn More -
+ GET OFFER
diff --git a/themes/vue/source/css/_vueschool.styl b/themes/vue/source/css/_vueschool.styl index 309e5b46b5..0fb891f1f4 100644 --- a/themes/vue/source/css/_vueschool.styl +++ b/themes/vue/source/css/_vueschool.styl @@ -54,10 +54,7 @@ body.has-vs-banner 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-2.svg) + background-color: #202A5A display: flex justify-content: center align-items: center @@ -69,10 +66,8 @@ body.has-vs-banner top: 0 @media (min-width: 680px) min-height: $vs-banner-height-desktop - background-image: url(../images/banners/vueschool-banner-bg-tablet-2.svg) @media (min-width: 900px) position: static - background-image: url(../images/banners/vueschool-banner-bg-desktop-2.svg) &.vs-hidden display: none @@ -80,11 +75,7 @@ body.has-vs-banner &:hover .vs-core .vs-button - .vs-button-inside - background: linear-gradient(#ed81eb, #d457d0) - &.vs-button-alt - .vs-button-inside - background: linear-gradient(#ffea80, #ffba49) + background-color: #364fde .vs-iso position: absolute @@ -93,11 +84,6 @@ body.has-vs-banner img height: 26px @media (min-width: 680px) - left: 40px - height: 40px - img - height: 40px - @media (min-width: 900px) display: none .vs-logo @@ -111,53 +97,46 @@ body.has-vs-banner display: flex align-items: center + .vs-illustration + display: none + @media (min-width: 680px) + display: inline-block + margin-right: 8px + @media (min-width: 900px) + margin-right: 20px + .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 - padding-top: 2px + font-size: 14px + font-weight: bold + @media (min-width: 680px) + font-size: 22px + .vs-slogan-main + display: none @media (min-width: 680px) - font-size: 16px - strong - color: #fff - font-weight: bold + display: inline .vs-button - margin-left: 43px + margin-left: 8px color: #fff - background: linear-gradient(to bottom, #b349b0, #dc61da) + background: #667dff padding: 2px border-radius: 40px display: none + padding: 17px 24px + font-weight: bold @media (min-width: 680px) display: inline-block - .vs-button-inside - border-radius: 40px - background: linear-gradient(#dc61da, #b349b0) - transition: all .25s ease-in - padding: 12px 24px 8px - line-height: 0 - @media (min-width: 680px) - padding: 12px 24px 8px - &.vs-button-alt - background: linear-gradient(to bottom, #ffcc38, #ffd13d) - .vs-button-inside - background: linear-gradient(to bottom, #ffe24f, #ffa40e) + @media (min-width: 900px) + margin-left: 20px .vs-close right: 10px position: absolute padding: 10px @media (min-width: 680px) + right: 0px + @media (min-width: 900px) right: 20px &:hover color: #56D8FF \ 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 deleted file mode 100644 index 56a075ea97..0000000000 --- a/themes/vue/source/images/banners/free-access.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/themes/vue/source/images/banners/learn-more.svg b/themes/vue/source/images/banners/learn-more.svg deleted file mode 100644 index 58cc3f56a3..0000000000 --- a/themes/vue/source/images/banners/learn-more.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/themes/vue/source/images/banners/vs-backpack.svg b/themes/vue/source/images/banners/vs-backpack.svg new file mode 100644 index 0000000000..927a413fb6 --- /dev/null +++ b/themes/vue/source/images/banners/vs-backpack.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-desktop-2.svg b/themes/vue/source/images/banners/vueschool-banner-bg-desktop-2.svg deleted file mode 100644 index bf8503e693..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-desktop-2.svg +++ /dev/null @@ -1,214 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg b/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg deleted file mode 100644 index e2903c996d..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-desktop.svg +++ /dev/null @@ -1,219 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-mobile-2.svg b/themes/vue/source/images/banners/vueschool-banner-bg-mobile-2.svg deleted file mode 100644 index 74cffc6293..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-mobile-2.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg b/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg deleted file mode 100644 index 5ece8fd7dc..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-mobile.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-tablet-2.svg b/themes/vue/source/images/banners/vueschool-banner-bg-tablet-2.svg deleted file mode 100644 index 8fe06eae8c..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-tablet-2.svg +++ /dev/null @@ -1,196 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg b/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg deleted file mode 100644 index cc7dac8c61..0000000000 --- a/themes/vue/source/images/banners/vueschool-banner-bg-tablet.svg +++ /dev/null @@ -1,201 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js index 0a89c563c9..505c89a72e 100644 --- a/themes/vue/source/js/common.js +++ b/themes/vue/source/js/common.js @@ -286,7 +286,7 @@ */ function initVueSchoolBanner () { const banner = document.getElementById('vs') - if (banner && !localStorage.getItem('VS_BANNER_CLOSED')) { + if (banner && !localStorage.getItem('VS_OFFER_BANNER_CLOSED')) { banner.classList.remove('vs-hidden') document.body.classList.add('has-vs-banner') document.getElementById('vs-close').addEventListener('click', function (e) { @@ -294,7 +294,7 @@ e.stopPropagation() document.getElementById('vs').remove() document.body.classList.remove('has-vs-banner') - localStorage.setItem('VS_BANNER_CLOSED', 1) + localStorage.setItem('VS_OFFER_BANNER_CLOSED', 1) }) } } @@ -441,7 +441,7 @@ if(dataTypeAttr && dataTypeAttr.nodeValue === 'theme-product-title') { return 300 } - return localStorage.getItem('VS_BANNER_CLOSED') ? 0 : 80 + return localStorage.getItem('VS_OFFER_BANNER_CLOSED') ? 0 : 80 } }) }