Improves filter rendering on narrow screens by replacing the layout tables with a flex layout.

(#39806).

Patch by Jens Krämer (@jkraemer).

git-svn-id: https://svn.redmine.org/redmine/trunk@22574 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/views/gantts/show.html.erb

@@ -23,23 +23,23 @@
   <fieldset id="options" class="collapsible collapsed">
     <legend onclick="toggleFieldset(this);" class="icon icon-collapsed"><%= l(:label_options) %></legend>
     <div style="display: none;">
-      <table>
-        <tr>
-          <td>
+      <div>
             <fieldset>
               <legend>
                 <%= l(:field_column_names) %>
               </legend>
+              <div id="list-definition">
+                <div>
               <label for="draw_selected_columns">
-                <%= check_box 'query', 'draw_selected_columns', :id => 'draw_selected_columns', 'data-enables' => 'span.query-columns select, span.query-columns input' %>
+                <%= check_box 'query', 'draw_selected_columns', :id => 'draw_selected_columns', 'data-enables' => '#list-definition .query-columns select, #list-definition .query-columns input' %>
                   <%= l(:label_display) %>
               </label>
+                </div>
+                <div>
               <%= render_query_columns_selection(@query) %>
+                </div>
+              </div>
             </fieldset>
-          </td>
-        </tr>
-        <tr>
-          <td>
             <fieldset>
               <legend><%= l(:label_related_issues) %></legend>
               <label for="draw_relations">
@@ -53,8 +53,6 @@
                 <% end %>
               </label>
             </fieldset>
-          </td>
-          <td>
             <fieldset>
               <legend><%= l(:label_gantt_progress_line) %></legend>
               <label for="draw_progress_line">
@@ -62,9 +60,7 @@
                 <%= l(:label_display) %>
               </label>
             </fieldset>
-          </td>
-        </tr>
-      </table>
+      </div>
     </div>
   </fieldset>
 </div>

app/views/queries/_columns.html.erb

@@ -2,36 +2,34 @@
 <% available_tag_id = "available_#{tag_id}" %>
 <% selected_tag_id = "selected_#{tag_id}" %>
 
-<span class="query-columns">
-  <span>
+<div class="query-columns">
       <%= label_tag available_tag_id, l(:description_available_columns) %>
       <%= select_tag 'available_columns',
               options_for_select(query_available_inline_columns_options(query)),
               :id => available_tag_id,
               :multiple => true, :size => 10,
               :ondblclick => "moveOptions(this.form.#{available_tag_id}, this.form.#{selected_tag_id});" %>
-  </span>
-  <span class="buttons">
+</div>
+<div class="buttons">
       <input type="button" value="&#8594;" class="move-right"
        onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);" />
       <input type="button" value="&#8592;" class="move-left"
        onclick="moveOptions(this.form.<%= selected_tag_id %>, this.form.<%= available_tag_id %>);" />
-  </span>
-  <span>
+</div>
+<div class="query-columns">
       <%= label_tag selected_tag_id, l(:description_selected_columns) %>
       <%= select_tag tag_name,
               options_for_select(query_selected_inline_columns_options(query)),
               :id => selected_tag_id,
               :multiple => true, :size => 10,
               :ondblclick => "moveOptions(this.form.#{selected_tag_id}, this.form.#{available_tag_id});" %>
-  </span>
-  <span class="buttons">
+</div>
+<div class="buttons">
       <input type="button" value="&#8648;" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);" />
       <input type="button" value="&#8593;" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);" />
       <input type="button" value="&#8595;" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);" />
       <input type="button" value="&#8650;" onclick="moveOptionBottom(this.form.<%= selected_tag_id %>);" />
-  </span>
-</span>
+</div>
 
 <%= javascript_tag do %>
 $(document).ready(function(){

app/views/queries/_filters.html.erb

@@ -14,8 +14,8 @@ $(document).ready(function(){
 });
 <% end %>
 
-<table id="filters-table">
-</table>
+<div id="filters-table">
+</div>
 
 <div class="add-filter">
 <%= label_tag('add_filter_select', l(:label_filter_add)) %>

app/views/queries/_query_form.html.erb

@@ -17,36 +17,36 @@
         <div class="hidden">
           <% if @query.available_display_types.size > 1 %>
           <div>
-            <span class="field"><label for='display_type'><%= l(:label_display_type) %></label></span>
+            <div class="field"><label for='display_type'><%= l(:label_display_type) %></label></div>
             <%= available_display_types_tags(@query) %>
           </div>
           <% end %>
-          <table id="list-definition" class="<%= 'hidden' if (@query.display_type != 'list') %>">
+          <div id="list-definition" class="<%= 'hidden' if (@query.display_type != 'list') %>">
           <% if @query.available_columns.any? %>
-            <tr>
-              <td class="field"><%= l(:field_column_names) %></td>
-              <td><%= render_query_columns_selection(@query) %></td>
-            </tr>
+            <div>
+              <div class="field"><%= l(:field_column_names) %></div>
+              <%= render_query_columns_selection(@query) %>
+            </div>
           <% end %>
           <% if @query.groupable_columns.any? %>
-            <tr>
-              <td class="field"><label for='group_by'><%= l(:field_group_by) %></label></td>
-              <td><%= group_by_column_select_tag(@query) %></td>
-            </tr>
+            <div>
+              <div class="field"><label for='group_by'><%= l(:field_group_by) %></label></div>
+              <div><%= group_by_column_select_tag(@query) %></div>
+            </div>
           <% end %>
           <% if @query.available_block_columns.any? %>
-            <tr>
-              <td class="field"><%= l(:button_show) %></td>
-              <td><%= available_block_columns_tags(@query) %></td>
-            </tr>
+            <div>
+              <div class="field"><%= l(:button_show) %></div>
+              <div><%= available_block_columns_tags(@query) %></div>
+            </div>
           <% end %>
           <% if @query.available_totalable_columns.any? %>
-            <tr>
-              <td><%= l(:label_total_plural) %></td>
-              <td><%= available_totalable_columns_tags(@query) %></td>
-            </tr>
+            <div>
+              <div class="field"><%= l(:label_total_plural) %></div>
+              <div><%= available_totalable_columns_tags(@query) %></div>
+            </div>
           <% end %>
-        </table>
+        </div>
       </div>
     </fieldset>
   <% end %>

public/javascripts/application.js

@@ -127,10 +127,10 @@ function initFilters() {
   $('#add_filter_select').change(function() {
     addFilter($(this).val(), '', []);
   });
-  $('#filters-table td.field input[type=checkbox]').each(function() {
+  $('#filters-table .field input[type=checkbox]').each(function() {
     toggleFilter($(this).val());
   });
-  $('#filters-table').on('click', 'td.field input[type=checkbox]', function() {
+  $('#filters-table').on('click', '.field input[type=checkbox]', function() {
     toggleFilter($(this).val());
   });
   $('#filters-table').on('keypress', 'input[type=text]', function(e) {
@@ -177,14 +177,14 @@ function buildFilterRow(field, operator, values) {
   var filterValues = filterOptions['values'];
   var i, select;
 
-  var tr = $('<tr class="filter">').attr('id', 'tr_'+fieldId).html(
-    '<td class="field"><input checked="checked" id="cb_'+fieldId+'" name="f[]" value="'+field+'" type="checkbox"><label for="cb_'+fieldId+'"> '+filterOptions['name']+'</label></td>' +
-    '<td class="operator"><select id="operators_'+fieldId+'" name="op['+field+']"></td>' +
-    '<td class="values"></td>'
+  var tr = $('<div class="filter">').attr('id', 'tr_'+fieldId).html(
+    '<div class="field"><input checked="checked" id="cb_'+fieldId+'" name="f[]" value="'+field+'" type="checkbox"><label for="cb_'+fieldId+'"> '+filterOptions['name']+'</label></div>' +
+    '<div class="operator"><select id="operators_'+fieldId+'" name="op['+field+']"></select></div>' +
+    '<div class="values"></div>'
   );
   filterTable.append(tr);
 
-  select = tr.find('td.operator select');
+  select = tr.find('.operator select');
   for (i = 0; i < operators.length; i++) {
     var option = $('<option>').val(operators[i]).text(operatorLabels[operators[i]]);
     if (operators[i] == operator) { option.prop('selected', true); }
@@ -199,11 +199,11 @@ function buildFilterRow(field, operator, values) {
   case "list_optional_with_history":
   case "list_status":
   case "list_subprojects":
-    tr.find('td.values').append(
+    tr.find('.values').append(
       '<span style="display:none;"><select class="value" id="values_'+fieldId+'_1" name="v['+field+'][]"></select>' +
       ' <span class="toggle-multiselect icon-only '+(values.length > 1 ? 'icon-toggle-minus' : 'icon-toggle-plus')+'">&nbsp;</span></span>'
     );
-    select = tr.find('td.values select');
+    select = tr.find('.values select');
     if (values.length > 1) { select.attr('multiple', true); }
     for (i = 0; i < filterValues.length; i++) {
       var filterValue = filterValues[i];
@@ -225,7 +225,7 @@ function buildFilterRow(field, operator, values) {
     break;
   case "date":
   case "date_past":
-    tr.find('td.values').append(
+    tr.find('.values').append(
       '<span style="display:none;"><input type="date" name="v['+field+'][]" id="values_'+fieldId+'_1" size="10" class="value date_value" /></span>' +
       ' <span style="display:none;"><input type="date" name="v['+field+'][]" id="values_'+fieldId+'_2" size="10" class="value date_value" /></span>' +
       ' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="3" class="value" /> '+labelDayPlural+'</span>'
@@ -237,18 +237,18 @@ function buildFilterRow(field, operator, values) {
   case "string":
   case "text":
   case "search":
-    tr.find('td.values').append(
+    tr.find('.values').append(
       '<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="30" class="value" /></span>'
     );
     $('#values_'+fieldId).val(values[0]);
     break;
   case "relation":
-    tr.find('td.values').append(
+    tr.find('.values').append(
       '<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="6" class="value" /></span>' +
       '<span style="display:none;"><select class="value" name="v['+field+'][]" id="values_'+fieldId+'_1"></select></span>'
     );
     $('#values_'+fieldId).val(values[0]);
-    select = tr.find('td.values select');
+    select = tr.find('.values select');
     for (i = 0; i < filterValues.length; i++) {
       var filterValue = filterValues[i];
       var option = $('<option>');
@@ -260,7 +260,7 @@ function buildFilterRow(field, operator, values) {
   case "integer":
   case "float":
   case "tree":
-    tr.find('td.values').append(
+    tr.find('.values').append(
       '<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_1" size="14" class="value" /></span>' +
       ' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_2" size="14" class="value" /></span>'
     );
@@ -283,7 +283,7 @@ function toggleFilter(field) {
 
 function enableValues(field, indexes) {
   var fieldId = field.replace('.', '_');
-  $('#tr_'+fieldId+' td.values .value').each(function(index) {
+  $('#tr_'+fieldId+' .values .value').each(function(index) {
     if ($.inArray(index, indexes) >= 0) {
       $(this).removeAttr('disabled');
       $(this).parents('span').first().show();

public/stylesheets/application.css

@@ -428,15 +428,25 @@ div.table-list.boards .table-list-cell.name {width: 30%;}
   min-width: 1em;
 }
 
-.query-columns>span {
-  display:inline-block;
-  height:100%;
-  vertical-align: middle;
+/* query form - options */
+#list-definition {
+  margin: 0 15px;
+  width: auto !important;
+}
+#list-definition > div {
+  margin: 6px 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px 10px;
+}
+#list-definition > div .field{
+  width: 160px;
 }
 .query-columns label {
   display:block;
 }
-.query-columns .buttons input[type=button] {
+#list-definition .buttons input[type=button] {
   width:35px;
   display:block;
 }
@@ -449,6 +459,13 @@ div.table-list.boards .table-list-cell.name {width: 30%;}
 .query-totals .value {font-weight:bold;}
 body.controller-timelog .query-totals {margin-top:initial;}
 
+body.controller-gantts fieldset#options > div > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 5px 10px;
+}
+
 td.center {text-align:center;}
 
 #watchers select {width: 95%; display: block;}
@@ -605,16 +622,28 @@ fieldset.collapsible {border-width: 1px 0 0 0;}
 fieldset.collapsible>legend { cursor:pointer; padding-left: 18px; background-position: 4px;}
 
 fieldset#date-range p { margin: 2px 0 2px 0; }
-fieldset#filters table { border-collapse: collapse; }
-fieldset#filters table td { padding: 0; vertical-align: middle; }
-fieldset#filters tr.filter { height: 2.1em; }
-fieldset#filters td.field { width:230px; }
-fieldset#filters td.operator { width:130px; }
-fieldset#filters td.operator select {max-width:140px;}
-fieldset#filters td.values { white-space:nowrap; }
-fieldset#filters td.values select {min-width:130px;}
 
-#filters-table {width:60%; float:left;}
+#query_form_content > fieldset {
+  min-width: 0;
+  width: 100%;
+}
+#filters-table {
+  float:left;
+  width: auto;
+}
+#filters-table .field {
+  width: 230px;
+}
+#filters-table .filter {
+  margin: 5px 0 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 10px;
+}
+#filters-table .filter .operator select {
+  width: 120px;
+}
+
 .add-filter {width:35%; float:right; text-align: right; vertical-align: top;}
 
 #issue_is_private_wrap {float:right; margin-right:1em;}

public/stylesheets/responsive.css

@@ -878,4 +878,7 @@
   .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}
 
   #login-form {width:100%; margin-top:2em;}
+
+  #filters-table .filter .field, #list-definition > div .field { width: 100%; }
+  #filters-table .values { width: auto; max-width: 100%; }
 }