From 7cf28470af82358c311aa6942ccd458ed87500fe Mon Sep 17 00:00:00 2001 From: Immanuel Onyeka Date: Tue, 20 Apr 2021 16:41:47 -0400 Subject: [PATCH] Add login hamburger menu --- public/main.js | 13 +++- resources/build.sh | 5 +- resources/js/main.js | 19 +++-- resources/scss/_vars.scss | 28 ++++++++ resources/scss/main.scss | 116 ++++++++++++++++++++++++++++++- resources/views/home.blade.php | 29 +++++++- resources/views/master.blade.php | 2 +- 7 files changed, 195 insertions(+), 17 deletions(-) diff --git a/public/main.js b/public/main.js index af5dac2..846dbf1 100644 --- a/public/main.js +++ b/public/main.js @@ -1,8 +1,17 @@ -var cols = document.querySelectorAll(".collapsible button"); +var toggle = document.querySelector(".nav-toggle"); +var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p"); +toggle.addEventListener("click", function() { + heroText.forEach((item) => { + item.classList.toggle("hidden"); + }); + document.querySelector("nav form.login").classList.toggle("active"); + this.classList.toggle("toggled"); +}); +var cols = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < cols.length; i++) { cols[i].addEventListener("click", function() { - this.parentElement.classList.toggle("active"); + this.classList.toggle("active"); }); } //# sourceMappingURL=main.js.map diff --git a/resources/build.sh b/resources/build.sh index 4967209..0e7e724 100755 --- a/resources/build.sh +++ b/resources/build.sh @@ -1,6 +1,6 @@ #!/bin/sh -project=$HOME/projects/trendplays +export project=$HOME/projects/trendplays watch() { npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources/views $project/resources/scss & @@ -9,8 +9,7 @@ watch() { $project/public/main.css & pid="$pid $!" trap "kill -TERM $pid" 0 1 2 15 - find $project/resources/js -type f | - entr 'esbuild resources/js/main.js --sourcemap --outdir=public' & + find $project/resources/js -type f | entr -n esbuild --sourcemap --outdir=$project/public $project/resources/js/main.js & pid="$pid $!" trap "kill -TERM $pid" 0 1 2 15 wait diff --git a/resources/js/main.js b/resources/js/main.js index 4c695a6..f9fde8b 100644 --- a/resources/js/main.js +++ b/resources/js/main.js @@ -1,15 +1,22 @@ +var toggle = document.querySelector(".nav-toggle") +var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p") + +toggle.addEventListener("click", function() { + heroText.forEach(item => { + item.classList.toggle("hidden") + }) + document.querySelector("nav form.login").classList.toggle("active") + this.classList.toggle("toggled") + // this.src = "/images/close.svg" +}) + +//FAQ code var cols = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < cols.length; i++) { cols[i].addEventListener("click", function() { this.classList.toggle("active"); - // var content = this.nextElementSibling; - // if (content.style.display === "block") { - // content.style.display = "none"; - // } else { - // content.style.display = "block"; - // } }); } diff --git a/resources/scss/_vars.scss b/resources/scss/_vars.scss index 8a1dd07..2d6b676 100644 --- a/resources/scss/_vars.scss +++ b/resources/scss/_vars.scss @@ -49,6 +49,9 @@ $theme-colors: ( background-color: darkenColor($col); } } + +// A linear gradient with the light color at the top left and dark color at +// bottom right, that darkens on hover @mixin special-button($start, $end) { font-family: "PatuaOne"; border: none; @@ -62,6 +65,7 @@ $theme-colors: ( } } +// A white button with a transparent background that becomes white and orange on hover @mixin transparent-button { text-align: center; font-size: 20px; @@ -76,6 +80,7 @@ $theme-colors: ( } } +// A button with a white background and specified accent color that reverses on hover @mixin brand-button($col) { width: 10em; height: 2.5em;; @@ -97,3 +102,26 @@ $theme-colors: ( box-shadow: 7px 10px 8px rgb(156 166 175 / 22%); transition: transform 0.2s; } + +@mixin hovering2 { + padding: 18px 9px; + border-radius: 4px; + background: white; + box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; + transition: transform 0.2s; +} + +@mixin hovering3 { + padding: 18px 9px; + border-radius: 4px; + background: white; + box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; + transition: transform 0.2s; +} +@mixin hovering-light { + padding: 18px 9px; + border-radius: 4px; + background: white; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; + transition: transform 0.2s; +} diff --git a/resources/scss/main.scss b/resources/scss/main.scss index 3aab298..6a5b1aa 100644 --- a/resources/scss/main.scss +++ b/resources/scss/main.scss @@ -85,11 +85,13 @@ nav h1 { nav #logo { margin-right: 50px; + z-index: 2; } nav form { display: flex; flex-wrap: wrap; + margin-right: 20px; } nav form div { @@ -104,12 +106,36 @@ nav form input,label { opacity: 0.7; } +nav .nav-toggle { + position: absolute; + right: 10px; + top: 5px; + display: none; + height: 40px; + width: 40px; + margin-left: auto; + background: url("/images/hamburger-menu.svg"); + background-size: 100%; + background-size: cover; +} + +nav .nav-toggle.toggled { + background: url("/images/close.svg"); + width: 25px; + height: 25px; + background-size: 100%; + background-size: cover; + top: 10px; + right: 15px; +} + div.landing-hero { top: 0; height: 50em; background-color: #ff4e00; // background-image: linear-gradient(to right bottom, #ff4e00, #fc6200, #f87200, #f58100, #f18e00, #f19507, #f09c0f, #f0a317, #f3a620, #f6a927, #f8ad2e, #fbb034); background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%); + z-index: 0; } div.hero-filter { @@ -159,6 +185,10 @@ form.login { color: white; } +.cancel-icon { + width: 30px; +} + form.login input { margin-left: 2px; color: white; @@ -356,6 +386,7 @@ section.benefits-info div { section.faq-info { margin-bottom: 6em; margin-top: 3em; + height: 30em; } .faq-info h2 { @@ -432,29 +463,108 @@ footer a { } } +.hidden { + display: none; +} + +div.toggle-area { + display: none; + overflow: hidden; + height: 0px; + width: 100%; + z-index: 1; + @include vars.hovering3; + // background-color: vars.getColor("light-grey"); + margin-bottom: 2em; + position: absolute; + border-radius: 0; + padding: 0; +} + + +// Make small screens more usable @media (max-width: 720px) { nav { display: block; } nav form { - display: block; + // display: none; width: 190px; margin-left: auto; margin-right: auto; align-items: center; + margin-top: 5em; + opacity: 0; + transition: transform 0.3s; + transform: translateY(-50px); + } + + nav form.active { + display: block; + transform: translateX(0%); + opacity: 1; + // background: white; + // color: black; } + nav form div { margin: 10px auto; } + nav div label,input { display: block; } + nav .nav-toggle { + display: block; + } + + div.toggle-area.active { + display: initial; + } + + div.toggle-area h1 { + font-size: 1.5rem; + display: inline-block; + color: vars.getColor("brand-orange"); + } + + div.toggle-area h3 { + text-align: center; + } + + div.toggle-area .login { + color: vars.getColor("brand-orange"); + display: block; + margin-left: auto; + margin-right: auto; + // margin-top: 1em; + width: 10em; + // top: 40px; + // position: absolute; + } + + div.toggle-area .login input { + border: 2px solid black; + border-color: vars.getColor("brand-orange"); + color: black; + } + + div.toggle-area button { + margin-top: 1em; + width: 6em; + } + + div.toggle-area div { + margin-top: 10px; + margin-bottom: 5px; + } + .landing-hero div.hero-filter h2 { - top: 30%; + top: 15%; } .landing-hero div.hero-filter p { - top: 45%; + top: 30%; } .landing-hero div.hero-filter .register-btn { diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 31a313f..3294264 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -9,6 +9,26 @@ @section('content') @parent +
+
+ +

Login

+

The web's #1 content promoter

@@ -78,11 +98,15 @@

- Dolor sint maiores soluta culpa voluptatem ea Similique facere perspiciatis in quos suscipit. Atque velit dolor repudiandae nesciunt ullam Blanditiis asperiores eius quos aliquid ex Rem rem quo facilis commodi. + Dolor sint maiores soluta culpa voluptatem ea Similique facere perspiciatis + in quos suscipit. Atque velit dolor repudiandae nesciunt ullam Blanditiis + asperiores eius quos aliquid ex Rem rem quo facilis commodi.

- Elit aliquam velit ad incidunt in porro laborum? Unde eligendi dolores ad iure quia doloremque! Aliquid pariatur autem sed iure ipsam? Et ipsam architecto dolorum sapiente facilis quos Aut quasi

+ Elit aliquam velit ad incidunt in porro laborum? Unde eligendi dolores ad + iure quia doloremque! Aliquid pariatur autem sed iure ipsam? Et ipsam + architecto dolorum sapiente facilis quos Aut quasi

Ipsum incidunt non illum mollitia omnis! Minima possimus eveniet autem non @@ -162,6 +186,7 @@

+
@endsection @section('scripts') diff --git a/resources/views/master.blade.php b/resources/views/master.blade.php index 4b41916..cb2ac70 100644 --- a/resources/views/master.blade.php +++ b/resources/views/master.blade.php @@ -29,8 +29,8 @@ spellcheck='false'> - +
@endguest