diff options
| -rw-r--r-- | web-ui/app/index.html | 27 | ||||
| -rw-r--r-- | web-ui/app/scss/styles.scss | 57 |
2 files changed, 44 insertions, 40 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html index a60fbb61..5a6d31f0 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -19,27 +19,29 @@ <div class="off-canvas-wrap move-right menu" data-offcanvas> <div class="inner-wrap"> - <section id="left-pane" class="left-off-canvas-menu"> - <nav id="tag-list"></nav> - <nav id="logout"></nav> -</section> -</div> + <section id="left-pane" class="left-off-canvas-menu"> + <a class="fake-left-off-canvas-toggle" href="#"> + <i class=" toggle fa fa-navicon"></i> + </a> + <nav id="tag-list"></nav> + <nav id="logout"></nav> + </section> + </div> </div> -<div class="off-canvas-wrap" data-offcanvas> +<div class="off-canvas-wrap content" data-offcanvas> <header id="main" > <div id="user-alerts" class="message-panel"></div> <div id="loading" class="message-panel"><span>Loading...</span></div> </header> - <div class="inner-wrap content"> + <div class="inner-wrap"> <div id="menu" class="column collapsed-nav no-padding"> + <a class="left-off-canvas-toggle" href="#"> + </a> <a class="left-off-canvas-logo" href="#"> <img id="pixelated-logo" src="/assets/images/pixelated-logo_symbol_orange.png" alt="Pixelated"> </a> - <a class="left-off-canvas-toggle" href="#"> - <i class=" toggle fa fa-navicon"></i> - </a> </div> <article id='middle-pane-container' class="small-5 medium-5 large-5 columns no-padding"> @@ -86,6 +88,11 @@ $(document).foundation(); </script> +<script> +$('.fake-left-off-canvas-toggle').on('click', function () { + $('.left-off-canvas-toggle').click(); + }); +</script> </body> </html> diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index c3da4604..cd149b9f 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -463,6 +463,23 @@ button { } } +.fake-left-off-canvas-toggle { + color: white; + &:hover, &:focus { + color: white; + } + display: block; + left: 0; + padding: 9px; + background: $secondary; + top: 0; + z-index: 10000; + position: relative; + &.logout { + color: $action_buttons; + } +} + .collapsed-nav { width: 50px; position: absolute; @@ -478,21 +495,6 @@ button { img { padding-top: 1px; } - } - - .left-off-canvas-toggle { - color: white; - text-align: center; - display: block; - left: 0; - padding: 9px; - background: $secondary; - top: 0; - z-index: 10000; - position: relative; - &.logout { - color: $action_buttons; - } } ul.shortcuts { @@ -601,13 +603,13 @@ display: table; } .inner-wrap:after { clear: both; } -.off-canvas-wrap.move-right > .inner-wrap.content { - -ms-transform: translate(13.88889rem, 0); - -webkit-transform: translate3d(13.88889rem, 0, 0); - -moz-transform: translate3d(13.88889rem, 0, 0); - -ms-transform: translate3d(13.88889rem, 0, 0); - -o-transform: translate3d(13.88889rem, 0, 0); - transform: translate3d(13.88889rem, 0, 0); +.off-canvas-wrap.move-right.content > .inner-wrap { + -ms-transform: translate(9rem, 0); + -webkit-transform: translate3d(9rem, 0, 0); + -moz-transform: translate3d(9rem, 0, 0); + -ms-transform: translate3d(9rem, 0, 0); + -o-transform: translate3d(9rem, 0, 0); + transform: translate3d(9rem, 0, 0); } .move-right .exit-off-canvas { @@ -631,17 +633,12 @@ background: rgba(255, 255, 255, 0.05); } } position: absolute; } -.off-canvas-wrap.move-right.menu > .inner-wrap.content { +.off-canvas-wrap.move-right.menu > .inner-wrap { transform: translate3d(0, 0, 0); } -.off-canvas-wrap .inner-wrap.content { - -ms-transform: translate(75px, 0); - -webkit-transform: translate3d(75px, 0, 0); - -moz-transform: translate3d(75px, 0, 0); - -ms-transform: translate3d(75px, 0, 0); - -o-transform: translate3d(75px, 0, 0); - transform: translate3d(75px, 0, 0); +.off-canvas-wrap.content { + left: 75px; } .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu { |