Attachment 185843 Details for Bug 216733 – Javascript for testing the new layout

Javascript for testing the new layout

forumResponsive.js (text/plain), 7.92 KB, created by Michael Gmelin on 2017-08-28 15:58:27 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Michael Gmelin

Created: 2017-08-28 15:58:27 UTC

Size: 7.92 KB

patch

obsolete

>fbsdForumsMobileOptionsTester = {
>    isSubmenuOpen: false,
>
>    test: function(version) {
>        switch (version) {
>            case 1:
>                this.cloneDonateButtonToSidebar(false);
>                this.addMenuButtons();
>                this.css();
>                break;
>        }
>    },
>
>    css:  function() {
>        var stylesheet = '<style>\
>    div#freebsd_menu ul.first,\
>    div#freebsd_menu ul:first-of-type {\
>        border-left: 0 !important;\
>        padding-left: 0;\
>    }\
>    div#freebsd_menu span.closingButton {\
>        display: none;\
>    }\
>    button#btn-hamburger {\
>        display: none;\
>    }\
>    div.frontdonateroundbox.donate-left {\
>        display: none;\
>    }\
>    @media screen and (max-width: 919px) {\
>        div.frontdonateroundbox {\
>            display: none;\
>        }\
>        html.menu-open {\
>            overflow-y: hidden !important\
>        }\
>        body {\
>            background-image: none;\
>        }\
>        div#freebsd_headercontainer {\
>            width: auto;\
>            font-size: 0px;\
>            letter-spacing: 0px;\
>            word-spacing: 0px;\
>            text-align: center;\
>            padding-bottom: 0;\
>            margin-bottom: 40px;\
>        }\
>        div#freebsd_menu {\
>            width: auto;\
>            margin: 0 !important;\
>            float: none;\
>            display: inline-block;\
>            font-size: 12px;\
>            box-sizing: border-box;\
>            padding-top: 5px;\
>            text-align: left;\
>        }\
>        div#freebsd_headercontainer {\
>            height: 77px;\
>            background-image: url("styles/freebsd/xenforo/freebsd_hdr_fill.png");\
>        }\
>        div#freebsd_headerlogoleft {\
>            margin: 0 auto;\
>            text-align: left;\
>            overflow: hidden;\
>        }\
>        div#freebsd_headerlogoleft img {\
>            width: auto;\
>            height: 75px;\
>        }\
>        div#freebsd_menu {\
>            display: none;\
>            position: absolute;\
>            top: 0;\
>            left: 0;\
>            width: 100%;\
>            height: 100%;\
>            margin: 0;\
>            padding: 61px 0 0px;\
>            text-align: center;\
>            z-index: 5000;\
>            background: #e5e5e5;\
>            overflow-y: auto;\
>        }\
>        div#freebsd_menu ul {\
>            border: none;\
>            display: inline-block;\
>            width: 100%;\
>            height: auto;\
>            overflow: auto;\
>            padding: 0 0 20px 0;\
>            cursor: pointer;\
>        }\
>        div#freebsd_menu ul ul {\
>            display: none !important;\
>        }\
>        html.submenu-open div#freebsd_menu ul ul {\
>            display: block !important;\
>        }\
>        div#freebsd_menu ul {\
>            display: inline-block;\
>            overflow: auto;\
>        }\
>        div#freebsd_menu ul ul {\
>            position: static;\
>        }\
>        div#freebsd_menu ul ul {\
>            margin-top: 20px;\
>            border-top: 1px solid #B4B4B4;\
>            padding: 20px 0 0;\
>        }\
>        div#freebsd_menu ul ul li {\
>            border-top: none;\
>            padding: 0 0 20px 0;\
>        }\
>        div#freebsd_menu span.closingButton {\
>            display: block;\
>            position: absolute;\
>            top: 20px;\
>            right: 20px;\
>            cursor: pointer;\
>        }\
>        button#btn-hamburger {\
>            box-sizing: border-box;\
>            display: block;\
>            position: absolute;\
>            top: 0;\
>            right: 0;\
>            height: 75px;\
>            width: 75px;\
>            padding: 17px 22px 18px 23px;\
>            cursor: pointer;\
>            margin: 0;\
>            border: 0;\
>            background: transparent;\
>            outline: 0 !important;\
>        }\
>        button#btn-hamburger span.icon-bar {\
>            display: block;\
>            box-sizing: border-box;\
>            border-radius: 2px;\
>            background-color: #eee;\
>            width: 30px;\
>            height: 4px;\
>            margin: 6px 0;\
>        }\
>        button#btn-hamburger:hover span.icon-bar {\
>            background-color: #fff;\
>        }\
>        div.frontdonateroundbox.donate-left {\
>            display: block;\
>            margin: -10px 0 0 20px;\
>            float: left;\
>        }\
>        div#loginBar h3#loginBarHandle {\
>            bottom: -14px;\
>        }\
>    }\
>    @media screen and (max-width: 559px) {\
>        div#freebsd_headerlogoleft img {\
>            height: 59px;\
>        }\
>        div#freebsd_headercontainer {\
>            height: 61px;\
>            background-image: url("styles/freebsd/xenforo/freebsd_hdr_fill.png");\
>            background-position: 0 -16px;\
>        }\
>        button#btn-hamburger {\
>            height: 59px;\
>            width: 59px;\
>            padding: 11px 15px 10px 14px;\
>        }\
>    }\
>    @media screen and (max-width: 429px) {\
>        div#freebsd_headerlogoleft {\
>            width: 212px;\
>        }\
>    }\
>    @media screen and (max-width: 359px) {\
>        div#loginBar h3#loginBarHandle {\
>            margin: 0 0 0 10px;\
>        }\
>        div.frontdonateroundbox.donate-left {\
>            margin: -10px 0 0 10px;\
>        }\
>    }\
>    @media screen and (max-width: 329px) {\
>        div.frontdonateroundbox.donate-left {\
>            float: none;\
>            margin: -10px 0 10px 10px;\
>        }\
>        div#loginBar h3#loginBarHandle {\
>            bottom: -40px;\
>        }\
>    }\
></style>';
>        $('head').append(stylesheet);
>    },
>
>    addMenuButtons: function() {
>        var self = this;
>        var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="21px" height="21px" viewBox="-1 -1 23 23" style="enable-background:new 0 0 21 21;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:#666666;stroke-width:2;stroke-miterlimit:10;}</style><defs></defs><g><line class="st0" x1="0.7" y1="0.7" x2="20.3" y2="20.3"></line><line class="st0" x1="0.7" y1="20.3" x2="20.3" y2="0.7"></line></g></svg>',
>            hamburger = '<button id="btn-hamburger"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>',
>            $menu = $('div#freebsd_menu');
>            $container = $('div#freebsd_headercontainer');
>        $menu.prepend('<span class="closingButton">'+svg+'</span>');
>        $container.append(hamburger);
>        var $closingButton = $('div#freebsd_menu span.closingButton'),
>            $hamburger = $('button#btn-hamburger');
>        $closingButton.click(function() {
>            $menu.hide(200);
>            document.body.style.overflow = 'auto';
>            $('html').removeClass('menu-open');
>        });
>        $hamburger.click(function() {
>            $menu.show(200);
>            $('html').addClass('menu-open');
>            document.body.style.overflow = 'hidden';
>        });
>        $('div#freebsd_menu > ul a').click(function(e) {
>            if (self.getViewportWidth() < 920 && ! self.isSubmenuOpen) {
>                e.preventDefault();
>            }
>        });
>        $('div#freebsd_menu > ul').click(function(e) {
>            if (self.getViewportWidth() < 920) {
>                $('div#freebsd_menu > ul').not(this).hide(200);
>                $(this).find('ul').hide(0);
>                $(this).find('ul').show(200);
>                self.isSubmenuOpen = true;
>                $('html').addClass('submenu-open');
>            }
>        });
>    },
>
>    cloneDonateButtonToSidebar: function(removeOriginal) {
>        var $buttonContainer = $('div#freebsd_headerlogoright'),
>            $button = $buttonContainer.find('div.frontdonateroundbox');
>        $("div#loginBar div.pageContent").prepend($button.clone().addClass('donate-left'));
>        if (removeOriginal) {
>            $buttonContainer.remove();
>        }
>    },
>
>	getViewportWidth: function() {
>		var e = window, a = 'inner';
>		if (!('innerWidth' in window )) {
>			a = 'client';
>			e = document.documentElement || document.body;
>		}
>		return e[ a+'Width' ];
>	},
>}

Actions: View

Attachments on bug 216733: 179537 | 185843 | 185844 | 187529 | 187530 | 189122