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
-                   blank = content_tag('th', '') + content_tag('td', '')
-                   size.times do |i|
-                     left = @left[i] || blank
-                     right = @right[i] || blank
-                     html << content_tag('tr', left + right)
-                   end
-                   html
+                   content =
+                     content_tag('div', @left.reduce(&:+), :class => 'splitcontentleft') +
+                     content_tag('div', @right.reduce(&:+), :class => 'splitcontentleft')
+                   content_tag('div', content, :class => 'splitcontent')
                  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 table.attributes td {width:28%;}
-             div.issue.issue.overdue td.due-date { color: #c22; }
+             div.issue .attributes {margin-top: 2em;}
+             div.issue .attribute {padding-left:180px; clear:left; min-height: 1.8em;}
+             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