Merge pull request #91 from mrliptontea/issue-90-misaligned-delete-icon-in-watchers-list

Resolve regression in sidebar layouts

README.md

@@ -56,6 +56,11 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+v2.0.1 (2019-03-17):
+
+* Fixed #90: regression in some sidebar layouts
+* Removed reduntant `abbr[title]` styles
+
 v2.0 (2019-03-13):
 
 * Refreshed, modernized look & feel

src/sass/components/_admin.scss

@@ -2,8 +2,8 @@
 // Admin
 // --------------------------------------------------
 
-#main #admin-menu {
-  ul {
+#admin-menu {
+  ul:nth-child(n) {
     li {
       list-style-type: none;
 
@@ -14,22 +14,22 @@
       }
     }
   }
-}
 
-#main #admin-index > #admin-menu {
-  ul {
-    margin: 0;
-    padding: 0;
-  }
+  #admin-index > & {
+    ul {
+      margin: 0;
+      padding: 0;
+    }
 
-  li {
-    padding: ($sidebar-padding-vertical + 1px) ($sidebar-padding-horizontal + 3px);
-  }
+    li {
+      padding: ($sidebar-padding-vertical + 1px) ($sidebar-padding-horizontal + 3px);
+    }
 
-  a {
-    display: inline-block;
-    padding-left: 5px + 20px;
-    background-position: 0 center;
+    a {
+      display: inline-block;
+      padding-left: 5px + 20px;
+      background-position: 0 center;
+    }
   }
 }
 

src/sass/components/_base.scss

@@ -149,11 +149,6 @@ hr {
   border-top: 1px solid $hr-border;
 }
 
-abbr[title] {
-  border-bottom: 1px dotted $abbr-border-color;
-  cursor: help;
-}
-
 blockquote {
   margin: 0 0 $line-height-computed;
   padding: floor($line-height-computed / 4) $padding-large-horizontal;

src/sass/components/_content.scss

@@ -28,7 +28,7 @@
 // Sidebar
 // --------------------------------------------------
 
-#main #sidebar {
+#sidebar {
   padding: $padding-side $sidebar-padding-horizontal;
 
   @if $flexbox-layout {
@@ -58,6 +58,19 @@
     }
   }
 
+  .nosidebar & {
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+
+    @if $flexbox-layout {
+      flex: 0 0 auto;
+    } @else {
+      width: 0;
+      float: none;
+    }
+  }
+
   h3 {
     margin-top: $line-height-computed * 1.5;
   }
@@ -68,71 +81,73 @@
   }
 
   ul {
-    margin: 0 0 ($line-height-computed / 2);
-    padding: 0;
+    &:nth-child(n) {
+      margin: 0 0 ($line-height-computed / 2);
+      padding: 0;
 
-    @if $sidebar-position == "left" {
-      margin-right: -($sidebar-padding-horizontal);
-    } @else {
-      margin-left: -($sidebar-padding-horizontal);
+      @if $sidebar-position == "left" {
+        margin-right: -($sidebar-padding-horizontal);
+      } @else {
+        margin-left: -($sidebar-padding-horizontal);
+      }
     }
 
-    li {
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
+    &:not(.watchers) {
+      li {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
 
-      > a:not(.icon-only) {
-        display: block;
-        padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
-        border: 1px solid transparent;
-
-        @if $sidebar-position == "left" {
-          border-left-width: 3px;
-          border-radius: $border-radius-large 0 0 $border-radius-large;
-        } @else {
-          border-right-width: 3px;
-          border-radius: 0 $border-radius-large $border-radius-large 0;
-        }
-
-        &:hover {
-          background-color: $sidebar-link-hover-bg;
-          color: $sidebar-link-hover-text;
-          text-decoration: none;
-        }
-
-        &.selected {
-          border-color: $sidebar-link-active-border;
-          background-color: $sidebar-link-active-bg;
-          color: $sidebar-link-active-text;
+        > a:not(.icon-only) {
+          display: block;
+          padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
+          border: 1px solid transparent;
 
           @if $sidebar-position == "left" {
-            margin-right: -1px;
-            border-right-color: $body-bg;
-            border-left-color: $sidebar-link-active-side;
-            box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
+            border-left-width: 3px;
+            border-radius: $border-radius-large 0 0 $border-radius-large;
           } @else {
-            margin-left: -1px;
-            border-right-color: $sidebar-link-active-side;
-            border-left-color: $body-bg;
-            box-shadow: 3px 1px 2px rgba(0, 0, 0, .1);
+            border-right-width: 3px;
+            border-radius: 0 $border-radius-large $border-radius-large 0;
+          }
+
+          &:hover {
+            background-color: $sidebar-link-hover-bg;
+            color: $sidebar-link-hover-text;
+            text-decoration: none;
+          }
+
+          &.selected {
+            border-color: $sidebar-link-active-border;
+            background-color: $sidebar-link-active-bg;
+            color: $sidebar-link-active-text;
+
+            @if $sidebar-position == "left" {
+              margin-right: -1px;
+              border-right-color: $body-bg;
+              border-left-color: $sidebar-link-active-side;
+              box-shadow: -3px 1px 2px rgba(0, 0, 0, .1);
+            } @else {
+              margin-left: -1px;
+              border-right-color: $sidebar-link-active-side;
+              border-left-color: $body-bg;
+              box-shadow: 3px 1px 2px rgba(0, 0, 0, .1);
+            }
           }
         }
       }
     }
   }
-}
 
-#main.nosidebar #sidebar {
-  margin: 0;
-  padding: 0;
-  border: 0 none;
+  // Special treatment for anchor tags directly under sidebar tag
+  > a {
+    padding: $sidebar-padding-vertical $sidebar-padding-horizontal;
 
-  @if $flexbox-layout {
-    flex: 0 0 auto;
-  } @else {
-    width: 0;
-    float: none;
+    @if $sidebar-position == "left" {
+      padding-left: $sidebar-padding-horizontal + 3px;
+    } @else {
+      padding-right: $sidebar-padding-horizontal + 3px;
+    }
   }
 }
 

src/sass/components/_elements.scss

@@ -201,10 +201,15 @@ a.collapsible.collapsed,
         background: transparent;
       }
 
+      > .icon-only {
+        &::before {
+          line-height: inherit;
+        }
+      }
+
       > .delete {
         float: right;
         opacity: $icon-opacity;
-        vertical-align: middle;
 
         &:hover {
           opacity: $icon-hover-opacity;