mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-03-21 17:24:28 -05:00
Added dropdown menu by @mrjvs
Co-Authored-By: mrjvs <mistrjvs@gmail.com>
This commit is contained in:
montylion
parent
c3951a47b8
commit
d0dd10519b
93
public/assets/css/dropdown.css
Normal file
93
public/assets/css/dropdown.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
1
public/assets/icons/down-arrow.svg
Normal file
1
public/assets/icons/down-arrow.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
|
After Width: | Height: | Size: 261 B |
|
|
@ -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"));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -28,11 +28,20 @@
|
|||
<link rel="shortcut icon" href="/assets/icons/favicon.ico"><title>Pretendo</title>
|
||||
<!-- css files -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/dropdown.css" />
|
||||
<!-- favicon -->
|
||||
<link rel="shortcut icon" href="/assets/icons/favicon.ico">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Twemoji setup -->
|
||||
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
twemoji.parse(document.body, {folder: 'svg', ext: '.svg'});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-body">
|
||||
|
|
|
|||
|
|
@ -31,10 +31,38 @@
|
|||
<a href="/progress" class="keep-on-mobile">{{ locale.nav.progress }}</a>
|
||||
</nav>
|
||||
|
||||
<select id="locale-dropdown" name="locale-dropdown" class="locale-dropdown" onchange="localeDropdownHandler()">
|
||||
<option value="en-US">🇺🇸 English</option>
|
||||
<option value="it-IT">🇮🇹 Italiano</option>
|
||||
<option value="ru-RU">🇷🇺 Pусский</option>
|
||||
</select>
|
||||
<div class="select-box locale-dropdown" data-dropdown>
|
||||
<div class="options-container">
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="en-US" name="category" />
|
||||
<label for="en-US">
|
||||
<div class="item">🇺🇸 English</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="es-ES" name="category" />
|
||||
<label for="es-ES">
|
||||
<div class="item">🇪🇸 Español</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="it-IT" name="category" />
|
||||
<label for="it-IT">
|
||||
<div class="item">🇮🇹 Italiano</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input type="radio" class="radio" id="ru-RU" name="category" />
|
||||
<label for="ru-RU">
|
||||
<div class="item">🇷🇺 Pусский</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selected-locale">
|
||||
<div class="item">English</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
Loading…
Reference in New Issue
Block a user