Merge pull request #6897 from opf/fix/filter-alignment

[29126] Advanced filters alignment

app/assets/stylesheets/content/_advanced_filters.sass

@@ -28,7 +28,7 @@
 
 .advanced-filters--container
   @extend %filters--container
-  padding: rem-calc(10px)
+  padding: 1rem
   max-height: 50vh
   overflow-y: auto
   position: relative
@@ -47,11 +47,11 @@
   list-style-type:  none
   margin:           20px 0 0 0
 
-  > li
+  > li:not(.advanced-filters--controls)
     display: grid
     // Filters will not span the whole width,
     // but have an orientation to the left side
-    grid-template-columns: 20% 20% 25%
+    grid-template-columns: 20% 20% 25% 50px
     grid-gap: 10px
     align-items: center
     margin-bottom: 10px
@@ -89,7 +89,6 @@
   @extend .advanced-filters--affix, .tooltip--right
 
 .advanced-filters--remove-filter
-  grid-column: -1
   text-align: right
 
   a
@@ -129,9 +128,15 @@ fieldset#date-range p
       grid-gap: 0 10px
 
     .advanced-filters--filter-name,
-    .advanced-filters--add-filter-label
+    .advanced-filters--add-filter-label,
+    .advanced-filters--add-filter-value
+      // Span over entire width
       grid-column: 1 / -1
 
+    .advanced-filters--remove-filter
+      // Align at the end of the container
+      grid-column: -1
+
     .advanced-filters--filter-operator,
     .advanced-filters--filter-value
       grid-column: span 2

app/assets/stylesheets/content/_projects_list.sass

@@ -80,10 +80,7 @@ form.project-filters
         max-width: 10rem
 
   .advanced-filters--controls
-    margin-left: 1rem
-    margin-right: 1rem
     margin-top: 1rem
-  margin-bottom: 1rem
 
 .projects-table--hierarchy-icon
   display: none

app/assets/stylesheets/content/_simple_filters.sass

@@ -80,7 +80,7 @@ $filters--border-color: $gray !default
 
   .simple-filters--controls
     grid-column: 1 / -1
-    margin-top: 10px
+    margin-top: 1rem
 
   .simple-filters--filter-name
     @include text-shortener

app/views/projects/filters/_form.html.erb

@@ -88,7 +88,7 @@
         <% end %>
       </li>
       <li class="advanced-filters--controls">
-        <%= submit_tag t('button_apply'), class: 'button -highlight', name: nil %>
+        <%= submit_tag t('button_apply'), class: 'button -small -highlight', name: nil %>
       </li>
     </ul>
   </fieldset>