From d4543d23510879832f484b8646fb11a0968f2469 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Fri, 22 Jul 2022 10:29:21 +0200 Subject: [PATCH] CSS / JS --- files/wash-n-roll/internal/js/scripts.js | 10 +- .../internal/scss/base/_components.scss | 1 + .../internal/scss/components/_checkout.scss | 5 + .../internal/scss/components/_downloads.scss | 3 + .../internal/scss/components/_form.scss | 43 ++++++ .../internal/scss/components/_gallery.scss | 14 +- .../internal/scss/components/_product.scss | 32 ++++- .../internal/scss/components/_quantity.scss | 3 + .../internal/scss/components/_slider.scss | 21 +++ .../internal/scss/components/_youtube.scss | 72 +++++----- .../internal/scss/layout/_header.scss | 124 +++++++++++++++++- 11 files changed, 288 insertions(+), 40 deletions(-) create mode 100644 files/wash-n-roll/internal/scss/components/_downloads.scss diff --git a/files/wash-n-roll/internal/js/scripts.js b/files/wash-n-roll/internal/js/scripts.js index 17c7c7c..43eeff4 100644 --- a/files/wash-n-roll/internal/js/scripts.js +++ b/files/wash-n-roll/internal/js/scripts.js @@ -78,7 +78,15 @@ $(document).ready((e) => { }); // Add number to header basket - $("#header-basket-items").appendTo("header a.isotope-basket, header strong.isotope-basket"); + $("#header-basket-items").appendTo("header #spwn-main-nav a.isotope-basket, header #spwn-main-nav strong.isotope-basket"); + + // Mobile navigation + $(".spwn-nav-icon").on("click", function() { + $("body").addClass("mobile-nav-open"); + }); + $(".spwn-nav-close").on("click", function() { + $("body").removeClass("mobile-nav-open"); + }); // FAQ list toggle $(".mod_faqlist ul li h3").on("click", function() { diff --git a/files/wash-n-roll/internal/scss/base/_components.scss b/files/wash-n-roll/internal/scss/base/_components.scss index 83eb098..87450e3 100644 --- a/files/wash-n-roll/internal/scss/base/_components.scss +++ b/files/wash-n-roll/internal/scss/base/_components.scss @@ -10,6 +10,7 @@ @import 'components/blog'; @import 'components/pagination'; @import 'components/quantity'; +@import 'components/downloads'; @import 'components/product'; @import 'components/product-carousel'; @import 'components/error'; diff --git a/files/wash-n-roll/internal/scss/components/_checkout.scss b/files/wash-n-roll/internal/scss/components/_checkout.scss index c0972fb..bce9b39 100644 --- a/files/wash-n-roll/internal/scss/components/_checkout.scss +++ b/files/wash-n-roll/internal/scss/components/_checkout.scss @@ -21,6 +21,11 @@ font-size: size(36); line-height: size(52); color: $tertiary; + + &.shipping, + &.payment { + display: none; + } &:before { content: ""; diff --git a/files/wash-n-roll/internal/scss/components/_downloads.scss b/files/wash-n-roll/internal/scss/components/_downloads.scss new file mode 100644 index 0000000..5fccf30 --- /dev/null +++ b/files/wash-n-roll/internal/scss/components/_downloads.scss @@ -0,0 +1,3 @@ +.ce_downloads { + padding: 0 0 4rem 0; +} \ No newline at end of file diff --git a/files/wash-n-roll/internal/scss/components/_form.scss b/files/wash-n-roll/internal/scss/components/_form.scss index 6e8234f..81bf721 100644 --- a/files/wash-n-roll/internal/scss/components/_form.scss +++ b/files/wash-n-roll/internal/scss/components/_form.scss @@ -31,6 +31,41 @@ justify-content: flex-end; width: 100%; } + + &[data-name="shippingaddress_company"], + &[data-name="billingaddress_company"], + &[data-name="shippingaddress_country"], + &[data-name="billingaddress_country"] { + width: 100%; + } + &[data-name="shippingaddress_postal"], + &[data-name="billingaddress_postal"] { + width: calc(25% - 20px); + @media (max-width: 575px) { + width: 100%; + } + } + &[data-name="shippingaddress_city"], + &[data-name="billingaddress_city"] { + width: calc(75% - 20px); + @media (max-width: 575px) { + width: 100%; + } + } + &[data-name="shippingaddress_street_1"], + &[data-name="billingaddress_street_1"] { + width: calc(75% - 20px); + @media (max-width: 575px) { + width: 100%; + } + } + &[data-name="shippingaddress_street_2"], + &[data-name="billingaddress_street_2"] { + width: calc(25% - 20px); + @media (max-width: 575px) { + width: 100%; + } + } } label { @@ -54,6 +89,14 @@ select { padding-top: 10px; padding-bottom: 10px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: $white url("../images/elements/arrow-select.png") no-repeat calc(100% - 20px) 50%; + background-size: 10px auto; + &::-ms-expand { + display: none; + } } textarea { diff --git a/files/wash-n-roll/internal/scss/components/_gallery.scss b/files/wash-n-roll/internal/scss/components/_gallery.scss index 73537ed..4e984b6 100644 --- a/files/wash-n-roll/internal/scss/components/_gallery.scss +++ b/files/wash-n-roll/internal/scss/components/_gallery.scss @@ -50,4 +50,16 @@ } } -} \ No newline at end of file +} + +.ce_bs_grid_gallery { + @media (max-width: 768px) { + .row { + display: block; + + .col { + padding: 0 0 2rem 0; + } + } + } +} diff --git a/files/wash-n-roll/internal/scss/components/_product.scss b/files/wash-n-roll/internal/scss/components/_product.scss index fead40c..e6dc9f9 100644 --- a/files/wash-n-roll/internal/scss/components/_product.scss +++ b/files/wash-n-roll/internal/scss/components/_product.scss @@ -216,6 +216,11 @@ line-height: inherit; } } + + .spwn-additional-information { + padding-top: 0.5rem; + text-align: center; + } } .image_container { @@ -223,10 +228,13 @@ } img { - width: 554px; + //width: 554px; + height: 600px; + width: auto; margin: 0 auto; @media (max-width: 768px) { width: 100%; + height: auto; } } @@ -247,10 +255,21 @@ } } + .spwn-downloads { + padding-top: 2rem; + } + + .spwn-additional-info { + padding: 0 0 4rem 0; + } + h1, h2 { width: 100%; text-align: center; - padding: 0 0 8rem 0; + padding: 0 0 6rem 0; + @media (max-width: 768px) { + padding-bottom: 4rem; + } } h3 { @@ -276,7 +295,8 @@ padding: 2rem 0 0 0; .spwn-inner { - max-width: calc(1280px - 24px - 190px - 190px); + overflow: hidden; + max-width: calc(1280px - 190px - 190px); margin: 0 auto; @media (max-width: 1280px) { max-width: calc(100% - 14.85vw - 14.85vw); @@ -289,7 +309,10 @@ } } } + } + .description, + .spwn-additional-text { ul { li { position: relative; @@ -320,6 +343,9 @@ .submit { @include button(); margin: 0 12px; + @media (max-width: 575px) { + margin-bottom: 1rem; + } } } } diff --git a/files/wash-n-roll/internal/scss/components/_quantity.scss b/files/wash-n-roll/internal/scss/components/_quantity.scss index a1f4e24..8b82cc8 100644 --- a/files/wash-n-roll/internal/scss/components/_quantity.scss +++ b/files/wash-n-roll/internal/scss/components/_quantity.scss @@ -7,6 +7,9 @@ line-height: 28px; background: #f2f2f2; border-radius: 20px; + @media (max-width: 575px) { + margin-bottom: 1rem; + } label { display: none; diff --git a/files/wash-n-roll/internal/scss/components/_slider.scss b/files/wash-n-roll/internal/scss/components/_slider.scss index 54db5a2..c0928bf 100644 --- a/files/wash-n-roll/internal/scss/components/_slider.scss +++ b/files/wash-n-roll/internal/scss/components/_slider.scss @@ -101,6 +101,15 @@ top: 50%; text-align: right; max-width: 750px; + @media (max-width: 768px) { + right: auto; + left: 0; + top: auto; + bottom: 20px; + width: 100%; + max-width: none; + text-align: center; + } a { display: inline-block; @@ -122,5 +131,17 @@ color: $white; line-height: size(64); padding: 0 0 2rem 0; + @media (max-width: 768px) { + background: rgba(255,255,255, 0.4); + padding: 1rem; + margin-bottom: 1rem; + text-align: left; + span[style*="#bcd03c"] { + text-shadow: 0 0 8px $font; + } + } + @media (max-width: 575px) { + line-height: size(40); + } } } \ No newline at end of file diff --git a/files/wash-n-roll/internal/scss/components/_youtube.scss b/files/wash-n-roll/internal/scss/components/_youtube.scss index 31923ac..52d46fe 100644 --- a/files/wash-n-roll/internal/scss/components/_youtube.scss +++ b/files/wash-n-roll/internal/scss/components/_youtube.scss @@ -6,6 +6,44 @@ padding-bottom: 56.25%; width: 100%; height: auto; + + a { + display: block; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 200; + + &:after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 77px; + height: 78px; + -webkit-mask-image: url("../images/elements/youtube-play-icon.svg"); + mask-image: url("../images/elements/youtube-play-icon.svg"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: left top; + mask-position: left top; + -webkit-mask-size: 100% auto; + mask-size: 100% auto; + background-color: $white; + @media (max-width: 575px) { + transform: translate(-50%, -50%) scale(50%); + } + } + + &:hover { + &:after { + background-color: $youtube-red; + } + } + } } img, @@ -113,38 +151,6 @@ height: auto; } - a { - display: block; - - &:after { - content: ""; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 77px; - height: 78px; - -webkit-mask-image: url("../images/elements/youtube-play-icon.svg"); - mask-image: url("../images/elements/youtube-play-icon.svg"); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: left top; - mask-position: left top; - -webkit-mask-size: 100% auto; - mask-size: 100% auto; - background-color: $white; - @media (max-width: 575px) { - transform: translate(-50%, -50%) scale(50%); - } - } - - &:hover { - &:after { - background-color: $youtube-red; - } - } - } - img, iframe { border-radius: 20px; @@ -160,7 +166,7 @@ font-size: size(24); line-height: size(30); color: $white; - background: rgba(0,0,0,0.7); + background: rgba(0, 0, 0, 0.7); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; @media (max-width: 575px) { diff --git a/files/wash-n-roll/internal/scss/layout/_header.scss b/files/wash-n-roll/internal/scss/layout/_header.scss index 2408b9e..a119d5d 100644 --- a/files/wash-n-roll/internal/scss/layout/_header.scss +++ b/files/wash-n-roll/internal/scss/layout/_header.scss @@ -37,8 +37,15 @@ header { } } - .mod_navigation { - @media (max-width: 768px) { + .spwn-navigations { + display: flex; + justify-content: flex-start; + align-items: center; + } + + #spwn-main-nav.mod_navigation { + .spwn-nav-icon, + .spwn-nav-close { display: none; } @@ -49,6 +56,12 @@ header { li { margin-left: 22px; + @media (max-width: 768px) { + display: none; + &.isotope-basket { + display: block; + } + } a, strong { display: block; @@ -89,6 +102,10 @@ header { border-color: $tertiary; text-indent: -9999px; width: 78px; + @media (max-width: 1004px) { + line-height: 24px; + background-size: 18px auto; + } &:hover { background-color: #F5F5F5; @@ -100,6 +117,109 @@ header { } } + #spwn-mobile-nav.mod_navigation { + display: none; + @media (max-width: 768px) { + display: block; + } + + .spwn-nav-icon { + position: relative; + width: 24px; + height: 18px; + border-top: 2px solid $font; + cursor: pointer; + margin-left: 24px; + + &:before, + &:after { + content: ''; + display: block; + position: absolute; + left: 0; + width: 100%; + height: 2px; + background: $font; + } + + &:before { + top: 5px; + } + + &:after { + top: 12px; + } + } + + .spwn-nav-close { + position: absolute; + right: 20px; + top: 70px; + width: 24px; + height: 24px; + cursor: pointer; + + &:before, + &:after { + content: ''; + position: absolute; + right: 0; + top: 0; + width: 2px; + height: 24px; + background: $font; + } + + &:before { + transform: rotate(45deg) translate(-9px, 9px); + } + + &:after { + transform: rotate(-45deg) translate(-9px, -9px); + } + } + + .spwn-nav { + visibility: hidden; + opacity: 0; + position: absolute; + right: 0; + top: 0; + z-index: 200; + width: 50vw; + height: 100vh; + background: $white; + border-left: 2px solid $primary; + box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2); + @include transition(); + @media (max-width: 575px) { + width: 80vw; + } + + .mobile-nav-open & { + visibility: visible; + opacity: 1; + } + } + + ul { + padding: 7rem 0 0 0; + } + + li { + font-size: size(20); + line-height: size(24); + &.isotope-basket { + display: none; + } + } + a, + strong { + display: block; + padding: 1rem 3rem; + } + } + #header-basket-items { position: absolute; right: 15px;