Add mobile navigation menu (#1671)
* If navbar is too wide, use overflow-x: scroll * Add initial mobile nav menu * Use CSS classes instead of IDs for jQuery events * Change content x-axis padding for mobile devices * Recompile assets for mobile menu feature
This commit is contained in:
benjamin wil
GitHub
+1
-1
@@ -1 +1 @@
|
||||
{"files":{"app-55cca79a0c2c660a2966084978066294cc72d75899ab2dcf50f4844037f9b95f.js":{"logical_path":"app.js","mtime":"2021-02-13T12:57:07-08:00","size":135925,"digest":"55cca79a0c2c660a2966084978066294cc72d75899ab2dcf50f4844037f9b95f","integrity":"sha256-VcynmgwsZgopZghJeAZilMxy11iZqy3PUPSEQDf5uV8="},"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js":{"logical_path":"editor.js","mtime":"2021-01-18T18:48:15-08:00","size":744866,"digest":"db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf","integrity":"sha256-2xDINRMG6S8ZJroiXQzZyOiGSCs7mCCoWCXsOrq18c8="},"app-fedb9b9adb06e4a4b812fee73ca1b9fe81b426ef0c3ba7d8dda728f371c21158.css":{"logical_path":"app.css","mtime":"2021-02-13T12:57:07-08:00","size":395479,"digest":"fedb9b9adb06e4a4b812fee73ca1b9fe81b426ef0c3ba7d8dda728f371c21158","integrity":"sha256-/tubmtsG5KS4Ev7nPKG5/oG0Ju8MO6fY3aco83HCEVg="},"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css":{"logical_path":"criticmarkup.css","mtime":"2021-01-18T18:48:15-08:00","size":646,"digest":"31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4","integrity":"sha256-Ma5dMoK7uOe3w8mRfp+2jjMVprSnXabOxI0huIRpBcQ="},"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css":{"logical_path":"print.css","mtime":"2021-01-18T18:48:15-08:00","size":75,"digest":"512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb","integrity":"sha256-USSYw2i+DT+xuhBd+oQomuSDgOyfy++Ui9TiOwsJW/s="}},"assets":{"app.js":"app-55cca79a0c2c660a2966084978066294cc72d75899ab2dcf50f4844037f9b95f.js","editor.js":"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js","app.css":"app-fedb9b9adb06e4a4b812fee73ca1b9fe81b426ef0c3ba7d8dda728f371c21158.css","criticmarkup.css":"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css","print.css":"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css"}}
|
||||
{"files":{"app-7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2.js":{"logical_path":"app.js","mtime":"2021-02-13T18:12:53-08:00","size":135925,"digest":"7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2","integrity":"sha256-ekvRFfS8fs45vIBzyg/618XlXMWDexRkoS3q1JBc77I="},"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js":{"logical_path":"editor.js","mtime":"2021-01-18T18:48:15-08:00","size":744866,"digest":"db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf","integrity":"sha256-2xDINRMG6S8ZJroiXQzZyOiGSCs7mCCoWCXsOrq18c8="},"app-851d6efb6337eb889ca3ab910b8b825110dcd80fe2538d74c6a3a5d400113a34.css":{"logical_path":"app.css","mtime":"2021-02-13T18:01:20-08:00","size":395600,"digest":"851d6efb6337eb889ca3ab910b8b825110dcd80fe2538d74c6a3a5d400113a34","integrity":"sha256-hR1u+2M364ico6uRC4uCURDc2A/iU410xqOl1AAROjQ="},"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css":{"logical_path":"criticmarkup.css","mtime":"2021-01-18T18:48:15-08:00","size":646,"digest":"31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4","integrity":"sha256-Ma5dMoK7uOe3w8mRfp+2jjMVprSnXabOxI0huIRpBcQ="},"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css":{"logical_path":"print.css","mtime":"2021-01-18T18:48:15-08:00","size":75,"digest":"512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb","integrity":"sha256-USSYw2i+DT+xuhBd+oQomuSDgOyfy++Ui9TiOwsJW/s="}},"assets":{"app.js":"app-7a4bd115f4bc7ece39bc8073ca0ffad7c5e55cc5837b1464a12dead4905cefb2.js","editor.js":"editor-db10c8351306e92f1926ba225d0cd9c8e886482b3b9820a85825ec3abab5f1cf.js","app.css":"app-851d6efb6337eb889ca3ab910b8b825110dcd80fe2538d74c6a3a5d400113a34.css","criticmarkup.css":"criticmarkup-31ae5d3282bbb8e7b7c3c9917e9fb68e3315a6b4a75da6cec48d21b8846905c4.css","print.css":"print-512498c368be0d3fb1ba105dfa84289ae48380ec9fcbef948bd4e23b0b095bfb.css"}}
|
||||
+1
-1
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
+1
-1
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
@@ -156,12 +156,12 @@ $(document).ready(function() {
|
||||
}
|
||||
|
||||
|
||||
if ($('#minibutton-upload-page').length) {
|
||||
if ($('.minibutton-upload-page').length) {
|
||||
new ClipboardJS('#ClipboardJSlink');
|
||||
$('#minibutton-upload-page').parent().removeClass('jaws');
|
||||
$('#minibutton-upload-page').click(function(e) {
|
||||
$('.minibutton-upload-page').parent().removeClass('jaws');
|
||||
$('.minibutton-upload-page').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
$.GollumDialog.init({
|
||||
title: 'Upload File',
|
||||
fields: [
|
||||
@@ -213,9 +213,9 @@ $(document).ready(function() {
|
||||
});
|
||||
}
|
||||
|
||||
if ($('#minibutton-rename-page').length) {
|
||||
$('#minibutton-rename-page').parent().removeClass('jaws');
|
||||
$('#minibutton-rename-page').click(function(e) {
|
||||
if ($('.minibutton-rename-page').length) {
|
||||
$('.minibutton-rename-page').parent().removeClass('jaws');
|
||||
$('.minibutton-rename-page').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var path = decodeURI(pagePath());
|
||||
@@ -257,9 +257,9 @@ $(document).ready(function() {
|
||||
});
|
||||
}
|
||||
|
||||
if ($('#minibutton-new-page').length) {
|
||||
$('#minibutton-new-page').parent().removeClass('jaws');
|
||||
$('#minibutton-new-page').click(function(e) {
|
||||
if ($('.minibutton-new-page').length) {
|
||||
$('.minibutton-new-page').parent().removeClass('jaws');
|
||||
$('.minibutton-new-page').click(function(e) {
|
||||
e.preventDefault();
|
||||
var path = pagePath();
|
||||
if( path === undefined && $('#file-browser').length != 0 ){
|
||||
|
||||
@@ -643,15 +643,24 @@ a {
|
||||
.s, .sc {
|
||||
color: #A31515;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.pagination a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
nav.actions {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
::webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
.search-context li:nth-child(n+4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
<details class="details-reset details-overlay">
|
||||
<summary class="btn btn-invisible" aria-haspopup="true">
|
||||
<span aria-label="Open menu">☰</span>
|
||||
</summary>
|
||||
|
||||
<div class="SelectMenu mx-sm-2">
|
||||
<div class="SelectMenu-modal">
|
||||
<div class="SelectMenu-divider py-3">
|
||||
<h2 class="h6">Current Page</h2>
|
||||
<div>{{page_header}}</div>
|
||||
</div>
|
||||
|
||||
{{#history}}
|
||||
<a
|
||||
class="SelectMenu-item"
|
||||
href="{{history_path}}/{{escaped_url_path}}"
|
||||
role="menuitem"
|
||||
>
|
||||
<span>History</span>
|
||||
</a>
|
||||
{{/history}}
|
||||
|
||||
{{#allow_editing}}
|
||||
{{#allow_uploads}}
|
||||
<a class="SelectMenu-item minibutton-upload-page" role="menuitem">
|
||||
<span>Upload</span>
|
||||
</a>
|
||||
{{/allow_uploads}}
|
||||
|
||||
{{#editable}}
|
||||
<a class="SelectMenu-item minibutton-rename-page" role="menuitem">
|
||||
<span>Rename</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="SelectMenu-item minibutton-edit-page"
|
||||
href="{{edit_path}}/{{escaped_url_path}}"
|
||||
role="menuitem"
|
||||
>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
{{/editable}}
|
||||
{{/allow_editing}}
|
||||
|
||||
<div class="SelectMenu-divider py-3">
|
||||
<h2 class="h6">Main Menu</h2>
|
||||
</div>
|
||||
|
||||
<div class="SelectMenu-list">
|
||||
<a class="SelectMenu-item" role="menuitem" href="{{page_route}}">
|
||||
Home
|
||||
</a>
|
||||
|
||||
{{#overview}}
|
||||
<a class="SelectMenu-item" role="menuitem" href="{{overview_path}}">
|
||||
Overview
|
||||
</a>
|
||||
{{/overview}}
|
||||
|
||||
{{#latest_changes}}
|
||||
<a
|
||||
class="SelectMenu-item"
|
||||
href="{{latest_changes_path}}"
|
||||
role="menuitem"
|
||||
>
|
||||
Latest Changes
|
||||
</a>
|
||||
{{/latest_changes}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@@ -1,43 +1,105 @@
|
||||
<nav class="actions pt-4">
|
||||
|
||||
<div class="TableObject">
|
||||
<div class="TableObject-item">
|
||||
<a class="btn" id="minibutton-home" href="{{page_route}}">Home</a>
|
||||
</div>
|
||||
<nav class="actions pt-4 px-2 px-lg-0 overflow-x-scroll">
|
||||
<div class="TableObject">
|
||||
<div class="TableObject-item hide-lg hide-xl">
|
||||
{{>mobilenav}}
|
||||
</div>
|
||||
|
||||
<div class="TableObject-item hide-sm hide-md">
|
||||
<a class="btn btn-sm" id="minibutton-home" href="{{page_route}}">
|
||||
Home
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="TableObject-item TableObject-item--primary px-2"
|
||||
{{^search}}style="visibility:hidden"{{/search}}
|
||||
>
|
||||
{{>searchbar}}
|
||||
</div>
|
||||
|
||||
<div class="TableObject-item hide-sm hide-md">
|
||||
<div class="BtnGroup" style="display: flex;">
|
||||
{{#overview}}
|
||||
<a
|
||||
class="btn BtnGroup-item btn-sm"
|
||||
href="{{overview_path}}"
|
||||
id="minibutton-overview"
|
||||
>
|
||||
Overview
|
||||
</a>
|
||||
{{/overview}}
|
||||
|
||||
{{#latest_changes}}
|
||||
<a
|
||||
class="btn BtnGroup-item btn-sm"
|
||||
href="{{latest_changes_path}}"
|
||||
id="minibutton-latest-changes"
|
||||
>
|
||||
Latest Changes
|
||||
</a>
|
||||
{{/latest_changes}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#history}}
|
||||
<div class="TableObject-item pl-2 hide-sm hide-md">
|
||||
<a
|
||||
class="btn btn-sm"
|
||||
href="{{history_path}}/{{escaped_url_path}}"
|
||||
id="minibutton-history"
|
||||
>
|
||||
Page History
|
||||
</a>
|
||||
</div>
|
||||
{{/history}}
|
||||
|
||||
<div class="TableObject-item TableObject-item--primary px-2" {{^search}}style="visibility:hidden"{{/search}}>
|
||||
{{>searchbar}}
|
||||
</div>
|
||||
|
||||
<div class="TableObject-item">
|
||||
{{#overview}}<a class="btn" id="minibutton-overview" href="{{overview_path}}">Overview</a>{{/overview}}
|
||||
{{#latest_changes}}<a class="btn" id="minibutton-latest-changes" href="{{latest_changes_path}}">Latest Changes</a>{{/latest_changes}}
|
||||
</div>
|
||||
|
||||
{{#history}}
|
||||
<div class="TableObject-item pl-1">
|
||||
<a class="btn" id="minibutton-history" href="{{history_path}}/{{escaped_url_path}}">Page History</a>
|
||||
</div>
|
||||
{{/history}}
|
||||
|
||||
{{#allow_editing}}
|
||||
<div class="TableObject-item pl-1">
|
||||
{{#allow_uploads}}
|
||||
<a class="btn" id="minibutton-upload-page" href="#">Upload</a>
|
||||
{{/allow_uploads}}
|
||||
{{#editable}}
|
||||
<a class="btn" id="minibutton-rename-page" href="#">Rename</a>
|
||||
<a class="btn" id="minibutton-edit-page" href="{{edit_path}}/{{escaped_url_path}}">Edit</a>
|
||||
<a class="btn btn-primary" id="minibutton-new-page" href="#">New</a>
|
||||
{{/editable}}
|
||||
{{^editable}}
|
||||
{{#newable}}
|
||||
<a class="btn btn-primary" id="minibutton-new-page" href="#">New</a>
|
||||
{{/newable}}
|
||||
{{/editable}}
|
||||
</div>
|
||||
{{/allow_editing}}
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<div class="TableObject-item px-2">
|
||||
<div class="BtnGroup" style="display: flex;">
|
||||
{{#allow_uploads}}
|
||||
<a
|
||||
class="btn BtnGroup-item btn-sm hide-sm hide-md
|
||||
minibutton-upload-page"
|
||||
>
|
||||
Upload
|
||||
</a>
|
||||
{{/allow_uploads}}
|
||||
|
||||
{{#editable}}
|
||||
<a
|
||||
class="btn BtnGroup-item btn-sm hide-sm hide-md
|
||||
minibutton-rename-page"
|
||||
>
|
||||
Rename
|
||||
</a>
|
||||
<a
|
||||
class="btn BtnGroup-item btn-sm hide-sm hide-md"
|
||||
href="{{edit_path}}/{{escaped_url_path}}"
|
||||
id="minibutton-edit-page"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
{{/editable}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#editable}}
|
||||
<div class="TableObject-item">
|
||||
<a class="btn btn-primary btn-sm minibutton-new-page" href="#">
|
||||
New
|
||||
</a>
|
||||
</div>
|
||||
{{/editable}}
|
||||
|
||||
{{^editable}}
|
||||
{{#newable}}
|
||||
<div class="TableObject-item">
|
||||
<a class="btn btn-primary btn-sm minibutton-new-page" href="#">
|
||||
New
|
||||
</a>
|
||||
</div>
|
||||
{{/newable}}
|
||||
{{/editable}}
|
||||
{{/allow_editing}}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<div id="wiki-content" class="px-4 px-md-0">
|
||||
<div id="wiki-content" class="px-2 px-lg-0">
|
||||
<h1 class="pt-4">{{page_header}}</h1>
|
||||
<div class="breadcrumb">{{{breadcrumb}}}</div>
|
||||
|
||||
|
||||
<div class="{{#has_header}}has-header{{/has_header}}{{#has_footer}} has-footer{{/has_footer}}{{#has_sidebar}} has-sidebar has-{{bar_side}}bar{{/has_sidebar}}{{#has_toc}} has-toc{{/has_toc}}">
|
||||
{{#has_toc}}
|
||||
<div id="wiki-toc-main">
|
||||
|
||||
Reference in New Issue
Block a user