Permalink
Browse files

simple hack to make the template responsive

This uses some JavaScript to move all the navigational items to a
hamburger menu on smaller screens.

Only list items will be copied.

There is no RTL support.

This will not work without JavaScript.

It's a hack.
  • Loading branch information...
splitbrain committed May 14, 2018
1 parent 46d2a96 commit 6b725a9a1a8407ae612eb9939d57a071fedc8085
Showing with 170 additions and 0 deletions.
  1. +62 −0 script.js
  2. +106 −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,106 @@
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;
left: 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 {
&::before {
content: '';
}
}
div.mobile-logo {
display: block;
a {
display: block;
width: 100%;
height: 3rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
div.mobile-menu {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow-y: auto;
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;
input,
button {
line-height: inherit;
}
}
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;
}
}
@@ -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 6b725a9

Please sign in to comment.