1
0
Fork 0
mirror of https://github.com/sbrl/Pepperminty-Wiki.git synced 2024-11-25 05:22:59 +00:00

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:
Starbeamrainbowlabs 2019-08-30 00:41:25 +01:00
parent 2a567ba8c8
commit 4e3426644c
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
3 changed files with 48 additions and 42 deletions

View file

@ -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;

View file

@ -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": [
[
"&#x231b; Page History",
"?action=history&page={page}"
],
[
"&#x1f4e4; Upload",
"index.php?action=upload"
]
],
"Navigation": [
[
"&#x1f3ab; All&nbsp;Tags",
"index.php?action=list-tags"
],
[
"&#x1f38a; Random Page",
"?action=random"
],
[
"&#x1f4c5; Recent changes",
"?action=recent-changes"
]
],
"Wiki": [
[
"&#x1f4ca; Statistics",
"?action=stats"
],
[
"&#x1f465; All Users",
"index.php?action=user-list"
]
],
"Moderator": [
[
"&#9670; &#x1f6ab; Delete",
@ -121,6 +87,40 @@
"&#9670; &#x1f527; Edit master settings",
"index.php?action=configure"
]
],
"Wiki": [
[
"&#x1f4ca; Statistics",
"?action=stats"
],
[
"&#x1f465; All Users",
"index.php?action=user-list"
]
],
"Navigation": [
[
"&#x1f3ab; All&nbsp;Tags",
"index.php?action=list-tags"
],
[
"&#x1f38a; Random Page",
"?action=random"
],
[
"&#x1f4c5; Recent changes",
"?action=recent-changes"
]
],
"Page": [
[
"&#x231b; Page History",
"?action=history&page={page}"
],
[
"&#x1f4e4; 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": [

View file

@ -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;}