Style the new mega-menu option.
It still needs more testing though - e.g. to ensure we haven't broken the existing setup :P
This commit is contained in:
parent
2a567ba8c8
commit
4e3426644c
GPG Key ID:
1BE5172E637709C2
|
|
@ -426,7 +426,6 @@ class page_renderer
|
|||
}
|
||||
|
||||
$result = "<nav class='$class'>\n";
|
||||
if($mega_menu) $result .= "<span class='category'>";
|
||||
$is_first_category = true;
|
||||
// Loop over all the navigation links
|
||||
foreach($nav_links as $item) {
|
||||
|
|
@ -477,7 +476,6 @@ class page_renderer
|
|||
break;
|
||||
|
||||
case "category": // Renders a category header
|
||||
error_log("[category] " . substr($item, 9));
|
||||
if(!$is_first_category) $result .= "</span>";
|
||||
$result .= "<span class='category'><strong>" . substr($item, 9) . "</strong>";
|
||||
$is_first_category = false;
|
||||
|
|
|
|||
|
|
@ -70,40 +70,6 @@
|
|||
"menu"
|
||||
]},
|
||||
"nav_links_extra": { "type": "nav", "description": "An array of additional links in the above format that will be shown under \"More\" subsection.", "default": {
|
||||
"Page": [
|
||||
[
|
||||
"⌛ Page History",
|
||||
"?action=history&page={page}"
|
||||
],
|
||||
[
|
||||
"📤 Upload",
|
||||
"index.php?action=upload"
|
||||
]
|
||||
],
|
||||
"Navigation": [
|
||||
[
|
||||
"🎫 All Tags",
|
||||
"index.php?action=list-tags"
|
||||
],
|
||||
[
|
||||
"🎊 Random Page",
|
||||
"?action=random"
|
||||
],
|
||||
[
|
||||
"📅 Recent changes",
|
||||
"?action=recent-changes"
|
||||
]
|
||||
],
|
||||
"Wiki": [
|
||||
[
|
||||
"📊 Statistics",
|
||||
"?action=stats"
|
||||
],
|
||||
[
|
||||
"👥 All Users",
|
||||
"index.php?action=user-list"
|
||||
]
|
||||
],
|
||||
"Moderator": [
|
||||
[
|
||||
"◆ 🚫 Delete",
|
||||
|
|
@ -121,6 +87,40 @@
|
|||
"◆ 🔧 Edit master settings",
|
||||
"index.php?action=configure"
|
||||
]
|
||||
],
|
||||
"Wiki": [
|
||||
[
|
||||
"📊 Statistics",
|
||||
"?action=stats"
|
||||
],
|
||||
[
|
||||
"👥 All Users",
|
||||
"index.php?action=user-list"
|
||||
]
|
||||
],
|
||||
"Navigation": [
|
||||
[
|
||||
"🎫 All Tags",
|
||||
"index.php?action=list-tags"
|
||||
],
|
||||
[
|
||||
"🎊 Random Page",
|
||||
"?action=random"
|
||||
],
|
||||
[
|
||||
"📅 Recent changes",
|
||||
"?action=recent-changes"
|
||||
]
|
||||
],
|
||||
"Page": [
|
||||
[
|
||||
"⌛ Page History",
|
||||
"?action=history&page={page}"
|
||||
],
|
||||
[
|
||||
"📤 Upload",
|
||||
"index.php?action=upload"
|
||||
]
|
||||
]
|
||||
} },
|
||||
"nav_links_bottom": { "type": "nav", "description": "An array of links in the above format that will be shown at the bottom of the page.", "default": [
|
||||
|
|
|
|||
|
|
@ -58,16 +58,24 @@ nav { display: flex; background-color: var(--accent-a2); color: var(--accent-b1)
|
|||
nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem var(--shadow); }
|
||||
nav.bottom { position: absolute; left: 0; right: 0; box-shadow: inset 0 0.8rem 0.8rem -0.5rem var(--shadow); }
|
||||
|
||||
nav > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
|
||||
nav.mega-menu { display: flex; flex-direction: row; padding-bottom: 0.4em; border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
|
||||
nav.mega-menu .category { padding: 0.3em 1em; }
|
||||
nav.mega-menu strong { display: block; }
|
||||
nav.mega-menu span { display: block; }
|
||||
|
||||
nav > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; }
|
||||
nav:not(.mega-menu) > span { border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
|
||||
nav:not(.nav-more-menu) > span { text-align: center; }
|
||||
nav:not(.nav-more-menu) a { text-decoration: none; font-weight: bolder; color: inherit; }
|
||||
nav:not(.nav-more-menu) a { text-decoration: none; color: inherit; }
|
||||
nav:not(.nav-more-menu):not(.mega-menu) > span > a { font-weight: bolder; }
|
||||
.nav-divider { color: transparent; }
|
||||
|
||||
.nav-more { position: relative; background-color: var(--accent-a3); min-width: 10em; font-weight: bold; }
|
||||
.nav-more { position: relative; background-color: var(--accent-a3); min-width: 10em; }
|
||||
.nav-more > label { font-weight: bold; }
|
||||
label { cursor: pointer; }
|
||||
.nav-more-menu { display: none; z-index: 10000; position: absolute; flex-direction: column; top: 2.6rem; right: -0.2rem; text-align: left; background-color: var(--accent-a2); border-top: 3px solid var(--accent-a3); border-bottom: 3px solid var(--accent-a3); }
|
||||
input[type=checkbox]:checked ~ .nav-more-menu { display: block; box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }
|
||||
.nav-more-menu span { min-width: 10rem; }
|
||||
.nav-more-menu { z-index: 10000; position: absolute; flex-direction: column; top: 2.6rem; right: 100000px; text-align: left; background-color: var(--accent-a2); border-top: 3px solid var(--accent-a3); border-bottom: 3px solid var(--accent-a3); }
|
||||
input[type=checkbox]:checked ~ .nav-more-menu { right: -0.2rem; box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }
|
||||
.nav-more-menu span { white-space: nowrap; }
|
||||
|
||||
.inflexible { flex: none; }
|
||||
.off-screen { position: absolute; top: -1000px; left: -1000px;}
|
||||
|
|
|
|||
Loading…
Reference in New Issue