Skip to content

Commit

Permalink
MENU: use a pure CSS menu, with a few tweaks
Browse files Browse the repository at this point in the history 
The current implementation requires quite a lot of javascript, has no
unified style (mobile vs desktop), and has subtle bugs. Use a pure CSS
menu fixing all this, that is already lighter than the CSS used for the
current implementation.
  • Loading branch information
@mascaldotfr
mascaldotfr committed Jan 13, 2024
1 parent 6ffe3f3 commit c55a289
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 104 deletions.
93 changes: 40 additions & 53 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ select, button, textarea {
background-color: var(--forms);
color: var(--foreground);
box-shadow: 0 .1em .3em rgba(0, 0, 0, .9);
border-radius: 3px;
border-radius: 5px;
border: 0px;
}
select, button {
Expand All @@ -75,25 +75,45 @@ select {
background-color: var(--menu_background);
min-height: 3em;
}
#menu-content {
header {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
justify-content: center;
align-items: center;
gap: var(--default_margin_padding);
line-height: 3em;
}
#menu a {
text-decoration: none;
border-radius: 5px;
#menu-click {
display: none;
}
#menu-links {
padding-left:0px;
margin: 0px;
}
#hamburger {
#menu-links > li {
list-style: none;
display: inline-block;
margin: .2em;
margin-bottom: .3em;
}
.menu-btn {
color: white;
display: none;
font-weight: bold;
width: 100%;
}
.menuitem {
white-space: nowrap;
.menuitem > a {
background: var(--tooltip_background);
text-decoration: none;
color: var(--foreground);
display: block;
padding: var(--default_margin_padding);
border-radius: 5px;
box-shadow: 0 .1em .3em rgba(0, 0, 0, .9);
}
.menuitem > a:hover {
background: var(--dialog_background);
color: var(--ahover);
box-shadow: 0 .1em .3em rgba(200, 200, 200, .9);
}
#lang {
font-size: 100%;
}
#footer {
margin-top: 2em;
Expand Down Expand Up @@ -354,6 +374,7 @@ h1 {


/* WZ EVENTS */

#we-container {
width: fit-content;
margin: 0 auto;
Expand Down Expand Up @@ -520,27 +541,17 @@ h1 {
#menu, #footer {
box-shadow: 0px 0px 2px 2px rgba(200, 200, 200, .4);
}
#hamburger a {
display: inline-block;
#menu-links {
width: 100%;
transition: all 0.3s ease;
}
#lang, .menuitem {
#menu-click:not(:checked) ~ header { display: none; }
#menu-click:checked ~ header { display: block; }
#menu-links > li {
display: block;
font-size: 120%;
margin-bottom: var(--default_margin_padding);
}
#menu-content span:nth-child(even) {
background: var(--card_background);
}
#menu-content span:nth-child(odd) {
background: var(--background);
}
#menu-content span {
padding-left: var(--default_margin_padding);
}
.menuitem a {
.menu-btn {
display: inline-block;
width: calc(100vw - 6 * var(--default_margin_padding));
}
/* WAR STATUS */
#wz-container {
Expand Down Expand Up @@ -572,12 +583,6 @@ h1 {
min-width: 80vw;
}
}
@media (min-width: 800px) and (max-width: 1600px) {
#menu {
/* CLS fix on multiline menu */
min-height: 6em;
}
}
@media (min-width: 800px) and (max-width: 1400px) {
#ws-7d > div {
min-height: 32em;
Expand All @@ -589,24 +594,6 @@ h1 {
}
}
@media (min-width: 800px) {
#menu a {
/* Make menu items appear as buttons */
padding: var(--default_margin_padding);
background-color: var(--tooltip_background);
color: var(--foreground);
box-shadow: 0 .1em .3em rgba(0, 0, 0, .9);
border-radius: 3px;
}
#menu select {
padding: var(--default_margin_padding);
font-size: 1em;
text-align: center;
}
#menu a:hover {
background: var(--card_background);
color: var(--ahover);
box-shadow: 0 .1em .3em rgba(140, 140, 140, .4);
}
#wz-map-map {
width: 500px
}
Expand Down
5 changes: 0 additions & 5 deletions data/i18n_db.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,6 @@ export const __i18n__ = {
"es": "☰ Menú",
"de": "☰ Menü"
},
"╳ Hide Menu": {
"fr": "╳ Cacher le Menu",
"es": "╳ Ocultar el Menú",
"de": "╳ Menü ausblenden"
},
"The page refreshes itself every minute. Dates and times are in your timezone.":
{
"fr": "La page est rafraîchie automatiquement toutes les minutes. Les dates et heures indiquées sont locales.",
Expand Down
65 changes: 19 additions & 46 deletions js/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,62 +6,39 @@ let __menu_external_link = `
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAvUlEQVQ4y7WTMQ4CIRBFH8bS0gPY2ngCLfYqkHCoTWavsjWXgFPYOjbLujFAWBN/Axnm/598ZgDuMUYtwXuvAN774ruIqFFVTSkxzzPfcM6dgCdwEZGU69baT1NWog9GRFZ3VdUD/TAi8rLWMk3TWuwW2JKdc2aXgIhoiQxw/JUcQiCE0A5xG1jVodbQQT4D16JAHpyWczYoZjCOowF0OZuo/kIPedcc/E3AxBgVKC5TC8MwrPdHbZ1bWIxvbxir8kTznLrSAAAAAElFTkSuQmCC" style="height: .90em">
`;
let __menu_content = `
<div id="hamburger">
<a href="#" id="menu-toggler">${_("☰ Menu")}</a>
</div>
<div id="menu-content">
<span class="menuitem"><b><a href="./">🏫${_("Trainer")}</a></b></span>
<span class="menuitem"><b><a href="wz.html">🪓${_("WZ status")}</a></b></span>
<span class="menuitem"><b><a href="bosses.html">👾${_("Bosses status")}</a></b></span>
<span class="menuitem"><b><a href="bz.html">🏟${_("BZ status")}</a></b></span>
<span class="menuitem"><b><a href="wevents.html">🗓️${_("WZ events")}</a></b></span>
<span class="menuitem"><b><a href="wstats.html">📊${_("WZ statistics")}</a></b></span>
<span class="menuitem"><a href="https://poludnica.shinyapps.io/configs/" target="_blank">📈${_("Trainer statistics")}
${__menu_external_link}</a></span>
<span class="menuitem"><a href="https://poludnica.shinyapps.io/rcalc/" target="_blank">🛡${_("Armor calculator")}
${__menu_external_link}</a></span>
<input type="checkbox" id="menu-click">
<label for="menu-click" class="menu-btn"><span class="bold">${_("☰ Menu")}</span></label>
<header>
<ul id="menu-links">
<li class="menuitem bold"><a href="./">🏫${_("Trainer")}</a></li>
<li class="menuitem bold"><a href="wz.html">🪓${_("WZ status")}</a></li>
<li class="menuitem bold"><a href="bosses.html">👾${_("Bosses status")}</a></li>
<li class="menuitem bold"><a href="bz.html">🏟${_("BZ status")}</a></li>
<li class="menuitem bold"><a href="wevents.html">🗓️${_("WZ events")}</a></li>
<li class="menuitem bold"><a href="wstats.html">📊${_("WZ statistics")}</a></li>
<li class="menuitem"><a href="https://poludnica.shinyapps.io/configs/" target="_blank">📈${_("Trainer statistics")}
${__menu_external_link}</a></li>
<li class="menuitem"><a href="https://poludnica.shinyapps.io/rcalc/" target="_blank">🛡${_("Armor calculator")}
${__menu_external_link}</a></li>
<li class="menuitem">
<select id="lang">
<option value="en">🇬🇧 English</option>
<option value="de">🇩🇪 Deutsch</option>
<option value="es">🇪🇸 Español</option>
<option value="fr">🇫🇷 Français</option>
</select>
</div>
</li>
</ul>
</header>
`;
let __menu_footer = `
<p><i>CoRT is a free and open source website, feel free to check out its
<a href="https://github.com/mascaldotfr/CoRT" target="_blank">source code</a>, and report
<a href="https://github.com/mascaldotfr/CoRT/wiki/Bug-reports" target="_blank">bugs</a>.
<!--VERSION-->Version: 20240113.121439
<!--VERSION-->Version: 20240113.150419
</i></p>
`;

let __menu_old_menu_width = 100000000;
let __menu_toggle_state = false;

function toggle_menu() {
__menu_toggle_state = !__menu_toggle_state;
let display = __menu_toggle_state ? "block" : "none";
let link_text = __menu_toggle_state ? _("╳ Hide Menu") : _("☰ Menu");
$("#menu-toggler").text(link_text);
$("#menu-content").css("display", display);
}

function menu_adapt() {
if (window.innerWidth >= 800) {
toggle_menu();
$("#hamburger").css("display", "none");
$("#menu-content").css("display", "flex");
}
else if (__menu_old_menu_width >= 800) {
// ^ Ensure we don't hide the menu if the mobile
// layout was already used
$("#hamburger").css("display", "block");
$("#menu-content").css("display", "none");
}
__menu_old_menu_width = window.innerWidth;
}

$(document).ready(function() {

$("#menu").html(__menu_content);
Expand All @@ -73,8 +50,4 @@ $(document).ready(function() {
localStorage.setItem("lang", $("#lang").val());
location.reload();
});
$("#menu-toggler").on("click", toggle_menu);
menu_adapt();
window.addEventListener("resize", menu_adapt);

});

0 comments on commit c55a289

Please sign in to comment.