Permalink
Browse files

Merge pull request #61 from cosmocode/responsive

Responsive Menu
  • Loading branch information...
andreashaerter committed May 31, 2018
2 parents 46d2a96 + 9d29d10 commit 61982192220ff1fcc6f7930ba5feb297b5c2111a
Showing with 192 additions and 0 deletions.
  1. +62 −0 script.js
  2. +128 −0 static/mobile.less
  3. +2 −0 style.ini
@@ -0,0 +1,62 @@
/**
* Copy all the navigational links into a single mobile menu
*/
jQuery(function () {
var $mobilemenu = jQuery('<div>')
.addClass('mobile-menu');
var $logo = jQuery('#p-logo')
.clone()
.removeAttr('id')
.addClass('mobile-logo')
;
var $search = jQuery('#p-search form')
.clone()
.removeAttr('id')
.addClass('mobile-search');
$search.find('#simpleSearch').removeAttr('id');
$search.find('button').text('🔍');
$mobilemenu.append($search);
jQuery([
'p-navigation',
'left-navigation',
'right-navigation',
'p-coll-print_export',
'p-tb',
'p-personal'
]).each(function (i, name) {
var ul = jQuery('<ul>');
$mobilemenu.append(ul);
var filter = '#' + name + ' li';
ul.addClass('mobile-' + name);
ul.append(
jQuery(filter)
.not('.selected')
.clone()
.removeAttr('id')
);
});
var $hamburger = jQuery('<div>')
.addClass('mobile-hamburger')
.click(function () {
$mobilemenu.toggleClass('open');
$hamburger.toggleClass('open')
});
jQuery('body')
.append([
$mobilemenu,
$hamburger
])
.prepend(
$logo
)
;
});
@@ -0,0 +1,128 @@
div.mobile-hamburger,
div.mobile-menu,
div.mobile-logo {
display: none;
}
@media only screen and (max-width: 750px) {
div.mobile-hamburger {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 1000;
cursor: pointer;
font-size: 2.5rem;
line-height: 3rem;
width: 3rem;
height: 3rem;
text-align: center;
&::before {
content: '';
}
}
div.mobile-hamburger.open {
background-color: @ini_background;
&::before {
content: '';
}
}
div.mobile-logo {
display: block;
a {
display: block;
width: 100%;
height: 3rem;
background-size: contain;
background-repeat: no-repeat;
background-position: left;
}
}
div.mobile-menu {
position: absolute;
top: 0;
right: 0;
height: 100%;
overflow-y: auto;
-ms-overflow-style: none; // IE 10+
overflow: -moz-scrollbars-none; // Firefox
&::-webkit-scrollbar {
display: none; // Safari and Chrome
}
z-index: 500;
background-color: @ini_background;
box-shadow: -5px 0 5px @ini_border;
padding-top: 3rem;
a {
color: @ini_existing;
}
.mobile-search {
display: block;
margin: 0.25em;
div {
display: flex;
input,
button {
line-height: inherit;
flex-grow: 0;
}
input {
flex-grow: 1;
}
}
}
ul {
padding: 0;
list-style-type: none;
list-style-image: none !important;
margin: 0.25em 0;
border-bottom: 1px solid @ini_border;
li {
margin: 0;
padding: 0.25em;
}
}
}
div.mobile-menu.open {
display: block;
}
#page-base,
#head-base,
#head,
#panel {
display: none;
}
div#content,
div#footer {
margin-left: 0;
}
}
// translation plugin adjustment
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:before,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:before,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:after,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:after {
content: '';
}
@@ -76,6 +76,8 @@ user/rtl.css = rtl
static/mobile.less = all
; This section is used to configure some placeholder values used in
; the stylesheets. Changing this file is the simplest method to

0 comments on commit 6198219

Please sign in to comment.