compatibility with Redmine 3.2.0 layout, fixes mrliptontea#21

README.md

@@ -65,6 +65,7 @@ Latest (master):
 * Fixed #19: missing text wrapping for long text custom fields
 * Fixed #20: applied Font Awesome font-family for icons in Time Tracker overview
 * Fixed duplicated pencil icon for Description in issue form in Redmine 3.1.2+
+* Fixed #21: added styling for compatibility with layout changes in Redmine 3.2.0
 
 v1.7.2 (2015-10-12):
 

src/sass/components/_forms.scss

@@ -621,15 +621,26 @@ fieldset#filters {
                 min-width: 130px;
             }
         }
+    }
 
-        &.add-filter {
-            padding-top: $table-condensed-cell-padding * 2;
-            text-align: right;
-            vertical-align: top;
-        }
+    .add-filter {
+        text-align: right;
+    }
+
+    td.add-filter {
+        padding-top: $table-condensed-cell-padding * 2;
+        vertical-align: top;
+    }
+
+    div.add-filter {
+        padding-top: $table-condensed-cell-padding;
     }
 }
 
+#filters-table {
+    float: left;
+}
+
 
 /**
  * Reset label style for trackers selector in custom field editor

src/sass/components/_issue.scss

@@ -22,7 +22,7 @@
                 float: left;
             }
 
-            table img.gravatar {
+            .assigned-to img.gravatar {
                 position: relative;
                 top: -3px;
                 margin-right: 5px;
@@ -128,7 +128,8 @@
     }
 
     @if $color-status {
-        .attributes td.status {
+        .attributes td.status,
+        .attribute.status .value {
             display: inline-block;
             width: auto;
             min-width: 1em;
@@ -143,13 +144,56 @@
             text-transform: uppercase;
         }
 
-        &.status-1 .attributes td.status {
-            background-color: $brand-info;
+        &.status-1 {
+            .attributes td.status,
+            .attribute.status .value {
+                background-color: $brand-info;
+            }
+        }
+
+        &.closed {
+            .attributes td.status,
+            .attribute.status .value {
+                background-color: $brand-danger;
+            }
+        }
+    }
+
+    .splitcontentleft {
+        @media screen and (min-width: $screen-lg-min) {
+            width: auto;
+        }
+    }
+
+    .attribute {
+        @extend %clearfix;
+
+        .label,
+        .value {
+            padding: $issue-attribute-padding-v $issue-attribute-padding-h $issue-attribute-padding-v 0;
         }
 
-        &.closed .attributes td.status {
-            background-color: $brand-danger;
+        .label {
+            width: 25%;
+            float: left;
+
+            @media screen and (min-width: $screen-lg-min) {
+                width: 14em;
+            }
         }
+
+        .value {
+            color: $gray-darkest;
+
+            @media screen and (min-width: $screen-lg-min) {
+                width: auto;
+                min-width: 14em + 16em;
+            }
+        }
+    }
+
+    table.progress {
+        width: 80px;
     }
 
     div.attachments {

src/sass/components/_pagination.scss

@@ -2,17 +2,34 @@
 // Pagination (multiple pages)
 // --------------------------------------------------
 .pagination {
-    .previous,
-    .next,
-    .page {
+    .pages {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin-right: .3em;
+        list-style: none;
+    }
+
+    li > a,
+    li > span,
+    > .previous,
+    > .next,
+    > .page {
         display: inline-block;
         padding: $pagination-padding-vertical $pagination-padding-horizontal;
         border: 1px solid $pagination-border;
         border-radius: $border-radius-base;
         background-color: $pagination-bg;
         color: $pagination-color;
         text-decoration: none;
+        white-space: nowrap;
+    }
 
+    a {
         &:hover,
         &:focus {
             border-color: $pagination-hover-border;
@@ -21,7 +38,8 @@
         }
     }
 
-    .page.current {
+    .page.current,
+    .current > span {
         border-color: $pagination-active-border;
         background-color: $pagination-active-bg;
         color: $pagination-active-color;