Release v2.5.0

Improvements for responsive layout

README.md

@@ -56,6 +56,19 @@ 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.
+* Fixed #115: color overdue date in issue lists.
+
+v2.3.1 (2019-05-09):
+
+* Fixed #112: improved highlight contrast in text diffs.
+
 v2.3.0 (2019-05-09):
 
 * Fixed #107: nested lists in the sidebar via [Additionals](https://www.redmine.org/plugins/additionals) plugin.

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:       $white !default;
-$flyout-menu-header-bg:         shade($header-bg, 900) !default;
-$flyout-menu-header-border:     shade($header-bg, 900) !default;
+$flyout-menu-link-active-bg:    shade($header-bg, 50) !default;
+$flyout-menu-link-active:       $text-color !default;
+$flyout-menu-header-bg:         shade($header-bg, 800) !default;
+$flyout-menu-header-border:     shade($header-bg, 800) !default;
 $flyout-menu-header-text:       $white !default;
 
 $quick-search-width:            200px !default;
@@ -646,6 +646,17 @@ $bubble-padding-vertical:       8px !default;
 $bubble-padding-horizontal:     15px !default;
 
 
+//== Badges
+//
+
+$badge-space:                   2px !default;
+$badge-padding-v:               0 !default;
+$badge-padding-h:               5px !default;
+$badge-border-radius:           $border-radius-base !default;
+$badge-font-size:               $font-size-small !default;
+$badge-font-weight:             $font-weight-bold !default;
+
+
 //== Media queries breakpoints
 //
 

src/sass/application.scss

@@ -9,6 +9,7 @@
 //
 
 @import "components/base";
+@import "components/badges";
 @import "components/buttons";
 @import "components/forms";
 @import "components/tabs";

src/sass/components/_badges.scss

@@ -0,0 +1,54 @@
+tr.group .count,
+span.private,
+.badge {
+  display: inline-block;
+  position: relative;
+  top: -1px;
+  box-sizing: border-box;
+  min-width: 1em;
+  margin-right: $badge-space;
+  margin-left: $badge-space;
+  padding: $badge-padding-v $badge-padding-h;
+  border: 1px solid;
+  border-radius: $badge-border-radius;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+span.private,
+.badge-private {
+  padding: ($badge-padding-v + 1px) ($badge-padding-h + 1px);
+  border: 0;
+  background: $brand-warning;
+  color: $brand-text;
+
+  h3 & {
+    font-size: $font-size-small-px;
+  }
+}
+
+tr.group .count,
+.badge-count {
+  padding: ($badge-padding-v + 1px) ($badge-padding-h + 1px);
+  border: 0;
+  background: $brand-primary;
+  color: $brand-text;
+}
+
+.badge-status-open {
+  border-color: $blue;
+  color: $blue;
+}
+
+.badge-status-locked {
+  border-color: $gray-600;
+  color: $gray-600;
+}
+
+.badge-status-closed {
+  border-color: $green;
+  color: $green;
+}

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/_calendar.scss

@@ -45,6 +45,10 @@ table.cal {
       color: $gray-600;
     }
 
+    &.nwday {
+      background: $table-bg-accent;
+    }
+
     &.today {
       background: $highlight-bg;
 

src/sass/components/_dropdown.scss

@@ -55,10 +55,11 @@
       }
     }
 
-    > a,
-    > span {
+    > * {
       display: block;
-      padding: $btn-padding-vertical $btn-padding-horizontal-small;
+      margin: 1px;
+      padding: ($btn-padding-vertical - 1px) ($btn-padding-horizontal-small - 1px);
+      border-radius: $border-radius-base - 1px;
 
       &.icon {
         padding-left: 20px + $btn-padding-horizontal-small;

src/sass/components/_elements.scss

@@ -98,12 +98,14 @@ a.collapsible.collapsed,
 //
 
 .hidden-for-sighted {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+  // stylelint-disable declaration-no-important
+  position: absolute !important;
+  top: auto !important;
+  left: -10000px !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  // stylelint-enable declaration-no-important
 }
 
 
@@ -563,12 +565,22 @@ ul.projects {
 //
 
 div#roadmap {
+  article {
+    margin-bottom: $line-height-computed;
+  }
+
   .related-issues {
     margin-bottom: $line-height-computed;
 
     td.checkbox {
       display: none;
     }
+
+    td.assigned_to {
+      width: 1px;
+      padding-right: 0;
+      white-space: nowrap;
+    }
   }
 
   table.progress {
@@ -582,6 +594,12 @@ div#roadmap {
     }
   }
 
+  h2,
+  h3 {
+    display: inline;
+    padding-right: 0;
+  }
+
   .wiki {
     h1 {
       &:first-child {
@@ -920,6 +938,16 @@ div.table-list.boards {
   }
 }
 
+.text-diff {
+  .diff_out {
+    background: $diff-out-bg;
+  }
+
+  .diff_in {
+    background: $diff-in-bg;
+  }
+}
+
 
 //== Repository view
 //

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;
@@ -26,6 +35,11 @@ form {
     }
   }
 
+  .add-filter label,
+  .filter label {
+    line-height: $input-height-base;
+  }
+
   .contextual > & {
     display: inline-block;
     line-height: $input-height-base;
@@ -708,6 +722,13 @@ fieldset#filters {
   }
 }
 
+.query_sort_criteria_count {
+  display: inline-block;
+  min-width: 1em;
+  margin-bottom: $line-height-computed / 4;
+  line-height: $input-height-base;
+}
+
 
 //== Reset label style for trackers selector in custom field editor
 //

src/sass/components/_gantt.scss

@@ -2,25 +2,109 @@
 // Gantt chart
 // --------------------------------------------------
 
+div.gantt_content {
+  overflow: auto;
+}
+
+.controller-gantts form + table,
+table.gantt-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  td {
+    padding: 0;
+    vertical-align: top;
+  }
+}
+
 .gantt_hdr {
   position: absolute;
   top: 0;
   height: 16px;
   overflow: hidden;
-  border: 1px solid $gray-400;
-  border-left-width: 0;
+  border: 1px solid $gray-500;
   text-align: center;
 
+  &[style*="background"] {
+    background: $gray-200 !important; // stylelint-disable-line declaration-no-important
+  }
+
   &.nwday {
-    background-color: $gray-100;
+    background-color: $gray-200;
+    color: $gray-950;
+  }
+
+  #gantt_area & {
+    border-right-width: 1px;
+    border-left-width: 0;
+  }
+
+  .gantt_subjects_container:not(.draw_selected_columns) &,
+  .last_gantt_selected_column & {
+    z-index: 1;
+  }
+}
+
+.gantt_subjects_container .gantt_subjects {
+  z-index: 2;
+}
+
+.gantt_subjects_column {
+  .gantt_hdr {
+    border-left: 1px solid $gray-500 !important; // stylelint-disable-line declaration-no-important
   }
 }
 
 .gantt_subjects {
-  font-size: $font-size-small;
+  .issue-subject {
+    &:hover {
+      background-color: $table-bg-hover;
+    }
 
+    img.icon-gravatar {
+      float: none;
+    }
+  }
+}
+
+.gantt_hdr_selected_column_name {
+  @include text-overflow;
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  transform: translateY(-50%);
+  font-size: $font-size-small;
+}
+
+td.gantt_selected_column {
+  width: 60px;
+}
+
+td.gantt_selected_column .gantt_hdr,
+.gantt_selected_column_container {
+  width: 60px - 1px;
+  border-left-width: 0;
+}
+
+.gantt_subjects {
+  position: relative;
+  z-index: 1;
+  font-size: $font-size-small;
+}
+
+.gantt_selected_column_content {
+  div {
+    box-sizing: border-box;
+    padding-right: $table-condensed-cell-padding;
+    padding-left: $table-condensed-cell-padding;
+  }
+}
+
+.gantt_subjects,
+.gantt_selected_column_content {
   div {
     @include text-overflow;
+    width: 100%;
     height: 16px;
     line-height: 16px;
   }
@@ -118,12 +202,20 @@
 .version-behind-schedule,
 .issue-behind-schedule {
   color: $brand-warning;
+
+  .context-menu-selection & {
+    color: $brand-text;
+  }
 }
 
 .version-overdue,
 .issue-overdue,
 .project-overdue {
   color: $brand-danger;
+
+  .context-menu-selection & {
+    color: $brand-text;
+  }
 }
 
 

src/sass/components/_icons.scss

@@ -152,7 +152,15 @@ table.list .buttons > a::before {
 .icon-add-bullet::before            { content: $fa-var-plus-circle; }
 .icon-shared::before                { content: $fa-var-link; }
 .icon-actions::before               { content: $fa-var-ellipsis-h; }
-
+.icon-sort-handle::before           { content: $fa-var-arrows-v; }
+.icon-expended::before              { content: $fa-var-chevron-down; }
+.icon-collapsed::before             { content: $fa-var-chevron-right; }
+.icon-bookmark::before              { content: $fa-var-bookmark; }
+.icon-bookmark-off::before          { content: $fa-var-bookmark-o; }
+.icon-sorted-asc::before            { content: $fa-var-sort-amount-asc; }
+.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; }
 
 //== Checkbox toggler
 //
@@ -240,6 +248,22 @@ a.icon-del {
   }
 }
 
+.icon-expended,
+.icon-collapsed {
+  &::before {
+    width: 1em;
+    text-align: center;
+  }
+
+  &.icon {
+    padding-left: 20px;
+  }
+
+  &.expander {
+    background-image: none;
+  }
+}
+
 
 //== Administration menu sections
 //
@@ -402,6 +426,7 @@ div.projects h3 {
   &::before {
     width: 1em;
     margin-right: .5em;
+    transform: translateY(-.1em);
     color: $gray-700;
     text-align: center;
   }
@@ -522,6 +547,11 @@ dt {
 
 .sort {
   @extend %fa-icon-after;
+  padding-left: 0;
+
+  &::before {
+    content: none;
+  }
 
   &::after {
     margin-left: .2em;

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/_list.scss

@@ -211,6 +211,10 @@ tr.issue {
     background-repeat: no-repeat;
   }
 
+  &.overdue td.due_date {
+    color: $brand-danger;
+  }
+
   @for $i from 1 through 9 {
     &.idnt-#{$i} td.subject {
       padding-left: $table-cell-padding + 16px * $i;
@@ -220,10 +224,23 @@ tr.issue {
 }
 
 .issues {
+  .block_column,
   .description,
   .last_notes {
-    padding: $table-cell-padding;
+    padding: 0;
     text-align: left;
+    white-space: normal;
+
+    > span {
+      display: block;
+      margin-bottom: $line-height-computed / 4;
+      padding: $table-cell-padding;
+      font-weight: $font-weight-bold;
+    }
+
+    pre {
+      white-space: normal;
+    }
 
     @media screen and (min-width: $screen-sm-min) {
       > .wiki {
@@ -232,10 +249,6 @@ tr.issue {
         overflow: auto;
       }
     }
-
-    pre {
-      white-space: normal;
-    }
   }
 }
 
@@ -263,6 +276,26 @@ td.center {
   table-layout: fixed;
 }
 
+.issue-report-graph {
+  width: 75%;
+  margin: $line-height-computed auto;
+}
+
+.sample-data {
+  margin: $line-height-computed / 2;
+  margin-bottom: $line-height-computed;
+  border: 1px solid $table-border-color;
+
+  td {
+    border: 1px solid $table-border-color;
+  }
+
+  tr:first-child td {
+    font-weight: $font-weight-bold;
+    text-align: center;
+  }
+}
+
 tr.builtin td.name {
   font-style: italic;
 }
@@ -442,18 +475,6 @@ tr.group {
   &:hover .toggle-all {
     display: inline;
   }
-
-  .count {
-    display: inline-block;
-    min-width: 1em;
-    margin: 0 5px;
-    padding: 1px 4px;
-    border-radius: $border-radius-small;
-    background-color: $brand-primary;
-    color: $brand-text;
-    font-size: $font-size-small;
-    text-align: center;
-  }
 }
 
 .toggle-all:hover {

src/sass/components/_responsive.scss

@@ -1,3 +1,7 @@
+.mobile-show {
+  display: none;
+}
+
 // stylelint-disable selector-max-compound-selectors
 .theme-Purplemine2 {
   @media screen and (max-width: $redmine-responsive-max) {
@@ -40,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 {
@@ -66,6 +73,7 @@
 
         .drdn-content {
           top: $responsive-header-height;
+          font-size: $font-size-base;
         }
       }
     }
@@ -84,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);
@@ -95,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;
         }
       }
 
@@ -114,20 +142,44 @@
         a {
           background-position: 8px center;
 
-          &,
-          &:hover,
-          &:focus {
+          &.additionals {
+            padding-left: 32px !important; // stylelint-disable-line declaration-no-important
+
             &::before {
-              color: $flyout-menu-link;
+              margin-right: $padding-small-vertical;
+              font-size: $fa-font-size-base;
             }
           }
+        }
+      }
 
-          &.selected {
-            background-color: $body-bg;
-            color: $text-color;
+      #watchers {
+        .contextual {
+          padding-top: $line-height-computed / 2;
+          padding-bottom: $line-height-computed / 2;
+        }
 
-            &::before {
-              color: $text-color;
+        .watchers {
+          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;
             }
           }
         }
@@ -224,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;
@@ -239,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;
@@ -261,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 {

src/sass/components/_wiki.scss

@@ -179,7 +179,8 @@ div.wiki {
     border: 1px solid $table-border-color;
   }
 
-  .noborder {
+  .noborder,
+  .wiki-class-noborder {
     border: 0 none;
 
     td,
@@ -195,7 +196,7 @@ div.wiki {
   code {
     padding: .2em .33em;
     border-radius: $border-radius-base;
-    background-color: rgba($black, .04);
+    background-color: rgba($gray-500, .3);
     font-size: $font-size-small;
   }
 
@@ -205,9 +206,9 @@ div.wiki {
     padding: 4px 8px;
     overflow-x: auto;
     overflow-y: hidden;
-    border: 1px solid rgba($black, .068);
+    border: 1px solid rgba($gray-500, .45);
     border-radius: $border-radius-base;
-    background-color: rgba($black, .03);
+    background-color: rgba($gray-500, .15);
     font-size: $font-size-small;
 
     code {
@@ -353,6 +354,16 @@ p.footnote {
   }
 }
 
+.ltr,
+.wiki-class-ltr {
+  direction: ltr;
+}
+
+.rtl,
+.wiki-class-rtl {
+  direction: rtl;
+}
+
 .preview {
   margin-top: $line-height-computed;
   padding: $padding-wiki;