#239 Move toggle to sidebar nav (with js hack)

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 {