a
/
gosora
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

The main menu for Nox should handle overflow better now. 

Added the menu_more phrase.
This commit is contained in:
Azareal 2019-04-02 10:59:29 +10:00
parent a2f479be31
commit 167bb230b4
4 changed files with 85 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
langs/english.json
View File

@ -334,6 +334,7 @@
"menu_logout":"Logout", "menu_logout":"Logout",
"menu_login":"Login", "menu_login":"Login",
"menu_register":"Register", "menu_register":"Register",
"menu_more":"More",
"alerts.forum_new_topic":"{0} created the topic {1}", "alerts.forum_new_topic":"{0} created the topic {1}",
"alerts.forum_unknown_action":"{0} did something in a forum", "alerts.forum_unknown_action":"{0} did something in a forum",

4
templates/header.html
View File

@ -26,13 +26,13 @@
</head> </head>
<body> <body>
{{if not .CurrentUser.IsSuperMod}}<style>.supermod_only { display: none !important; }</style>{{end}} {{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="navrow">-->**/}}
<div class="left_of_nav">{{dock "leftOfNav" .Header }}</div> <div class="left_of_nav">{{dock "leftOfNav" .Header }}</div>
<nav class="nav"> <nav class="nav">
<div class="move_left"> <div class="move_left">
<div class="move_right"> <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> <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 }} {{dock "topMenu" .Header }}
<li class="menu_left menu_hamburger" title="{{lang "menu_hamburger_tooltip"}}"><a></a></li> <li class="menu_left menu_hamburger" title="{{lang "menu_hamburger_tooltip"}}"><a></a></li>

41
themes/nox/public/main.css
View File

@ -96,6 +96,37 @@ li a {
padding-top: 5px; padding-top: 5px;
font-size: 16px; 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 { .right_of_nav {
float: left; float: left;
@ -136,7 +167,7 @@ li a {
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
} }
.container { #container {
clear: both; clear: both;
} }
#back { #back {
@ -1199,6 +1230,9 @@ input[type=checkbox]:checked + label .sel {
} }
@media(max-width: 460px) { @media(max-width: 460px) {
ul {
background: #3f3f3f;
}
.topic_list_title, .filter_opt_sep { .topic_list_title, .filter_opt_sep {
display: none; display: none;
} }
@ -1281,6 +1315,9 @@ input[type=checkbox]:checked + label .sel {
padding-bottom: 15px; padding-bottom: 15px;
border: none; border: none;
} }
.more_menu {
top: 50px;
}
.right_of_nav { .right_of_nav {
width: auto; width: auto;
@ -1319,7 +1356,7 @@ input[type=checkbox]:checked + label .sel {
} }
@media(min-width: 1010px) { @media(min-width: 1010px) {
.container { #container {
background-color: {{$second_dark_bg}}; background-color: {{$second_dark_bg}};
} }
#back, .footer { #back, .footer {

43
themes/nox/public/misc.js
View File

@ -1,5 +1,34 @@
"use strict"; "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) => { addInitHook("after_update_alert_list", (alertCount) => {
console.log("misc.js"); console.log("misc.js");
@ -26,6 +55,9 @@
document.getElementById("back").className += " alertActive" document.getElementById("back").className += " alertActive"
}); });
$(window).resize(() => noxMenuBind());
noxMenuBind();
// Move the alerts above the first header // Move the alerts above the first header
let colSel = $(".colstack_right .colstack_head:first"); let colSel = $(".colstack_right .colstack_head:first");
let colSelAlt = $(".colstack_right .colstack_item:first"); let colSelAlt = $(".colstack_right .colstack_item:first");
@ -34,5 +66,16 @@
else if (colSelAlt.length > 0) $('.alert').insertBefore(colSelAlt); else if (colSelAlt.length > 0) $('.alert').insertBefore(colSelAlt);
else if (colSelAltAlt.length > 0) $('.alert').insertBefore(colSelAltAlt); else if (colSelAltAlt.length > 0) $('.alert').insertBefore(colSelAltAlt);
else $('.alert').insertAfter(".rowhead:first"); 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"));
}); });
})(); })();