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