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, 29 insertions, 31 deletions

diff --git a/app/views/queries/_columns.html.erb b/app/views/queries/_columns.html.erb
index 18443de57..da3ae2acf 100644
--- a/app/views/queries/_columns.html.erb
+++ b/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(){
diff --git a/app/views/queries/_filters.html.erb b/app/views/queries/_filters.html.erb
index cb95df1c8..42756775a 100644
--- a/app/views/queries/_filters.html.erb
+++ b/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)) %>
diff --git a/app/views/queries/_query_form.html.erb b/app/views/queries/_query_form.html.erb
index 87e455bd6..f60fa7911 100644
--- a/app/views/queries/_query_form.html.erb
+++ b/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 %>