Release v2.9.1

The sidebar toogler isn't working with newer jquery versions (https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed)

.github/workflows/lint.yml

@@ -0,0 +1,33 @@
+name: Run linters
+
+on:
+  push:
+    paths:
+      - src/*
+      - svg/*
+      - package*.json
+
+jobs:
+  lint:
+    runs-on: ubuntu-18.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - name: Use Node.js 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: "10.x"
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Lint JavaScript
+        run: npm run lint:js
+
+      - name: Lint Sass
+        run: npm run lint:sass
+
+      - name: Check build
+        run: npm run build

.travis.yml

@@ -1,11 +0,0 @@
-dist: xenial
-language: node_js
-node_js:
-  - 10
-cache:
-  directories:
-    - node_modules
-install:
-  - npm install
-script:
-  - npm run lint --silent

Gruntfile.js

@@ -38,7 +38,7 @@ module.exports = function (grunt) {
     postcss: {
       options: {
         processors: [
-          require('autoprefixer')({ browsers: 'last 2 versions' })
+          require('autoprefixer')()
         ]
       },
 

README.md

@@ -2,7 +2,7 @@
 
 A free Redmine theme for modern browsers.
 
-![The MIT License](https://img.shields.io/badge/license-MIT-584492.svg) [![Build Status](https://travis-ci.org/mrliptontea/PurpleMine2.svg?branch=master)](https://travis-ci.org/mrliptontea/PurpleMine2) [![Issues](https://img.shields.io/github/issues/mrliptontea/PurpleMine2.svg)](https://github.com/mrliptontea/PurpleMine2/issues) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
+![The MIT License](https://img.shields.io/badge/license-MIT-584492.svg) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) [![Build Status](https://img.shields.io/endpoint.svg?url=https://actions-badge.atrox.dev/mrliptontea/PurpleMine2/badge&label=lint&logo=none)](https://actions-badge.atrox.dev/mrliptontea/PurpleMine2/goto) [![Issues](https://img.shields.io/github/issues/mrliptontea/PurpleMine2.svg)](https://github.com/mrliptontea/PurpleMine2/issues)
 
 ---
 
@@ -56,6 +56,49 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
 
 ## Changelog
 
+v2.9.1 (2020-02-22):
+
+* Merged fix #155: $.load function removed from jQuery.
+* Fixed badge positioning in roadmap screen.
+
+v2.9.0 (2020-01-30):
+
+* 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.
+
+v2.7.0 (2019-06-13):
+
+* Resolved #124: added support for [issue-id](http://projects.andriylesyuk.com/projects/issue-id/) plugin.
+
+v2.6.0 (2019-06-13):
+
+* Resolved #121: added support for [redmine_wiki_page_tree](https://github.com/ledsun/redmine_wiki_page_tree) plugin.
+
+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.

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "PurpleMine2",
+  "name": "purplemine",
   "description": "A free Redmine 2.6+ theme written in SCSS",
   "keywords": [
     "redmine",
@@ -25,20 +25,20 @@
     "lint": "npm run -S lint:js && npm run -S lint:sass"
   },
   "dependencies": {
-    "autoprefixer": "^9.4.10",
+    "autoprefixer": "^9.7.4",
-    "grunt": "^1.0.3",
+    "grunt": "^1.0.4",
-    "grunt-contrib-uglify": "^4.0.0",
+    "grunt-contrib-uglify": "^4.0.1",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-postcss": "^0.9.0",
-    "grunt-sass": "^3.0.2",
+    "grunt-sass": "^3.1.0",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.13.1",
-    "sass-inline-svg": "^1.2.0"
+    "sass-inline-svg": "^1.2.3"
   },
   "devDependencies": {
-    "standard": "^12.0.1",
+    "standard": "^13.1.0",
-    "stylelint": "^10.0.1",
+    "stylelint": "^10.1.0",
-    "stylelint-order": "^3.0.0",
+    "stylelint-order": "^3.1.1",
-    "stylelint-scss": "^3.6.1"
+    "stylelint-scss": "^3.14.2"
   },
   "standard": {
     "globals": [
@@ -48,5 +48,10 @@
     "ignore": [
       "/javascripts"
     ]
-  }
+  },
+  "browserslist": [
+    "last 2 versions",
+    "> 1%",
+    "not dead"
+  ]
 }

plugins/redmine_backlogs/jquery/jquery.multiselect.css

@@ -1 +1 @@
-.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{-webkit-box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);display:none;position:absolute;z-index:10000;padding:3px;text-align:left}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #dadce7;font-weight:600;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}
+.ui-multiselect{padding:2px 0 2px 4px;text-align:left}.ui-multiselect span.ui-icon{float:right}.ui-multiselect-single .ui-multiselect-checkboxes input{position:absolute !important;top:auto !important;left:-9999px}.ui-multiselect-single .ui-multiselect-checkboxes label{padding:5px !important}.ui-multiselect-header{margin-bottom:3px;padding:3px}.ui-multiselect-header ul{font-size:.92em}.ui-multiselect-header ul li{padding:0 10px 0 0;float:left}.ui-multiselect-header a{text-decoration:none}.ui-multiselect-header a:hover{text-decoration:underline}.ui-multiselect-header span.ui-icon{float:left}.ui-multiselect-header li.ui-multiselect-close{padding-right:0;float:right;text-align:right}.ui-multiselect-menu{box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);display:none;position:absolute;z-index:10000;padding:3px;text-align:left}.ui-multiselect-checkboxes{position:relative;padding-right:2px;overflow-y:scroll}.ui-multiselect-checkboxes input[type="checkbox"]{top:0;margin:3px 0 0 -20px;float:left}.ui-multiselect-checkboxes label{display:block;padding:3px 1px;padding-left:26px;border:1px solid transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui-multiselect-checkboxes label input{position:relative;top:1px}.ui-multiselect-checkboxes li{clear:both;font-size:.92em}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label{margin-bottom:2px;border-bottom:1px solid #dadce7;font-weight:600;text-align:center}.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a{display:block;margin:1px 0;padding:3px;text-decoration:none}* html .ui-multiselect-checkboxes label{border:0 none}

plugins/redmine_backlogs/jquery/jquery.qtip.css

@@ -1 +1 @@
-.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{-webkit-box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);position:relative;padding:10px;overflow:hidden;border:1px solid #d1d3e0;background-color:#fff;color:#3e425a;font-size:.92em;text-align:left;word-wrap:break-word}.ui-tooltip-tip{position:absolute;z-index:10;margin:0 auto;overflow:hidden;border:0 none;border-color:#d1d3e0;background:transparent;background-color:#fff}
+.qtip{position:absolute;top:-31000px;left:-31000px;width:auto;max-width:500px;outline:none}.ui-tooltip-content{box-shadow:0 5px 8px -2px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.3);position:relative;padding:10px;overflow:hidden;border:1px solid #d1d3e0;background-color:#fff;color:#3e425a;font-size:.92em;text-align:left;word-wrap:break-word}.ui-tooltip-tip{position:absolute;z-index:10;margin:0 auto;overflow:hidden;border:0 none;border-color:#d1d3e0;background:transparent;background-color:#fff}

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/javascripts/modules/MenuCollapse.js

@@ -47,6 +47,7 @@ PurpleMine.MenuCollapse = (function () {
     }
 
     for (var menu in this.menus) {
+      // eslint-disable-next-line no-prototype-builtins
       if (this.menus.hasOwnProperty(menu) && this.menus[menu].$el.length > 0) {
         handleMenu(menu)
       }

src/javascripts/modules/RevisionGraph.js

@@ -52,6 +52,7 @@ PurpleMine.RevisionGraph = function (holder, commitsHash, graphSpace) {
   var revisionDotOverlay
 
   $.each(commits, function (index, commit) {
+    // eslint-disable-next-line no-prototype-builtins
     if (!commit.hasOwnProperty('space')) {
       commit.space = 0
     }
@@ -72,6 +73,7 @@ PurpleMine.RevisionGraph = function (holder, commitsHash, graphSpace) {
       parentCommit = commitsByScmid[parentScmid]
 
       if (parentCommit) {
+        // eslint-disable-next-line no-prototype-builtins
         if (!parentCommit.hasOwnProperty('space')) {
           parentCommit.space = 0
         }

src/javascripts/modules/SidebarToggler.js

@@ -44,7 +44,7 @@ PurpleMine.SidebarToggler = (function () {
 
     // Fix issue with context menu position
     if (this.$main.css('position') === 'relative') {
-      $(window).load(function () {
+      $(window).on('load', function () {
         $('#context-menu').appendTo('#wrapper3')
       })
     }

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;
@@ -481,13 +488,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;
@@ -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;
@@ -646,6 +654,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/_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;
@@ -168,6 +189,8 @@
 
         @if $sidebar-position == "right" {
           margin-left: 3px;
+        } @else {
+          margin-right: 0;
         }
 
         li {
@@ -184,10 +207,6 @@
             margin-left: $sidebar-padding-horizontal / 2 + 3px;
           }
         }
-
-        @if $sidebar-position == "left" {
-          margin-right: 0;
-        }
       }
     }
   }
@@ -203,6 +222,110 @@
       margin-left: 0;
     }
   }
+
+  // For plugin https://github.com/ledsun/redmine_wiki_page_tree
+  div.page-tree {
+    margin: 0;
+    padding: 0;
+
+    .page-tree__title {
+      margin-left: 0;
+    }
+
+    .page-tree__list {
+      .page-tree__list {
+        margin-left: $sidebar-padding-horizontal + 3px;
+        border-left: 2px solid $gray-400;
+
+        @if $sidebar-position == "right" {
+          margin-left: 3px;
+        } @else {
+          margin-right: 0;
+        }
+
+        .page-tree__list {
+          margin-left: $sidebar-padding-horizontal / 2 + 3px;
+        }
+
+        summary {
+          padding-left: $sidebar-padding-horizontal + 8px;
+
+          @if $sidebar-position == "right" {
+            margin-left: 0;
+          }
+
+          &::before {
+            left: 6px;
+          }
+        }
+      }
+
+      li {
+        > a:not(.icon-only) {
+          padding-right: $sidebar-padding-horizontal / 2;
+          padding-left: $sidebar-padding-horizontal / 2;
+
+          @if $sidebar-position == "right" {
+            margin-left: 0;
+          }
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    details {
+      summary {
+        display: block;
+        position: relative;
+        padding: 0 $sidebar-padding-horizontal;
+        padding-left: $sidebar-padding-horizontal * 1.5 + 8px;
+
+        @if $sidebar-position == "left" {
+          border-radius: $border-radius-large 0 0 $border-radius-large;
+        } @else {
+          margin-left: -($sidebar-padding-horizontal);
+          border-radius: 0 $border-radius-large $border-radius-large 0;
+        }
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: ($sidebar-padding-vertical + 1px) + ($line-height-computed - 16px) / 2;
+          left: $sidebar-padding-horizontal / 2 + 6px;
+          width: 16px;
+          height: 16px;
+          background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
+          background-repeat: no-repeat;
+        }
+
+        &:hover {
+          background-color: $sidebar-link-hover-bg;
+        }
+
+        a {
+          display: inline-block;
+          padding-top: ($sidebar-padding-vertical + 1px);
+          padding-bottom: ($sidebar-padding-vertical + 1px);
+
+          &:hover {
+            color: $sidebar-link-hover-text;
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &[open] > summary::before {
+        transform: rotate(90deg);
+      }
+    }
+  }
 }
 
 #footer {

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,19 +98,36 @@ 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
 }
 
+img {
+  image-orientation: from-image;
+}
+
+.filecontent-container {
+  position: relative;
+  min-height: 200px;
+  margin-bottom: 20px;
+}
+.filecontent-container > .filecontent {
+  position: absolute;
+  max-width: 100%;
+  max-height: 100%;
+}
 
 //== Responsive autoscroll
 //
 
 .autoscroll {
+  position: relative;
   margin-bottom: $line-height-computed;
   overflow-x: auto;
 }
@@ -563,12 +580,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 +609,20 @@ div#roadmap {
     }
   }
 
+  header {
+    display: block;
+
+    > h3 {
+      display: inline-block;
+    }
+  }
+
+  header > h3,
+  h3.version {
+    margin-bottom: 0;
+    padding-right: 0;
+  }
+
   .wiki {
     h1 {
       &:first-child {
@@ -750,6 +791,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 {
@@ -902,6 +948,7 @@ div.table-list.boards {
   background: $body-bg;
   color: $panel-color;
   font-family: $font-family-monospace;
+  white-space: pre-wrap;
 }
 
 .diff_out {
@@ -920,6 +967,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;
@@ -367,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
 //
@@ -708,6 +729,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: 1px solid $gray-500;
-  border-left-width: 0;
   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,17 @@ 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; }
+.icon-clear-query::before           { content: $fa-var-times; }
+.icon-import::before                { content: $fa-var-cloud-upload; }
 
 //== Checkbox toggler
 //
@@ -240,6 +250,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 +428,7 @@ div.projects h3 {
   &::before {
     width: 1em;
     margin-right: .5em;
+    transform: translateY(-.1em);
     color: $gray-700;
     text-align: center;
   }
@@ -522,6 +549,11 @@ dt {
 
 .sort {
   @extend %fa-icon-after;
+  padding-left: 0;
+
+  &::before {
+    content: none;
+  }
 
   &::after {
     margin-left: .2em;
@@ -580,7 +612,8 @@ em.info.error {
   }
 }
 
-.message .contextual {
+.message {
+  .contextual {
     a {
       @extend %fa-icon;
       opacity: .7;
@@ -590,6 +623,14 @@ em.info.error {
         opacity: 1;
       }
 
+      img {
+        display: none;
+      }
+    }
+  }
+
+  > .contextual {
+    a {
       &:nth-child(1) {
         &::before {
           content: $fa-var-comment;
@@ -607,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;
 
@@ -670,6 +689,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

@@ -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;
 
@@ -50,13 +50,17 @@ table.list {
     }
 
     &.id,
+    &.issue_id,
+    &.legacy_id,
     &.parent,
     &.relations,
     &.tracker {
       width: 2%;
     }
 
-    &.id {
+    &.id,
+    &.issue_id,
+    &.legacy_id {
       font-weight: $font-weight-bold;
     }
 
@@ -81,10 +85,6 @@ table.list {
       }
     }
 
-    &.id {
-      text-align: right;
-    }
-
     &.activity,
     &.assigned_to,
     &.attachments,
@@ -108,6 +108,8 @@ table.list {
       text-align: left;
     }
 
+    &.id,
+    &.legacy_id,
     &.estimated_hours,
     &.float,
     &.int,
@@ -211,6 +213,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 +226,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 +251,6 @@ tr.issue {
         overflow: auto;
       }
     }
-
-    pre {
-      white-space: normal;
-    }
   }
 }
 
@@ -263,6 +278,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;
 }
@@ -351,6 +386,8 @@ tr.entry {
 
 @if $color-trackers {
   tr.issue .id > a,
+  tr.issue .issue_id > a,
+  tr.issue .legacy_id > a,
   a.issue,
   .relations > span > a.issue,
   .parent > a.issue {
@@ -399,7 +436,8 @@ tr.entry {
     }
   }
 
-  tr.issue .id > a {
+  tr.issue .id > a,
+  tr.issue .legacy_id > a {
     display: block;
     padding: $tracker-list-padding;
 
@@ -409,6 +447,11 @@ tr.entry {
     }
   }
 
+  tr.issue .issue_id > a {
+    display: inline-block;
+    padding: $tracker-list-padding;
+  }
+
   @each $tracker-id, $tracker-colors in $tracker-colors-map {
     @include tracker(
       ".tracker-#{$tracker-id}",
@@ -442,18 +485,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/_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/_progress.scss

@@ -60,8 +60,6 @@ p {
   }
 
   &.progress-info {
-    margin-top: -4px;
-    margin-bottom: 0;
     clear: left;
     color: $gray-700;
     font-size: 80%;

src/sass/components/_responsive.scss

@@ -1,3 +1,8 @@
+.hidden,
+.mobile-show {
+  display: none;
+}
+
 // stylelint-disable selector-max-compound-selectors
 .theme-Purplemine2 {
   @media screen and (max-width: $redmine-responsive-max) {
@@ -40,11 +45,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,10 +74,15 @@
 
         .drdn-content {
           top: $responsive-header-height;
+          font-size: $font-size-base;
         }
       }
     }
 
+    #content {
+      overflow: auto;
+    }
+
     .mobile-toggle-button {
       width: $responsive-header-height;
       height: $responsive-header-height;
@@ -84,6 +97,10 @@
       background-color: $flyout-menu-bg;
       color: $flyout-menu-text;
 
+      .search-magnifier {
+        left: 18px;
+      }
+
       &__search {
         height: $responsive-header-height;
         padding: ($padding-side / 2);
@@ -95,39 +112,153 @@
         }
       }
 
+      &__avatar {
+        img.gravatar {
+          top: 0;
+        }
+      }
+
+      &__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,
         &:focus {
           color: $flyout-menu-link;
+
+          &::before,
+          span {
+            color: inherit !important; // stylelint-disable-line declaration-no-important
           }
         }
 
-      h3 {
+        &.selected {
+          background-color: $flyout-menu-link-active-bg;
+          color: $flyout-menu-link-active;
+        }
+      }
+
+      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 {
         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;
             }
           }
         }
@@ -224,8 +355,25 @@
 
       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 {
@@ -239,6 +387,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 +411,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/_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

@@ -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 {
@@ -224,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;
@@ -353,6 +351,16 @@ p.footnote {
   }
 }
 
+.ltr,
+.wiki-class-ltr {
+  direction: ltr;
+}
+
+.rtl,
+.wiki-class-rtl {
+  direction: rtl;
+}
+
 .preview {
   margin-top: $line-height-computed;
   padding: $padding-wiki;

src/sass/mixins/_issues.scss

@@ -27,6 +27,7 @@
 
 @mixin tracker($parent, $background, $color) {
   tr#{$parent} .id > a,
+  tr#{$parent} .issue_id > a,
   a#{$parent},
   .relations > span > a#{$parent},
   .parent > a#{$parent} {