jro_apps/redmine Commit - r14466:cb0866f31307

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

Jean-Philippe Lang -

r14466:cb0866f31307

parent child

Context file:

r14466:cb0866f31307

Collapse all files

app/helpers/issues_helper.rb +9 -9

                 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 +2 -2

                     <% 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'
             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 +5 -8

             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%;}
             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;}
             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 +3 -3

                 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
                 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
                 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 +2 -2

                   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 +4 -1

                 # 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

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages