diff --git a/public/assets/css/dropdown.css b/public/assets/css/dropdown.css new file mode 100644 index 0000000..edf782a --- /dev/null +++ b/public/assets/css/dropdown.css @@ -0,0 +1,93 @@ +.select-box { + display: flex; + width: 200px; + flex-direction: column; + position: relative; +} + +.select-box > * { + box-sizing: border-box; +} + +.select-box .options-container { + max-height: 0; + width: calc(100% - 12px); + opacity: 0; + transition: all 0.4s; + overflow: hidden; + border-radius: 5px; + background-color: var(--btn-secondary); + order: 1; + position: absolute; + top: 50px; +} + +.selected-locale { + margin-bottom: 8px; + position: relative; + width: 188px; + height: 45px; + border-radius: 5px; + display: flex; + align-items: center; + background-color: var(--btn-secondary); + color: white; + order: 0; +} + +.selected-locale::after { + content: url("/assets/icons/down-arrow.svg"); + position: absolute; + right: 15px; + top: 50%; + transition: transform 150ms; + transform: translateY(-50%); +} + +.select-box .option .item { + color: #afb5dd; +} + +.select-box .options-container.active { + max-height: 240px; + opacity: 1; + overflow-y: scroll; +} + +.select-box .options-container.active + .selected-locale::after { + transform: translateY(-50%) rotateX(180deg); +} + +.select-box .options-container::-webkit-scrollbar { + width: 8px; + background: #0d141f; + background: #81878f; + background: #f1f2f3; + border-radius: 0 5px 5px 0; +} + +.select-box .options-container::-webkit-scrollbar-thumb { + background: #525861; + background: #81878f; + border-radius: 0 5px 5px 0; +} +.select-box .option, +.selected-locale { + padding: 12px 15px; + cursor: pointer; +} + +.select-box .option:hover { + background: #2f345b; +} +.select-box .option:hover .item { + color: white; +} + +.select-box label { + cursor: pointer; +} + +.select-box .option .radio { + display: none; +} diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 347bd49..2f0eb88 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -4,6 +4,7 @@ --text: white; --text-secondary: #A1A8D9; --btn: #673DB6; + --btn-secondary: #333960; --theme: var(--btn); --text-secondary-2: #8990C1; } @@ -82,6 +83,7 @@ header nav a { .locale-dropdown { margin-left: auto; + z-index: 2; } /* Misc */ @@ -117,7 +119,7 @@ header nav a { left: 50%; transform: translate(-50%, -50%); margin-left: -40px; - z-index: 3; + z-index: 1; } .light-purple-circle .deco { position: absolute; @@ -127,6 +129,15 @@ header nav a { z-index: -2; } +/* Twemoji */ + +img.emoji { + height: 1em; + width: 1em; + margin: 0 .05em 0 .1em; + vertical-align: -0.1em; + } + /* Title business */ .sect .title[id] { padding-top: 100px; @@ -220,7 +231,7 @@ header nav a { background: var(--btn); } .button.secondary { - background: #333960; + background: var(--btn-secondary); } .button.secondary.discord svg { margin-bottom: -1px; diff --git a/public/assets/icons/down-arrow.svg b/public/assets/icons/down-arrow.svg new file mode 100644 index 0000000..619f62a --- /dev/null +++ b/public/assets/icons/down-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/js/locale-dropdown-handler.js b/public/assets/js/locale-dropdown-handler.js index 6ed72cb..7e8dc6d 100644 --- a/public/assets/js/locale-dropdown-handler.js +++ b/public/assets/js/locale-dropdown-handler.js @@ -1,11 +1,56 @@ function setDefaultDropdownLocale(localeString) { - try { - document.querySelector(`option[value=${localeString}`).selected = true; - } catch {} // If the locale isn't listed + const selected = document.querySelector(".selected-locale"); + selected.innerHTML = document.querySelector(`label[for=${localeString}`).innerHTML } -function localeDropdownHandler() { - const selectedLocale = document.querySelector("#locale-dropdown").value; - document.cookie = `preferredLocale=${selectedLocale};max-age=31536000`; - window.location.reload(); +function localeDropdownHandler(selectedLocale) { + document.cookie = `preferredLocale=${selectedLocale};max-age=31536000`; + window.location.reload(); } + +const dropdowns = document.querySelectorAll("*[data-dropdown]"); +const dropdownOptions = document.querySelectorAll( + "*[data-dropdown] .options-container" +); + +dropdowns.forEach((el) => { + const selected = el.querySelector(".selected-locale"); + const optionsContainer = el.querySelector(".options-container"); + const optionsList = el.querySelectorAll(".option"); + + // click dropdown element will open dropdown + selected.addEventListener("click", () => { + optionsContainer.classList.toggle("active"); + }); + + // clicking on any option will close dropdown and change value + optionsList.forEach((option) => { + option.addEventListener("click", () => { + selected.innerHTML = option.querySelector("label").innerHTML; + optionsContainer.classList.remove("active"); + const selectedLocale = option.querySelector("label").getAttribute("for"); + localeDropdownHandler(selectedLocale); + }); + }); +}); + +// close all dropdowns on scroll +document.addEventListener("scroll", () => { + dropdownOptions.forEach((el) => el.classList.remove("active")); +}); + +// click outside of dropdown will close all dropdowns +document.addEventListener("click", (e) => { + const targetElement = e.target; + + // check if target is from a dropdown + let found = false; + dropdowns.forEach((v) => { + if (v == targetElement || v.contains(targetElement)) found = true; + }); + + if (found) return; + + // click outside of dropdowns + dropdownOptions.forEach((el) => el.classList.remove("active")); +}); diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index e49b00e..eb50001 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -28,11 +28,20 @@ Pretendo + + + + +
diff --git a/views/partials/header.handlebars b/views/partials/header.handlebars index 0731b40..fbfbd4d 100644 --- a/views/partials/header.handlebars +++ b/views/partials/header.handlebars @@ -31,10 +31,38 @@ {{ locale.nav.progress }} - +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+
+
English
+
+
\ No newline at end of file