Release v2.5.0

Improvements for responsive layout

README.md

@@ -56,6 +56,10 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+v2.5.0 (2019-06-05):
+
+* Fixed #117, #118 and added many improvements to the responsive layout.
+
 v2.4.0 (2019-06-02):
 
 * Synchronized most application styles with Redmine's default theme.

src/sass/_variables.scss

@@ -481,13 +481,13 @@ $header-title-line-height:      $line-height-computed * 1.5 !default;
 
 $responsive-header-height:      54px !default;
 
-$flyout-menu-bg:                shade($header-bg, 800) !default;
+$flyout-menu-bg:                shade($header-bg, 700) !default;
 $flyout-menu-text:              $white !default;
 $flyout-menu-link:              $white !default;
-$flyout-menu-link-active-bg:    $header-bg !default;
+$flyout-menu-link-active-bg:    shade($header-bg, 50) !default;
-$flyout-menu-link-active:       $white !default;
+$flyout-menu-link-active:       $text-color !default;
-$flyout-menu-header-bg:         shade($header-bg, 900) !default;
+$flyout-menu-header-bg:         shade($header-bg, 800) !default;
-$flyout-menu-header-border:     shade($header-bg, 900) !default;
+$flyout-menu-header-border:     shade($header-bg, 800) !default;
 $flyout-menu-header-text:       $white !default;
 
 $quick-search-width:            200px !default;

src/sass/components/_buttons.scss

@@ -197,6 +197,7 @@ p.buttons {
     label {
       display: block;
       margin-bottom: $line-height-computed / 2;
+      line-height: initial;
     }
   }
 
@@ -238,6 +239,10 @@ a[data-expands],
   cursor: pointer;
   user-select: none;
   @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+
+  &.icon-only::before {
+    content: none;
+  }
 }
 
 a[data-expands] {
@@ -253,3 +258,8 @@ a[data-expands] {
     display: none;
   }
 }
+
+a.icon-toggle-minus[data-expands],
+select[multiple="multiple"] + .toggle-multiselect {
+  background-image: inline-svg("minus.svg", (path: (fill: $btn-default-icon-color)));
+}

src/sass/components/_elements.scss

@@ -98,12 +98,14 @@ a.collapsible.collapsed,
 //
 
 .hidden-for-sighted {
-  position: absolute;
+  // stylelint-disable declaration-no-important
-  top: auto;
+  position: absolute !important;
-  left: -10000px;
+  top: auto !important;
-  width: 1px;
+  left: -10000px !important;
-  height: 1px;
+  width: 1px !important;
-  overflow: hidden;
+  height: 1px !important;
+  overflow: hidden !important;
+  // stylelint-enable declaration-no-important
 }
 
 

src/sass/components/_forms.scss

@@ -7,6 +7,15 @@ form {
     padding: $table-condensed-cell-padding;
   }
 
+  fieldset {
+    > button,
+    > input,
+    > select {
+      margin-right: 5px;
+      margin-bottom: $line-height-computed / 2;
+    }
+  }
+
   label {
     line-height: $input-height-base;
     vertical-align: top;

src/sass/components/_icons.scss

@@ -426,6 +426,7 @@ div.projects h3 {
   &::before {
     width: 1em;
     margin-right: .5em;
+    transform: translateY(-.1em);
     color: $gray-700;
     text-align: center;
   }

src/sass/components/_issue.scss

@@ -670,6 +670,7 @@ span.private {
 
   div.changeset {
     margin-top: $line-height-computed / 2 + 2px * 2;
+    padding: 0;
     overflow: hidden;
     border: 1px solid $issue-border;
     border-radius: $panel-border-radius;

src/sass/components/_responsive.scss

@@ -44,11 +44,14 @@
         }
 
         .drdn-trigger {
+          @include text-overflow;
           display: block;
           height: $responsive-header-height;
           padding: 0;
           background-color: transparent;
           box-shadow: none;
+          font-size: $font-size-large;
+          font-weight: $font-weight-normal;
           line-height: $responsive-header-height;
 
           &::before {
@@ -70,6 +73,7 @@
 
         .drdn-content {
           top: $responsive-header-height;
+          font-size: $font-size-base;
         }
       }
     }
@@ -88,6 +92,10 @@
       background-color: $flyout-menu-bg;
       color: $flyout-menu-text;
 
+      .search-magnifier {
+        left: 18px;
+      }
+
       &__search {
         height: $responsive-header-height;
         padding: ($padding-side / 2);
@@ -99,11 +107,27 @@
         }
       }
 
+      &__avatar {
+        img.gravatar {
+          top: 0;
+        }
+      }
+
       a {
         &,
         &:hover,
         &:focus {
           color: $flyout-menu-link;
+
+          &::before,
+          span {
+            color: inherit !important; // stylelint-disable-line declaration-no-important
+          }
+        }
+
+        &.selected {
+          background-color: $flyout-menu-link-active-bg;
+          color: $flyout-menu-link-active;
         }
       }
 
@@ -118,20 +142,44 @@
         a {
           background-position: 8px center;
 
-          &,
+          &.additionals {
-          &:hover,
+            padding-left: 32px !important; // stylelint-disable-line declaration-no-important
-          &:focus {
+
             &::before {
-              color: $flyout-menu-link;
+              margin-right: $padding-small-vertical;
+              font-size: $fa-font-size-base;
             }
           }
+        }
+      }
 
-          &.selected {
+      #watchers {
-            background-color: $body-bg;
+        .contextual {
-            color: $text-color;
+          padding-top: $line-height-computed / 2;
+          padding-bottom: $line-height-computed / 2;
+        }
 
-            &::before {
+        .watchers {
-              color: $text-color;
+          li {
+            margin: ($line-height-computed / 2) 0 0;
+            padding: 0;
+
+            img.gravatar {
+              top: 0;
+            }
+
+            a {
+              height: auto;
+              border-top: 0;
+              line-height: initial;
+            }
+
+            .delete {
+              flex: 0 0 24px;
+              margin-left: auto;
+              float: none;
+              text-align: center;
+              text-overflow: initial;
             }
           }
         }
@@ -228,9 +276,26 @@
 
       label {
         display: inline-block;
+
+        input[type="checkbox"],
+        input[type="radio"] {
+          margin-top: $check-input-margin-btn-v;
+        }
       }
     }
 
+    #content > .contextual > span {
+      margin-bottom: 0;
+    }
+
+    #content > .contextual > a,
+    #content > .contextual .drdn,
+    p.buttons a {
+      display: inline-block;
+      margin: 0 2px 5px 0;
+      float: none;
+    }
+
     // For Redmine 4.0+
     #content > .contextual .drdn {
       padding: 0;
@@ -243,6 +308,8 @@
       .drdn-items {
         a {
           margin: 3px 0 0;
+          padding-top: $btn-padding-vertical;
+          padding-bottom: $btn-padding-vertical;
 
           &:first-child {
             margin-top: 0;
@@ -265,5 +332,35 @@
         float: none;
       }
     }
+
+    #issue-changesets {
+      div.changeset {
+        padding: 0;
+      }
+    }
+
+    #admin-index > #admin-menu li {
+      padding: 0;
+    }
+  }
+
+  // Tweaks for smartphones, touchscreens
+  @media (hover: none) and (pointer: coarse) {
+    .mobile-toggle-button::after {
+      margin-top: 0;
+    }
+
+    .query-columns {
+      span {
+        display: block;
+        margin-bottom: $line-height-computed / 2;
+      }
+
+      .buttons {
+        input[type="button"] {
+          display: inline-block;
+        }
+      }
+    }
   }
 }

src/sass/components/_simple-list.scss

@@ -105,10 +105,17 @@
   input,
   select {
     margin-right: 5px;
+    margin-bottom: $line-height-computed / 2;
   }
 
   label {
     @include check-inline;
+    line-height: $input-height-base;
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      margin-top: $check-input-margin-btn-v;
+    }
   }
 
   p:last-child {