From: Jean-Philippe Lang <jp_lang@yahoo.fr>
Date: Wed, 12 Jul 2017 18:17:48 +0000 (+0000)
Subject: Render columns selection using spans instead of a table.
X-Git-Tag: 4.0.0~628
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=081e8a89322a08c93cfaa7b199ae14657c1c0e62;p=redmine.git

Render columns selection using spans instead of a table.

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

diff --git a/app/views/queries/_columns.html.erb b/app/views/queries/_columns.html.erb
index 26a460780..84d166378 100644
--- a/app/views/queries/_columns.html.erb
+++ b/app/views/queries/_columns.html.erb
@@ -2,40 +2,36 @@
 <% available_tag_id = "available_#{tag_id}" %>
 <% selected_tag_id = "selected_#{tag_id}" %>
 
-<table class="query-columns">
-  <tr>
-    <td style="padding-left:0">
+<span class="query-columns">
+  <span>
       <%= label_tag available_tag_id, l(:description_available_columns) %>
-      <br />
       <%= select_tag 'available_columns',
               options_for_select(query_available_inline_columns_options(query)),
               :id => available_tag_id,
               :multiple => true, :size => 10, :style => "width:150px",
               :ondblclick => "moveOptions(this.form.#{available_tag_id}, this.form.#{selected_tag_id});" %>
-    </td>
-    <td class="buttons">
+  </span>
+  <span class="buttons">
       <input type="button" value="&#8594;"
-       onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);" /><br />
+       onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);" />
       <input type="button" value="&#8592;"
        onclick="moveOptions(this.form.<%= selected_tag_id %>, this.form.<%= available_tag_id %>);" />
-    </td>
-    <td>
+  </span>
+  <span>
       <%= label_tag selected_tag_id, l(:description_selected_columns) %>
-      <br />
       <%= select_tag tag_name,
               options_for_select(query_selected_inline_columns_options(query)),
               :id => selected_tag_id,
               :multiple => true, :size => 10, :style => "width:150px",
               :ondblclick => "moveOptions(this.form.#{selected_tag_id}, this.form.#{available_tag_id});" %>
-    </td>
-    <td class="buttons">
-      <input type="button" value="&#8648;" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);" /><br />
-      <input type="button" value="&#8593;" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);" /><br />
-      <input type="button" value="&#8595;" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);" /><br />
+  </span>
+  <span 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 %>);" />
-    </td>
-  </tr>
-</table>
+  </span>
+</span>
 
 <%= javascript_tag do %>
 $(document).ready(function(){
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 005dcfef9..9e3e2b46e 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -372,16 +372,19 @@ table.messages td.last_message {text-align:left;}
   min-width: 1em;
 }
 
-table.query-columns {
-  border-collapse: collapse;
-  border: 0;
-}
-
-table.query-columns td.buttons {
+.query-columns>span {
+  display:inline-block;
+  height:100%;
   vertical-align: middle;
-  text-align: center;
 }
-table.query-columns td.buttons input[type=button] {width:35px;}
+.query-columns label {
+  display:block;
+}
+.query-columns .buttons input[type=button] {
+  width:35px;
+  display:block;
+}
+
 .query-totals {text-align:right;}
 .query-totals>span:not(:first-child) {margin-left:0.6em;}
 .query-totals .value {font-weight:bold;}