From cc299f89e260ad4c15cbed5777a985abbc62938b Mon Sep 17 00:00:00 2001 From: psychobunny Date: Fri, 21 Aug 2015 18:40:59 -0400 Subject: [PATCH] mobile menu for ACP first pass --- public/less/admin/mobile.less | 93 +++++++-- public/src/admin/admin.js | 41 ++++ src/views/admin/footer.tpl | 2 +- src/views/admin/partials/menu.tpl | 312 ++++++++++++++++-------------- 4 files changed, 282 insertions(+), 166 deletions(-) diff --git a/public/less/admin/mobile.less b/public/less/admin/mobile.less index 21dd043b29..ed870595bb 100644 --- a/public/less/admin/mobile.less +++ b/public/less/admin/mobile.less @@ -8,7 +8,33 @@ @media (max-width: 980px) { body { - padding-top: 90px; + //padding-top: 90px; + height: 100%; + } + + .header { + height: 58px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26); + position: fixed; + top: 0px; + z-index: 1; + + #main-page-title { + bottom: -31px; + font-size: 20px; + color: #FFF; + left: 52px; + font-weight: 400; + } + + #user_label { + right: 0px; + bottom: 7px; + } + + #main-menu { + display: none; + } } #mobile-menu { @@ -34,32 +60,61 @@ } } - .header { - height: 58px; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26); - position: fixed; - top: 0px; - z-index: 1; + #menu { + background-color: #1D1F20; + background-image: linear-gradient(145deg, #1D1F20, #404348); - #main-page-title { - bottom: -31px; - font-size: 20px; - color: #FFF; - left: 52px; - font-weight: 400; + a { + color: #fff; + text-decoration: none; } - #user_label { - right: 0px; - bottom: 7px; + a:hover { + text-decoration: underline; + } + } + + .menu-header-title { + font-weight: 400; + letter-spacing: 0.5px; + margin: 0; + } + + .menu-section { + margin: 25px 0; + } + + .menu-section-title { + text-transform: uppercase; + color: #85888d; + font-weight: 200; + font-size: 13px; + letter-spacing: 1px; + padding: 0 20px; + margin:0; + } + + .menu-section-list { + padding:0; + margin: 10px 0; + list-style:none; + + a { + display: block; + padding: 10px 20px; } - #main-menu { - display: none; + a:hover { + background-color: rgba(255, 255, 255, 0.1); + text-decoration: none; } } - + #panel { + background: white; + min-height: 100%; + } + .slideout-menu { position: fixed; left: 0; diff --git a/public/src/admin/admin.js b/public/src/admin/admin.js index dd53664a87..2164de5bc6 100644 --- a/public/src/admin/admin.js +++ b/public/src/admin/admin.js @@ -22,6 +22,8 @@ $('[component="logout"]').on('click', app.logout); app.alert = launchSnackbar; + + configureSlidemenu(); }); socket.emit('admin.config.get', function(err, config) { @@ -113,4 +115,43 @@ bar.on('click', clickfn); } } + + function configureSlidemenu() { + var slideout = new Slideout({ + 'panel': document.getElementById('panel'), + 'menu': document.getElementById('menu'), + 'padding': 256, + 'tolerance': 70 + }); + + $('#mobile-menu').on('click', function() { + slideout.toggle(); + }); + + $('#menu a').on('click', function() { + slideout.close(); + }); + + $(window).on('resize', function() { + slideout.close(); + }); + + function onOpeningMenu() { + $('#header').css({ + 'top': $('#panel').position().top * -1 + 'px', + 'position': 'absolute' + }); + } + + slideout.on('beforeopen', onOpeningMenu); + slideout.on('open', onOpeningMenu); + slideout.on('translate', onOpeningMenu); + + slideout.on('close', function() { + $('#header').css({ + 'top': '0px', + 'position': 'fixed' + }); + }); + } }()); \ No newline at end of file diff --git a/src/views/admin/footer.tpl b/src/views/admin/footer.tpl index e81d9e6a1a..02f80c73f0 100644 --- a/src/views/admin/footer.tpl +++ b/src/views/admin/footer.tpl @@ -1,4 +1,4 @@ - + diff --git a/src/views/admin/partials/menu.tpl b/src/views/admin/partials/menu.tpl index 2e8bb3df00..a6e68d9ba1 100644 --- a/src/views/admin/partials/menu.tpl +++ b/src/views/admin/partials/menu.tpl @@ -1,147 +1,167 @@ - \ No newline at end of file + + + + \ No newline at end of file