From ffe3634bcff932e4f4ec3f3f412592a9b03be90e Mon Sep 17 00:00:00 2001 From: Tancre Date: Fri, 18 Sep 2020 22:01:59 +0200 Subject: [PATCH] js automation and mobile menu --- app/assets/js/App.js | 3 + app/assets/js/Vendor.js | 1 + app/assets/js/modules/MobileMenu.js | 26 + app/assets/scss/modules/_large-hero.scss | 5 +- app/assets/scss/modules/_site-header.scss | 89 +- app/index.html | 20 +- app/temp/scripts/App.js | 25 + app/temp/scripts/Vendor.js | 1 + app/temp/styles/style.css | 70 +- app/temp/styles/style.css.map | 2 +- gulpfile.js | 6 +- package-lock.json | 3559 +++++++++++++++++++++ package.json | 11 +- webpack.config.js | 26 + 14 files changed, 3829 insertions(+), 15 deletions(-) create mode 100644 app/assets/js/App.js create mode 100644 app/assets/js/Vendor.js create mode 100644 app/assets/js/modules/MobileMenu.js create mode 100644 app/temp/scripts/App.js create mode 100644 app/temp/scripts/Vendor.js create mode 100644 webpack.config.js diff --git a/app/assets/js/App.js b/app/assets/js/App.js new file mode 100644 index 0000000..d78dea0 --- /dev/null +++ b/app/assets/js/App.js @@ -0,0 +1,3 @@ +import MobileMenu from './modules/MobileMenu'; + +var mobileMenu = new MobileMenu(); \ No newline at end of file diff --git a/app/assets/js/Vendor.js b/app/assets/js/Vendor.js new file mode 100644 index 0000000..d89b25c --- /dev/null +++ b/app/assets/js/Vendor.js @@ -0,0 +1 @@ +import '../temp/modernizr'; \ No newline at end of file diff --git a/app/assets/js/modules/MobileMenu.js b/app/assets/js/modules/MobileMenu.js new file mode 100644 index 0000000..0f94467 --- /dev/null +++ b/app/assets/js/modules/MobileMenu.js @@ -0,0 +1,26 @@ +import $ from 'jquery'; + +class MobileMenu{ + + constructor(){ + this.siteHeader = $(".site-header"); + this.menuIcon = $(".site-header__menu-icon"); + this.menuContent = $(".site-header__menu-content"); + this.siteHeaderLogo= $(".site-header__logo"); + this.events(); + } + + events(){ + this.menuIcon.click(this.toggleTheMenu.bind(this)); + } + + toggleTheMenu(){ + this.menuContent.toggleClass("site-header__menu-content--is-visible"); + this.siteHeader.toggleClass("site-header--is-expanded"); + this.menuIcon.toggleClass("site-header__menu-icon--close-x"); + this.siteHeaderLogo.toggleClass("site-header__logo--orange-bg"); + + } +} + +export default MobileMenu; \ No newline at end of file diff --git a/app/assets/scss/modules/_large-hero.scss b/app/assets/scss/modules/_large-hero.scss index e88c9ca..8c6fd6f 100644 --- a/app/assets/scss/modules/_large-hero.scss +++ b/app/assets/scss/modules/_large-hero.scss @@ -34,13 +34,14 @@ } &__subtitle { - font-family: "CocogooseNormal"; + // font-family: "CocogooseNormal"; + font-weight: 400; color: white; font-size: 1.5rem; margin: 0; @include atSmall(){ - font-size: 2.9rem; + font-size: 2.4rem; } } diff --git a/app/assets/scss/modules/_site-header.scss b/app/assets/scss/modules/_site-header.scss index 81219f1..f5c1c28 100644 --- a/app/assets/scss/modules/_site-header.scss +++ b/app/assets/scss/modules/_site-header.scss @@ -3,6 +3,11 @@ width: 100%; z-index: 2; transition: background-color .3s ease-out; + + &--is-expanded { + background-color: orange; + padding-bottom: 18px; + } @include atMedium(){ position: fixed; @@ -16,6 +21,73 @@ } } + &__menu-icon{ + width: 20px; + height: 19px; + position: absolute; + z-index: 10; + top: 10px; + right: 10px; + + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 3px; + background: #FFF; + transform-origin: 0 0; + transition: transform .3s ease-out; + } + + &__middle { + position: absolute; + top: 8px; + left: 0; + width: 20px; + height: 3px; + background: #FFF; + transition: all .3s ease-out; + transform-origin: 0 50%; + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 20px; + height: 3px; + background: #FFF; + transform-origin: 0 100%; + transition: transform .3s ease-out; + } + + @include atMedium { + display: none; + } + } + + &__menu-icon--close-x { + &::before { + transform: rotate(45deg) scaleX(1.25); + } + + .site-header__menu-icon__middle{ + transform: scaleX(0); + opacity: 0; + } + + &::after { + transform: rotate(-45deg) scaleX(1.25) translateY(1px); + + } + } + + + + &__menu-content{ opacity: 0; transform: scale(1.2); @@ -25,6 +97,12 @@ padding-top: 90px; text-align: center; + &--is-visible{ + transform: scale(1); + opacity: 1; + z-index: 1; + } + @include atMedium(){ opacity: 1; z-index: 1; @@ -35,17 +113,26 @@ &__logo{ position: absolute; - top: 3px; + top: 0px; + padding: 5px 15px; left: 50%; transform-origin: 50% 0%; transform: translateX(-50%) scale(.8); transition: transform .3s ease-out; + background-color: rgba(black, 0.5); + + &--orange-bg { + background-color: orange; + } @include atMedium(){ + padding: 0; + top: 3px; position: relative; float: left; left: auto; transform: translateX(0); + background-color: rgba(black, 0); } } diff --git a/app/index.html b/app/index.html index adeda9a..b7fdc9b 100644 --- a/app/index.html +++ b/app/index.html @@ -8,6 +8,10 @@ + + + + @@ -15,14 +19,20 @@
+ +
+
- Join us! + Place your Order
+ +