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

4 files changed, 38 insertions, 44 deletions

diff --git a/app/views/gantts/show.html.erb b/app/views/gantts/show.html.erb
index e3bfa02ae..43e430311 100644
--- a/app/views/gantts/show.html.erb
+++ b/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>
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 %>