Render issue attributes using divs instead of a table for responsiveness (#19097).

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

app/helpers/issues_helper.rb

@@ -189,18 +189,18 @@ module IssuesHelper
     end
 
     def to_html
-      html = ''.html_safe
+      content =
-      blank = content_tag('th', '') + content_tag('td', '')
+        content_tag('div', @left.reduce(&:+), :class => 'splitcontentleft') +
-      size.times do |i|
+        content_tag('div', @right.reduce(&:+), :class => 'splitcontentleft')
-        left = @left[i] || blank
+
-        right = @right[i] || blank
+      content_tag('div', content, :class => 'splitcontent')
-        html << content_tag('tr', left + right)
-      end
-      html
     end
 
     def cells(label, text, options={})
-      content_tag('th', label + ":", options) + content_tag('td', text, options)
+      options[:class] = [options[:class] || "", 'attribute'].join(' ')
+      content_tag 'div',
+        content_tag('div', label + ":", :class => 'label') + content_tag('div', text, :class => 'value'),
+        options
     end
   end
 

app/views/issues/show.html.erb

@@ -33,7 +33,7 @@
         <% end %>
         </p>
 
-<table class="attributes">
+<div class="attributes">
 <%= issue_fields_rows do |rows|
   rows.left l(:field_status), @issue.status.name, :class => 'status'
   rows.left l(:field_priority), @issue.priority.name, :class => 'priority'
@@ -70,7 +70,7 @@
 end %>
 <%= render_custom_fields_rows(@issue) %>
 <%= call_hook(:view_issues_show_details_bottom, :issue => @issue) %>
-</table>
+</div>
 
 <% if @issue.description? || @issue.attachments.any? -%>
 <hr />

public/stylesheets/application.css

@@ -253,10 +253,6 @@ a.sort { padding-right: 16px; background-position: 100% 50%; background-repeat:
 a.sort.asc  { background-image: url(../images/sort_asc.png); }
 a.sort.desc { background-image: url(../images/sort_desc.png); }
 
-table.attributes { width: 100% }
-table.attributes th { vertical-align: top; text-align: left; }
-table.attributes td { vertical-align: top; }
-
 table.boards a.board, h3.comments { background: url(../images/comment.png) no-repeat 0% 50%; padding-left: 20px; }
 table.boards td.last-message {text-align:left;font-size:80%;}
 
@@ -356,9 +352,10 @@ div.issue div.subject>div>p { margin-top: 0.5em; }
 div.issue div.subject h3 {margin: 0; margin-bottom: 0.1em;}
 div.issue span.private, div.journal span.private { position:relative; bottom: 2px; text-transform: uppercase; background: #d22; color: #fff; font-weight:bold; padding: 0px 2px 0px 2px; font-size: 60%; margin-right: 2px; border-radius: 2px;}
 div.issue .next-prev-links {color:#999;}
-div.issue table.attributes th {width:22%;}
+div.issue .attributes {margin-top: 2em;}
-div.issue table.attributes td {width:28%;}
+div.issue .attribute {padding-left:180px; clear:left; min-height: 1.8em;}
-div.issue.issue.overdue td.due-date { color: #c22; }
+div.issue .attribute .label {width: 170px; margin-left:-180px; font-weight:bold; float:left;}
+div.issue.overdue .due-date .value { color: #c22; }
 
 #issue_tree table.issues, #relations table.issues { border: 0; }
 #issue_tree td.checkbox, #relations td.checkbox {display:none;}
@@ -796,7 +793,7 @@ table.progress td { height: 1em; }
 table.progress td.closed { background: #BAE0BA none repeat scroll 0%; }
 table.progress td.done { background: #D3EDD3 none repeat scroll 0%; }
 table.progress td.todo { background: #eee none repeat scroll 0%; }
-p.percent {font-size: 80%;}
+p.percent {font-size: 80%; margin:0;}
 p.progress-info {clear: left; font-size: 80%; margin-top:-4px; color:#777;}
 
 #roadmap table.progress td { height: 1.2em; }

test/functional/issues_controller_test.rb

@@ -1382,7 +1382,7 @@ class IssuesControllerTest < ActionController::TestCase
 
     get :show, :id => 1
     assert_response :success
-    assert_select 'table.attributes .category'
+    assert_select '.attributes .category'
   end
 
   def test_show_should_not_display_category_field_if_no_categories_are_defined
@@ -1482,7 +1482,7 @@ class IssuesControllerTest < ActionController::TestCase
     get :show, :id => 1
     assert_response :success
 
-    assert_select 'td', :text => 'MySQL, Oracle'
+    assert_select ".cf_1 .value", :text => 'MySQL, Oracle'
   end
 
   def test_show_with_multi_user_custom_field
@@ -1495,7 +1495,7 @@ class IssuesControllerTest < ActionController::TestCase
     get :show, :id => 1
     assert_response :success
 
-    assert_select "td.cf_#{field.id}", :text => 'Dave Lopper, John Smith' do
+    assert_select ".cf_#{field.id} .value", :text => 'Dave Lopper, John Smith' do
       assert_select 'a', :text => 'Dave Lopper'
       assert_select 'a', :text => 'John Smith'
     end

test/functional/issues_custom_fields_visibility_test.rb

@@ -68,9 +68,9 @@ class IssuesCustomFieldsVisibilityTest < ActionController::TestCase
       get :show, :id => @issue.id
       @fields.each_with_index do |field, i|
         if fields.include?(field)
-          assert_select 'td', {:text => "Value#{i}", :count => 1}, "User #{user.id} was not able to view #{field.name}"
+          assert_select '.value', {:text => "Value#{i}", :count => 1}, "User #{user.id} was not able to view #{field.name}"
         else
-          assert_select 'td', {:text => "Value#{i}", :count => 0}, "User #{user.id} was able to view #{field.name}"
+          assert_select '.value', {:text => "Value#{i}", :count => 0}, "User #{user.id} was able to view #{field.name}"
         end
       end
     end

test/integration/issues_test.rb

@@ -171,7 +171,10 @@ class IssuesTest < Redmine::IntegrationTest
 
     # Issue view
     follow_redirect!
-    assert_select 'th:contains("Tester:") + td', :text => tester.name
+    assert_select ".cf_#{@field.id}" do
+      assert_select '.label', :text => 'Tester:'
+      assert_select '.value', :text => tester.name
+    end
     assert_select 'select[name=?]', "issue[custom_field_values][#{@field.id}]" do
       assert_select 'option', users.size + 1 # +1 for blank value
       assert_select 'option[value=?][selected=selected]', tester.id.to_s, :text => tester.name