The main menu for Nox should handle overflow better now.
Added the menu_more phrase.
This commit is contained in:
Azareal
parent
a2f479be31
commit
167bb230b4
|
|
@ -334,6 +334,7 @@
|
|||
"menu_logout":"Logout",
|
||||
"menu_login":"Login",
|
||||
"menu_register":"Register",
|
||||
"menu_more":"More",
|
||||
|
||||
"alerts.forum_new_topic":"{0} created the topic {1}",
|
||||
"alerts.forum_unknown_action":"{0} did something in a forum",
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@
|
|||
</head>
|
||||
<body>
|
||||
{{if not .CurrentUser.IsSuperMod}}<style>.supermod_only { display: none !important; }</style>{{end}}
|
||||
<div class="container">
|
||||
<div id="container" class="container">
|
||||
{{/**<!--<div class="navrow">-->**/}}
|
||||
<div class="left_of_nav">{{dock "leftOfNav" .Header }}</div>
|
||||
<nav class="nav">
|
||||
<div class="move_left">
|
||||
<div class="move_right">
|
||||
<ul class="zone_{{.Header.Zone}}">{{/** TODO: Have the theme control whether the long or short form of the name is used **/}}
|
||||
<ul id="main_menu" class="zone_{{.Header.Zone}}">{{/** TODO: Have the theme control whether the long or short form of the name is used **/}}
|
||||
<li id="menu_overview" class="menu_left"><a href="/" rel="home">{{if eq .Header.Theme.Name "nox"}}{{.Header.Site.Name}}{{else}}{{.Header.Site.ShortName}}{{end}}</a></li>
|
||||
{{dock "topMenu" .Header }}
|
||||
<li class="menu_left menu_hamburger" title="{{lang "menu_hamburger_tooltip"}}"><a></a></li>
|
||||
|
|
|
|||
|
|
@ -96,6 +96,37 @@ li a {
|
|||
padding-top: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.menu_hamburger > a:after {
|
||||
content: "{{lang "menu_more" . }}";
|
||||
}
|
||||
.menu_hamburger, .more_menu, .menu_hide {
|
||||
display: none;
|
||||
}
|
||||
.more_menu {
|
||||
position: absolute;
|
||||
background-color: #444444;
|
||||
border: 1px solid #333333;
|
||||
flex-direction: column;
|
||||
list-style-type: none;
|
||||
padding: 16px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
top: 70px;
|
||||
}
|
||||
.more_menu_selected {
|
||||
display: flex !important;
|
||||
}
|
||||
.more_menu li a {
|
||||
font-size: 17px;
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
.more_menu li a:not(:last-child) {
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
.more_menu .menu_active a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.right_of_nav {
|
||||
float: left;
|
||||
|
|
@ -136,7 +167,7 @@ li a {
|
|||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.container {
|
||||
#container {
|
||||
clear: both;
|
||||
}
|
||||
#back {
|
||||
|
|
@ -1199,6 +1230,9 @@ input[type=checkbox]:checked + label .sel {
|
|||
}
|
||||
|
||||
@media(max-width: 460px) {
|
||||
ul {
|
||||
background: #3f3f3f;
|
||||
}
|
||||
.topic_list_title, .filter_opt_sep {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1281,6 +1315,9 @@ input[type=checkbox]:checked + label .sel {
|
|||
padding-bottom: 15px;
|
||||
border: none;
|
||||
}
|
||||
.more_menu {
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.right_of_nav {
|
||||
width: auto;
|
||||
|
|
@ -1319,7 +1356,7 @@ input[type=checkbox]:checked + label .sel {
|
|||
}
|
||||
|
||||
@media(min-width: 1010px) {
|
||||
.container {
|
||||
#container {
|
||||
background-color: {{$second_dark_bg}};
|
||||
}
|
||||
#back, .footer {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,34 @@
|
|||
"use strict";
|
||||
|
||||
function noxMenuBind() {
|
||||
$(".more_menu").remove();
|
||||
$("#main_menu li:not(.menu_hamburger").removeClass("menu_hide");
|
||||
|
||||
let mWidth = $("#main_menu").width();
|
||||
let iWidth = 0;
|
||||
let lastElem = null;
|
||||
$("#main_menu > li:not(.menu_hamburger)").each(function(){
|
||||
iWidth += $(this).outerWidth();
|
||||
if(iWidth > (mWidth - 100) && (mWidth - 100) > 0) {
|
||||
this.classList.add("menu_hide");
|
||||
if(lastElem!==null) lastElem.classList.add("menu_hide");
|
||||
}
|
||||
lastElem = this;
|
||||
});
|
||||
if(iWidth > (mWidth - 100) && (mWidth - 100) > 0) $(".menu_hamburger").show();
|
||||
else $(".menu_hamburger").hide();
|
||||
|
||||
let div = document.createElement('div');
|
||||
div.className = "more_menu";
|
||||
$("#main_menu > li:not(.menu_hamburger):not(#menu_overview)").each(function(){
|
||||
if(!this.classList.contains("menu_hide")) return;
|
||||
let cop = this.cloneNode(true);
|
||||
cop.classList.remove("menu_hide");
|
||||
div.appendChild(cop);
|
||||
});
|
||||
document.getElementsByClassName("menu_hamburger")[0].appendChild(div);
|
||||
}
|
||||
|
||||
(() => {
|
||||
addInitHook("after_update_alert_list", (alertCount) => {
|
||||
console.log("misc.js");
|
||||
|
|
@ -26,6 +55,9 @@
|
|||
document.getElementById("back").className += " alertActive"
|
||||
});
|
||||
|
||||
$(window).resize(() => noxMenuBind());
|
||||
noxMenuBind();
|
||||
|
||||
// Move the alerts above the first header
|
||||
let colSel = $(".colstack_right .colstack_head:first");
|
||||
let colSelAlt = $(".colstack_right .colstack_item:first");
|
||||
|
|
@ -34,5 +66,16 @@
|
|||
else if (colSelAlt.length > 0) $('.alert').insertBefore(colSelAlt);
|
||||
else if (colSelAltAlt.length > 0) $('.alert').insertBefore(colSelAltAlt);
|
||||
else $('.alert').insertAfter(".rowhead:first");
|
||||
|
||||
$(".menu_hamburger").click(function() {
|
||||
event.stopPropagation();
|
||||
console.log("hi")
|
||||
let mm = document.getElementsByClassName("more_menu")[0];
|
||||
mm.classList.add("more_menu_selected");
|
||||
let calc = $(this).offset().left - (mm.offsetWidth / 4);
|
||||
mm.style.left = calc+"px";
|
||||
});
|
||||
|
||||
$(document).click(() => $(".more_menu").removeClass("more_menu_selected"));
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in New Issue