Merge pull request #297 from pixelated-project/new-sidebar

New sidebar

3 files changed, 114 insertions, 75 deletions

diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 18871995..2d1f8f23 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -104,7 +104,7 @@
         background: transparent;
         border: 1px solid #DDD;
         line-height: 0;
-        padding: 1px 2px;
+        padding: 3px 2px 2px 2px;
         @include border-radius(2px);
         &:hover {
           opacity: 1;
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 332a76fc..bd30552c 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -6,8 +6,6 @@
       display: flex;
       flex-wrap: nowrap;
 
-      position: fixed;
-      width: 57%;
       top: 0;
       z-index: 10;
       background-color: white;
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index e5556f2f..9846d326 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -116,7 +116,7 @@
           margin: -3px 0 0 0;
           li {
             background-color: #DDD;
-            color: black; 
+            color: black;
             display: inline-block;
             height: auto;
             font-weight: 400;
@@ -173,13 +173,10 @@
   font-size: 0.7em;
   margin-left: 5px;
   font-weight: 700;
+  position: relative;
   @include border-radius(100px);
 }
 
-article {
-  padding-left: 50px !important;
-}
-
 section {
   display: inline-block;
   vertical-align: top;
@@ -253,9 +250,8 @@ section {
     background-color: $secondary;
     color: white;
     nav {
-      padding-bottom: 25px;
       border-right: 1px solid lighten($secondary, 10%);
-      ul#default-tag-list, #custom-tag-list, #logout {
+      ul#default-tag-list, #custom-tag-list {
         li {
           transition: background-color 150ms ease-out;
           padding: 2px 10px;
@@ -273,15 +269,33 @@ section {
       }
 
       ul#default-tag-list {
+          .unread-count, .total-count {
+          font-size: 0.7em;
+          padding: 0px 5px 0;
+          top: 1px;
+          left: 0;
+          border: 1px solid #FFF;
+          position: absolute;
+          opacity: 0.95;
+        }
+        .total-count {
+          background: #999;
+        }
+        span.tag-label {
+          padding-left: 2px;
+        }
         li {
-          padding: 5px 10px;
+          padding: 5px 10px 5px 16px;
           position: relative;
           @include searching(4px, 19px, #333, 0.7em);
 
           &:before {
+            font-size: 1.5em;
             font-family: "FontAwesome";
-            margin-right: 10px;
+            margin-right: 13px;
             font-weight: normal;
+            position: relative;
+            top: 2px;
           }
           &:nth-child(1) {
             &:before {
@@ -312,28 +326,41 @@ section {
       }
 
       ul#custom-tag-list {
-        padding-bottom: 30px;
         li {
+          white-space: nowrap;
+          overflow: hidden;
           font-size: 0.8em;
-          padding: 5px 20px;
+          padding: 5px 10px 5px 15px;
+
+          span.tag-label {
+            padding: 5px 20px 5px 38px;
+          }
         }
       }
 
-       ul#logout {
-         a {
-          color: #000000;
-        }
+      ul#logout {
         li {
-          color: #000000;
-          background-color: $action_buttons;
+          color: $action_buttons;
+          background-color: $secondary;
           padding: 5px 10px;
           position: relative;
           @include searching(4px, 19px, #333, 0.7em);
 
-          &:before {
-            font-family: "FontAwesome";
-            margin-right: 10px;
-            font-weight: normal;
+          &:hover {
+          background-color: $action_buttons;
+          color: $secondary;  
+          }
+          
+          div {
+            padding-left: 7px;
+            &:before {
+              font-size: 1.5em;
+              font-family: "FontAwesome";
+              margin-right: 13px;
+              font-weight: normal;
+              position: relative;
+              top: 2px;
+            }
           }
         }
       }
@@ -463,6 +490,31 @@ button {
   }
 }
 
+.fake-left-off-canvas-toggle {
+  color: white;
+
+  &:hover, &:focus {
+    color: white;
+  }
+
+  padding: 9px 0px 8px 19px;
+  display: block;
+  left: 0;
+  background: $secondary;
+  top: 0;
+  position: relative;
+  &.logout {
+    color: $action_buttons;
+  }
+}
+
+.left-off-canvas-logo {
+  img {
+    padding: 9px 6px 6px 6px;
+    width: 163px;
+  }
+}
+
 .collapsed-nav {
   width: 50px;
   position: absolute;
@@ -470,31 +522,6 @@ button {
   height: 100vh;
   background: $secondary;
 
-  .left-off-canvas-logo {
-    text-align: center;
-    padding: 8px;
-    display: block;
-
-    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 {
     li {
       position: relative;
@@ -572,51 +599,56 @@ button {
   bottom: 0;
   position: absolute;
   overflow-y: auto;
-  z-index: 1001;
-  transition: transform 500ms ease 0s;
-  -webkit-overflow-scrolling: touch;
-  -ms-transform: translate(-100%, 0);
-  -webkit-transform: translate3d(-100%, 0, 0);
-  -moz-transform: translate3d(-100%, 0, 0);
-  -ms-transform: translate3d(-100%, 0, 0);
-  -o-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
 }
+
 .left-off-canvas-menu * {
--webkit-backface-visibility: hidden; }
+  -webkit-backface-visibility: hidden;
+}
 
 
 .off-canvas-wrap {
   -webkit-backface-visibility: hidden;
   position: relative;
   width: 100%;
-overflow: hidden; }
+  overflow: hidden;
+}
+
 .off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
   min-height: 100%;
--webkit-overflow-scrolling: touch; }
+  -webkit-overflow-scrolling: touch;
+}
 
 .inner-wrap {
   -webkit-backface-visibility: hidden;
   position: relative;
   width: 100%;
+}
+
+.inner-wrap:before, .inner-wrap:after {
+  content: " ";
+  display: table;
+}
+
+.inner-wrap:after {
+  clear: both;
+}
+
+.off-canvas-wrap.content {
   -webkit-transition: -webkit-transform 500ms ease;
   -moz-transition: -moz-transform 500ms ease;
   -ms-transition: -ms-transform 500ms ease;
   -o-transition: -o-transform 500ms ease;
-transition: transform 500ms ease; }
-.inner-wrap:before, .inner-wrap:after {
-  content: " ";
-display: table; }
-.inner-wrap:after {
-clear: both; }
-
-.move-right > .inner-wrap {
-  -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); }
+  transition: transform 500ms ease;
+
+  &.move-right {
+    -webkit-transform: translate3d(10rem, 0, 0);
+    -moz-transform: translate3d(10rem, 0, 0);
+    -ms-transform: translate3d(10rem, 0, 0);
+    -o-transform: translate3d(10rem, 0, 0);
+    transform: translate3d(10rem, 0, 0);
+  }
+}
+
 .move-right .exit-off-canvas {
   -webkit-backface-visibility: hidden;
   transition: background 300ms ease;
@@ -634,6 +666,15 @@ transform: translate3d(13.88889rem, 0, 0); }
   .move-right .exit-off-canvas:hover {
 background: rgba(255, 255, 255, 0.05); } }
 
+.off-canvas-wrap.move-right.menu {
+  position: absolute;
+}
+
+.off-canvas-wrap.content {
+  left: 50px;
+  padding-right: 50px;
+}
+
 .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu {
   -ms-transform: none;
   -webkit-transform: none;