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

3 files changed, 62 insertions, 30 deletions

diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index e866b505a..c1b5d580d 100644
--- a/public/javascripts/application.js
+++ b/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();
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 632501ea0..da75c54fe 100644
--- a/public/stylesheets/application.css
+++ b/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;}
diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
index bf692bbe2..7abb45812 100644
--- a/public/stylesheets/responsive.css
+++ b/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%; }
 }