From 38eef177d4547cdd182569958084389fb49f6f75 Mon Sep 17 00:00:00 2001
From: minusfive <mail@minusfive.com>
Date: Wed, 23 Aug 2017 16:16:18 -0400
Subject: [PATCH] Cleanup & debug .nav-stacked styles

---
 .../templates/user/notifications.hbs          |  3 +-
 .../stylesheets/common/admin/admin_base.scss  | 81 ++++++++-----------
 .../stylesheets/common/components/navs.scss   | 39 ++++-----
 app/assets/stylesheets/desktop/user.scss      | 80 +++++++-----------
 4 files changed, 87 insertions(+), 116 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/user/notifications.hbs b/app/assets/javascripts/discourse/templates/user/notifications.hbs
index 19e549d6c16..d8e07cbe8d7 100644
--- a/app/assets/javascripts/discourse/templates/user/notifications.hbs
+++ b/app/assets/javascripts/discourse/templates/user/notifications.hbs
@@ -5,8 +5,7 @@
     </li>
     <li>
       {{#link-to 'userNotifications.responses'}}
-        {{d-icon "reply" class="glyph"}}
-        {{i18n 'user_action_groups.6'}}
+        {{d-icon "reply" class="glyph"}}{{i18n 'user_action_groups.6'}}
       {{/link-to}}
     </li>
     <li>
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 569d2d08905..0edf8af7764 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -36,8 +36,8 @@ $mobile-breakpoint: 700px;
   tr {text-align: left;}
   td, th {padding: 8px;}
   td {
-    border-bottom: 1px solid $primary-low; 
-    border-top: 1px solid $primary-low; 
+    border-bottom: 1px solid $primary-low;
+    border-top: 1px solid $primary-low;
   }
   th {
     text-align: left;
@@ -94,7 +94,7 @@ td.flaggers td {
 
   .site-text {
     cursor: pointer;
-    border-bottom: 1px solid $primary-low; 
+    border-bottom: 1px solid $primary-low;
     margin-bottom: 0.5em;
 
     &.overridden {
@@ -112,7 +112,7 @@ td.flaggers td {
     .site-text-value {
       margin: 0.5em 5em 0.5em 0;
       max-height: 100px;
-      color: $primary-medium; 
+      color: $primary-medium;
     }
 
   }
@@ -136,7 +136,7 @@ td.flaggers td {
   font-size: 0.857em;
   float: right;
   margin-right: 10px;
-  background-color: $primary-low; 
+  background-color: $primary-low;
   padding: 2px 5px;
   border-radius: 5px;
   color: $primary;
@@ -229,16 +229,16 @@ td.flaggers td {
 }
 
 .admin-controls {
-  background-color: $primary-low; 
+  background-color: $primary-low;
   padding: 10px 10px 3px 0;
   @include clearfix;
   .nav.nav-pills {
     li.active {
       a {
-        border-color: $primary-low; 
-        background-color: $primary-medium; 
+        border-color: $primary-low;
+        background-color: $primary-medium;
         &:hover {
-          background-color: $primary-medium; 
+          background-color: $primary-medium;
         }
       }
     }
@@ -374,23 +374,18 @@ td.flaggers td {
 .admin-nav {
   width: 18.018%;
   position: relative;
+
+  li a.active {
+    color: $secondary;
+    background-color: $quaternary;
+  }
+
   // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
   @media (max-width: $mobile-breakpoint) {
     position: absolute;
     z-index: 0;
     width: 50%;
   }
-  margin-top: 30px;
-  .nav-stacked {
-    border-right: none;
-    @media (max-width: $mobile-breakpoint) {
-      //margin-right: 10px;
-    }
-  }
-  li a.active {
-    color: $secondary;
-    background-color: $quaternary;
-  }
 }
 
 .admin-detail {
@@ -403,7 +398,7 @@ td.flaggers td {
   // Todo: set this properly - it needs to be >= the menu height
   min-height: 875px;
   margin-left: 0;
-  border-left: solid 1px $primary-low; 
+  border-left: solid 1px $primary-low;
   padding: 30px 0 30px 30px;
   @media (max-width: $mobile-breakpoint) {
     padding: 30px 0;
@@ -485,7 +480,7 @@ td.flaggers td {
       }
       padding: 1px;
       background-color: $secondary;
-      border: 1px solid $primary-low; 
+      border: 1px solid $primary-low;
       border-radius: 3px;
       box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
       transition: border linear 0.2s, box-shadow linear 0.2s;
@@ -553,7 +548,7 @@ section.details {
     color: $primary;
     padding: 5px 10px;
     margin: 30px 0 5px 0;
-    border-bottom: 5px solid $primary-low; 
+    border-bottom: 5px solid $primary-low;
   }
 }
 
@@ -596,7 +591,7 @@ section.details {
   &.highlight-danger {
     background-color: scale-color($danger, $lightness: 50%);
   }
-  border-top: 1px solid $primary-low; 
+  border-top: 1px solid $primary-low;
   &:before, &:after {
     display: table;
     content: "";
@@ -716,14 +711,14 @@ section.details {
     font-size: 1em;
     line-height: 16px;
     padding: 4px;
-    background-color: $primary-low; 
+    background-color: $primary-low;
   }
 
   .badge-query-plan {
     font-size: 0.857em;
     line-height: 13px;
     padding: 4px;
-    background-color: $primary-low; 
+    background-color: $primary-low;
   }
 
   .count-warning {
@@ -922,7 +917,7 @@ table.api-keys {
     th {
       font-weight: normal;
       text-align: center;
-      background: $primary-low; 
+      background: $primary-low;
     }
     th.title {
       text-align: left;
@@ -972,7 +967,7 @@ table.api-keys {
   }
 
   &.detected-problems {
-    background: $primary-low; 
+    background: $primary-low;
     margin-bottom: 20px;
 
     .look-here {
@@ -997,7 +992,7 @@ table.api-keys {
         text-align: right;
       }
       .btn {
-        background: $primary-low; 
+        background: $primary-low;
       }
       ul {
         margin-left: 0;
@@ -1047,7 +1042,7 @@ table.api-keys {
 }
 
 .commits-widget {
-  border: solid 1px $primary-low; 
+  border: solid 1px $primary-low;
   height: 180px;
   margin-bottom: 36px;
 
@@ -1070,7 +1065,7 @@ table.api-keys {
     color: $primary;
     font-weight: bold;
     height: 30px;
-    background: $primary-low; 
+    background: $primary-low;
     cursor: pointer;
 
     h1 {
@@ -1093,7 +1088,7 @@ table.api-keys {
       @extend .clearfix;
       line-height: 1.0em;
       padding: 6px 8px;
-    background-color: $primary-low; 
+    background-color: $primary-low;
       .left {
         float: left;
       }
@@ -1103,7 +1098,7 @@ table.api-keys {
 
       img {
         margin-top: 2px;
-        border: solid 1px $primary-low; 
+        border: solid 1px $primary-low;
         padding: 2px;
         background-color: $secondary;
       }
@@ -1134,11 +1129,11 @@ table.api-keys {
     width: 6px;
   }
   ::-webkit-scrollbar-thumb {
-    background: $primary-low; 
+    background: $primary-low;
     -webkit-border-radius: 3px;
   }
   ::-webkit-scrollbar-track {
-    border-left: solid 1px $primary-low; 
+    border-left: solid 1px $primary-low;
   }
 }
 
@@ -1313,7 +1308,7 @@ table.api-keys {
     color: $primary;
     &:hover {
       color: $primary;
-      background-color: $primary-low; 
+      background-color: $primary-low;
 
 
     }
@@ -1343,7 +1338,7 @@ table.api-keys {
 
   .heading-container {
     width: 100%;
-    background-color: $primary-low; 
+    background-color: $primary-low;
   }
   .col.heading {
     font-weight: bold;
@@ -1359,7 +1354,7 @@ table.api-keys {
 
   .ember-list-item-view {
     width: 100%;
-    border-top: solid 1px $primary-low; 
+    border-top: solid 1px $primary-low;
   }
 }
 
@@ -1447,14 +1442,6 @@ button.ru {
   }
 }
 
-@media all
-and (max-width : 850px) {
-  html:not(.mobile-view) .admin-content .nav-stacked {
-    .glyph {width: auto; position: relative;}
-    > li > a {padding: 13px}
-  }
-}
-
 @media all
 and (min-width : 320px)
 and (max-width : 500px) {
@@ -1549,7 +1536,7 @@ tr.not-activated {
   .user-field {
     padding: 10px;
     margin-bottom: 10px;
-    border-bottom: 1px solid $primary-low; 
+    border-bottom: 1px solid $primary-low;
 
     .form-display {
       width: 25%;
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index 6beae3c5917..487f5ea719a 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -50,38 +50,42 @@
   padding: 0;
   overflow: hidden;
   background: $primary-low;
+
   li {
     border-bottom: 1px solid $primary-low;
     position: relative;
+
     &:last-of-type {
       border-bottom: 0;
     }
+
+    &.indent {
+      padding-left: 15px;
+    }
+
     a {
       margin: 0;
-      padding: 13px 13px 13px 30px;
+      padding: 13px;
       font-size: 1.143em;
       line-height: 20px;
       cursor: pointer;
       color: $primary;
     }
   }
-  > li.indent {
-    padding-left: 15px;
-  }
-  .active > a, & li > a.active
-  {
+
+  .active > a,
+  li > a.active {
     color: $secondary;
     background-color: $quaternary;
-  }
 
-  .active > a::after, & li > a.active::after
-  {
-    left: 90%;
-    top: 33%;
-    content: " ";
-    position: absolute;
-    border: 8px solid transparent;
-    border-left-color: $secondary;
+    &:after {
+      left: 90%;
+      top: 33%;
+      content: " ";
+      position: absolute;
+      border: 8px solid transparent;
+      border-left-color: $secondary;
+    }
   }
 
   .count {
@@ -91,10 +95,9 @@
 
   .glyph {
     font-size: 0.857em;
-    width: 30px;
+    width: 1.25em;
     text-align: center;
-    position: absolute;
-    left: 2px;
+    margin-right: .5em;
     line-height: 20px;
   }
 }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 3d344b8b824..aad15295747 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -107,24 +107,34 @@
   }
 }
 
-.user-navigation .nav-stacked .glyph {
-  display: none;
-  // float: right;
-  // display: block;
-  // position: static;
-}
-
 .user-navigation {
   display: table-cell;
   vertical-align: top;
   width: 170px;
-  padding-left: 30px;
 
-  h3 {
-    color: $primary;
-    margin: 20px 0 10px 0;
+  .nav-stacked {
+    background-color: transparent;
+    li {
+      border-bottom: none;
+
+      a {
+        color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
+      }
+
+      a.active {
+        color: $primary;
+        font-weight: bold;
+        background-color: transparent;
+
+        &:after {
+        display: none;
+        }
+      }
+      &.archive {
+        padding-left: 15px;
+      }
+    }
   }
-
 }
 
 .viewing-self .user-main .about.collapsed-info {
@@ -174,7 +184,7 @@
 
       th {
         text-align: left;
-        border-bottom: 3px solid $primary-low; 
+        border-bottom: 3px solid $primary-low;
         padding: 0 0 10px 0;
         color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
         font-weight: normal;
@@ -182,7 +192,7 @@
 
       td {
         padding: 10px 0 10px 0;
-        border-bottom: 1px solid $primary-low; 
+        border-bottom: 1px solid $primary-low;
       }
     }
 
@@ -194,7 +204,7 @@
     }
 
     .user-invite-controls {
-      background-color: $primary-low; 
+      background-color: $primary-low;
       padding: 5px 10px 0px 0;
       height: 35px;
     }
@@ -226,8 +236,8 @@
 
   .secondary {
     background: scale-color($secondary, $lightness: -5%);
-    border-top: 1px solid $primary-low; 
-    border-bottom: 1px solid $primary-low; 
+    border-top: 1px solid $primary-low;
+    border-bottom: 1px solid $primary-low;
     font-size: 0.929em;
       .btn { padding: 3px 12px; }
 
@@ -276,8 +286,8 @@
       transition: margin .15s linear;
 
       blockquote {
-        background-color: $secondary-low; 
-        border-left-color: $secondary-low; 
+        background-color: $secondary-low;
+        border-left-color: $secondary-low;
       }
 
       h1 {
@@ -404,7 +414,7 @@
       padding: 0 0 2px 0;
       margin-top: 0;
       background: rgba($secondary, .85);
-      border-bottom: 1px solid $primary-low; 
+      border-bottom: 1px solid $primary-low;
       .bio { display: none; }
 
       .primary {
@@ -461,7 +471,7 @@
     .item {
       padding: 20px 8px 15px 8px;
       background-color: $secondary;
-      border-bottom: 1px solid $primary-low; 
+      border-bottom: 1px solid $primary-low;
     }
     .type {
       color: $primary;
@@ -637,31 +647,3 @@
   float: right;
   margin-bottom: 5px;
 }
-
-.user-main .nav-stacked {
-  &.activity-list {
-    padding-top: 20px;
-  }
-  background-color: transparent;
-
-  li {
-    border-bottom: none;
-    > a {
-      padding: 8px 13px;
-      color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
-    }
-  }
-
-  li > a.active {
-    color: $primary;
-    font-weight: bold;
-    background-color: transparent;
-  }
-  li > a.active:after {
-    display: none;
-  }
-
-  li.archive {
-    padding-left: 15px;
-  }
-}