Merge pull request #61 from cosmocode/responsive

Responsive Menu

script.js

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

static/mobile.less

@@ -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: '';
+}

style.ini

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