Resolve issues

* Fixed #141: improved styling for issue edit form.
* Fixed #142: TOC assumes `left` by default, also added new variables to control how it looks.
* Fixed #143: `$main-menu-bg-hover` is now being used.
* Resolved #144: added `$main-menu-bg-active` variable.
* Resolved #145: added `$table-list-header-bg` variable.
* Fixed #147: corrected forum edit attached files icon.
* Fixed #153: improved styling for `label.block`.

README.md

@@ -56,10 +56,22 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+Latest (master):
+
+* Fixed #141: improved styling for issue edit form.
+* Fixed #142: TOC assumes `left` by default, also added new variables to control how it looks.
+* Fixed #143: `$main-menu-bg-hover` is now being used.
+* Resolved #144: added `$main-menu-bg-active` variable.
+* Resolved #145: added `$table-list-header-bg` variable.
+* Fixed #147: corrected forum edit attached files icon.
+* Fixed #153: improved styling for `label.block`.
+* Added styling for clear query button.
+* Improved responsive sidebar menu layout.
+
 v2.8.0 (2019-08-13):
 
 * Resolved #132: fixed spacing for headers on roadmap pages.
-* Merged fix #136: broken layout with large image attachment
+* Merged fix #136: broken layout with large image attachment.
 
 v2.7.0 (2019-06-13):
 

src/javascripts/modules/HistoryTabs.js

@@ -55,7 +55,7 @@ PurpleMine.HistoryTabs = (function () {
 
     this._ = translations[this.lang]
 
-    if (this.$history.length > 0) {
+    if (this.$history.length > 0 && $('#history > h3').length > 0) {
       buildTabs()
       markFirstOfTypes()
     }

src/sass/_variables.scss

@@ -166,6 +166,12 @@ $wiki-font-size:                16px !default;
 $wiki-line-height:              1.6 !default;
 $wiki-preview-bg:               $body-bg !default;
 
+$toc-bg:                        shade($yellow, 50) !default;
+$toc-border:                    mix($yellow, $gray-500, 25%) !default;
+$toc-text:                      $text-color !default;
+$toc-link:                      shade($yellow, 800) !default;
+$toc-link-hover:                shade($yellow, 900) !default;
+$toc-shadow:                    0 1px 3px rgba($black, .07) !default;
 $toc-active-link:               darken($link-color, 10%) !default;
 $toc-active-link-hover:         shade($toc-active-link, 700) !default;
 $toc-active-border:             $link-color !default;
@@ -215,6 +221,7 @@ $collapsible-max-height:        10000px !default;
 $table-cell-padding:            8px !default;
 $table-condensed-cell-padding:  5px !default;
 
+$table-list-header-bg:          $body-bg !default;
 $table-list-header-border:      0 0 2px !default;
 $table-list-item-border:        0 !default;
 $table-list-color-odd-rows:     true !default;
@@ -505,6 +512,7 @@ $logo-space:                    floor($header-padding-vertical / 2) !default;
 
 $main-menu-bg:                  $gray-100 !default;
 $main-menu-bg-hover:            $gray-100 !default;
+$main-menu-bg-active:           transparent !default;
 $main-menu-link:                $gray-900 !default;
 $main-menu-link-active:         $black !default;
 $main-menu-border:              $gray-400 !default;

src/sass/components/_content.scss

@@ -161,6 +161,27 @@
       }
     }
 
+    &.queries {
+      > li {
+        position: relative;
+
+        > a.query {
+          padding-right: $sidebar-padding-horizontal * 1.5;
+        }
+
+        > a.icon-only {
+          position: absolute;
+          top: $sidebar-padding-vertical;
+          right: $sidebar-padding-horizontal / 2;
+          line-height: $line-height-computed;
+
+          &::before {
+            line-height: inherit;
+          }
+        }
+      }
+    }
+
     &.pages-hierarchy {
       .pages-hierarchy {
         margin-left: $sidebar-padding-horizontal + 3px;

src/sass/components/_elements.scss

@@ -127,6 +127,7 @@ img {
 //
 
 .autoscroll {
+  position: relative;
   margin-bottom: $line-height-computed;
   overflow-x: auto;
 }
@@ -782,6 +783,11 @@ div.table-list.boards {
         margin-left: ceil($bubble-padding-vertical / 2);
       }
     }
+
+    .attachments {
+      padding: $bubble-padding-horizontal;
+      border-top-color: mix($gray-400, $gray-100, 50%);
+    }
   }
 
   .reply {
@@ -934,6 +940,7 @@ div.table-list.boards {
   background: $body-bg;
   color: $panel-color;
   font-family: $font-family-monospace;
+  white-space: pre-wrap;
 }
 
 .diff_out {

src/sass/components/_forms.scss

@@ -381,16 +381,23 @@ label.inline {
   &:last-child {
     margin-right: 0;
   }
-}
 
-label.inline,
-label.block {
   > input {
     margin-left: -$check-input-gutter;
     float: left;
   }
 }
 
+label.block {
+  display: block;
+  width: auto;
+
+  > input {
+    margin-right: 3px;
+    margin-left: 3px;
+  }
+}
+
 
 //== Hack: align description edit icon with label
 //

src/sass/components/_icons.scss

@@ -161,6 +161,8 @@ table.list .buttons > a::before {
 .icon-sorted-desc::before           { content: $fa-var-sort-amount-desc; }
 .icon-toggle-plus::before           { content: $fa-var-plus-square; }
 .icon-toggle-minus::before          { content: $fa-var-minus-square; }
+.icon-clear-query::before           { content: $fa-var-times; }
+.icon-import::before                { content: $fa-var-cloud-upload; }
 
 //== Checkbox toggler
 //
@@ -610,7 +612,8 @@ em.info.error {
   }
 }
 
-.message .contextual {
+.message {
+  .contextual {
     a {
       @extend %fa-icon;
       opacity: .7;
@@ -620,6 +623,14 @@ em.info.error {
         opacity: 1;
       }
 
+      img {
+        display: none;
+      }
+    }
+  }
+
+  > .contextual {
+    a {
       &:nth-child(1) {
         &::before {
           content: $fa-var-comment;
@@ -637,9 +648,6 @@ em.info.error {
           content: $fa-var-trash;
         }
       }
-
-    img {
-      display: none;
     }
   }
 }

src/sass/components/_issue.scss

@@ -262,7 +262,7 @@ div.fileover {
   background-color: $highlight-bg;
 }
 
-div.attachments {
+div.attachments:not(.box) {
   padding: $line-height-computed 0;
   border-top: 1px solid $issue-border;
 
@@ -358,6 +358,19 @@ div.thumbnails {
   }
 }
 
+#trackers_description {
+  display: none;
+
+  dt {
+    margin: 0 0 ($line-height-computed / 4);
+  }
+
+  dd {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
 #new-relation-form {
   text-align: right;
 
@@ -370,6 +383,12 @@ div.thumbnails {
   }
 }
 
+#update > form {
+  margin-bottom: $line-height-computed;
+  padding-bottom: $line-height-computed;
+  border-bottom: 1px solid $issue-border;
+}
+
 #history {
   overflow: auto;
 

src/sass/components/_list.scss

@@ -25,7 +25,7 @@ table.list {
     padding: $table-cell-padding;
     border: 2px solid $table-border-color;
     border-width: $table-list-header-border;
-    background-color: $body-bg;
+    background-color: $table-list-header-bg;
     color: $gray-700;
     vertical-align: bottom;
 

src/sass/components/_login.scss

@@ -33,6 +33,11 @@
     margin-bottom: $panel-body-padding-vertical;
   }
 
+  #login-submit {
+    padding-top: $padding-base-vertical;
+    padding-bottom: $padding-base-vertical;
+  }
+
   table {
     margin: auto;
     table-layout: fixed;

src/sass/components/_responsive.scss

@@ -1,3 +1,4 @@
+.hidden,
 .mobile-show {
   display: none;
 }
@@ -78,6 +79,10 @@
       }
     }
 
+    #content {
+      overflow: auto;
+    }
+
     .mobile-toggle-button {
       width: $responsive-header-height;
       height: $responsive-header-height;
@@ -113,6 +118,43 @@
         }
       }
 
+      &__sidebar {
+        p {
+          padding-left: $padding-large-horizontal;
+        }
+      }
+
+      ul {
+        li:nth-child(n) {
+          a {
+            height: auto;
+            padding: $padding-large-vertical $padding-large-horizontal;
+            line-height: $line-height-base;
+          }
+        }
+
+        &.queries {
+          li {
+            display: flex;
+
+            a {
+              flex: 1 1 auto;
+            }
+
+            .icon-only {
+              flex: 0 0 40px;
+              padding-right: 0;
+              padding-left: 0;
+              text-align: center;
+
+              &::before {
+                line-height: inherit;
+              }
+            }
+          }
+        }
+      }
+
       a {
         &,
         &:hover,
@@ -131,11 +173,48 @@
         }
       }
 
-      h3 {
+      h3,
+      h4 {
+        height: auto;
+        margin: 0;
+        padding: $padding-base-vertical $padding-base-horizontal;
         border-top: 1px solid $flyout-menu-header-border;
         border-bottom: 1px solid $flyout-menu-header-border;
         background-color: $flyout-menu-header-bg;
         color: $flyout-menu-header-text;
+        line-height: $line-height-base;
+
+        + p {
+          margin-top: $padding-large-vertical;
+        }
+      }
+
+      h4 {
+        padding: 0 $padding-base-horizontal;
+      }
+
+      form {
+        padding-left: 0;
+
+        > ul {
+          margin-left: 0;
+
+          li:nth-child(n) {
+            padding-left: $padding-large-horizontal;
+            line-height: inherit;
+
+            label {
+              a {
+                display: block;
+                padding: $padding-base-vertical $padding-base-horizontal;
+              }
+            }
+          }
+
+          + p {
+            margin-top: $padding-large-vertical;
+          }
+        }
       }
 
       #admin-menu {

src/sass/components/_top.scss

@@ -330,6 +330,7 @@
 
         &:hover,
         &:focus {
+          background-color: $main-menu-bg-hover;
           box-shadow: inset 0 (-$main-menu-shadow-width) 0 $main-menu-shadow-hover;
           text-decoration: none;
         }
@@ -337,6 +338,7 @@
         &.selected {
           padding-bottom: $main-menu-padding-vertical - $main-menu-shadow-width;
           border-bottom: 3px solid $main-menu-shadow-active;
+          background-color: $main-menu-bg-active;
           box-shadow: none;
           color: $main-menu-link-active;
           font-weight: $font-weight-semi-bold;
@@ -421,6 +423,10 @@
       box-sizing: border-box;
       height: $tabs-height - 1px;
       background-color: $main-menu-bg;
+
+      &:hover {
+        background-color: $main-menu-bg-hover;
+      }
     }
   }
 

src/sass/components/_wiki.scss

@@ -225,32 +225,29 @@ div.wiki {
   }
 
   .toc {
+    display: table;
+    max-width: 45%;
     margin-bottom: $line-height-computed;
     margin-left: 0;
-    padding: 0;
+    padding: $padding-small-vertical $padding-small-horizontal;
     list-style-type: none;
-
+    border: 1px solid $toc-border;
-    &.right,
-    &.left {
-      max-width: 45%;
-      padding: 8px;
-      border: 1px solid $highlight-border;
     border-radius: $border-radius-base;
-      background-color: $highlight-bg;
+    background-color: $toc-bg;
-      box-shadow: $panel-shadow;
+    box-shadow: $toc-shadow;
+    color: $toc-text;
     font-size: $font-size-small;
 
     a {
-        color: $highlight-text;
+      color: $toc-link;
       font-weight: $font-weight-normal;
       text-decoration: none;
 
       &:hover {
-          color: darken($highlight-text, 10%);
+        color: $toc-link-hover;
         text-decoration: underline;
       }
     }
-    }
 
     &.right {
       margin-right: 0;