Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Merge pull request #61 from cosmocode/responsive
Responsive Menu
- Loading branch information
Showing
with
192 additions
and 0 deletions.
- +62 −0 script.js
- +128 −0 static/mobile.less
- +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: ''; | ||
} |