Improved responsiveness for versions and roadmap (#19097).

Width of progress bars is no longer hard-coded in views.

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

app/helpers/application_helper.rb

@@ -1108,14 +1108,13 @@ module ApplicationHelper
     pcts = pcts.collect(&:round)
     pcts[1] = pcts[1] - pcts[0]
     pcts << (100 - pcts[1] - pcts[0])
-    width = options[:width] || '100px;'
     legend = options[:legend] || ''
     content_tag('table',
       content_tag('tr',
         (pcts[0] > 0 ? content_tag('td', '', :style => "width: #{pcts[0]}%;", :class => 'closed') : ''.html_safe) +
         (pcts[1] > 0 ? content_tag('td', '', :style => "width: #{pcts[1]}%;", :class => 'done') : ''.html_safe) +
         (pcts[2] > 0 ? content_tag('td', '', :style => "width: #{pcts[2]}%;", :class => 'todo') : ''.html_safe)
-      ), :class => "progress progress-#{pcts[0]}", :style => "width: #{width};").html_safe +
+      ), :class => "progress progress-#{pcts[0]}").html_safe +
       content_tag('p', legend, :class => 'percent').html_safe
   end
 

app/helpers/issues_helper.rb

@@ -114,7 +114,7 @@ module IssuesHelper
              content_tag('td', link_to_issue(child, :project => (issue.project_id != child.project_id)), :class => 'subject', :style => 'width: 50%') +
              content_tag('td', h(child.status)) +
              content_tag('td', link_to_user(child.assigned_to)) +
-             content_tag('td', progress_bar(child.done_ratio, :width => '80px')),
+             content_tag('td', progress_bar(child.done_ratio)),
              :class => css)
     end
     s << '</table></form>'

app/helpers/queries_helper.rb

@@ -145,7 +145,7 @@ module QueriesHelper
     when :description
       issue.description? ? content_tag('div', textilizable(issue, :description), :class => "wiki") : ''
     when :done_ratio
-      progress_bar(value, :width => '80px')
+      progress_bar(value)
     when :relations
       content_tag('span',
         value.to_s(issue) {|other| link_to_issue(other, :subject => false, :tracker => false)}.html_safe,

app/views/issues/show.html.erb

@@ -55,7 +55,7 @@
     rows.right l(:field_due_date), format_date(@issue.due_date), :class => 'due-date'
   end
   unless @issue.disabled_core_fields.include?('done_ratio')
-    rows.right l(:field_done_ratio), progress_bar(@issue.done_ratio, :width => '80px', :legend => "#{@issue.done_ratio}%"), :class => 'progress'
+    rows.right l(:field_done_ratio), progress_bar(@issue.done_ratio, :legend => "#{@issue.done_ratio}%"), :class => 'progress'
   end
   unless @issue.disabled_core_fields.include?('estimated_hours')
     if @issue.estimated_hours.present? || @issue.total_estimated_hours.to_f > 0

app/views/versions/_issue_counts.html.erb

@@ -22,8 +22,7 @@
         </td>
         <td style="width:240px;">
             <%= progress_bar((count[:closed].to_f / count[:total])*100,
-                  :legend => "#{count[:closed]}/#{count[:total]}",
-                  :width => "#{(count[:total].to_f / max * 200).floor}px;") %>
+                  :legend => "#{count[:closed]}/#{count[:total]}") %>
         </td>
     </tr>
     <% end %>

app/views/versions/_overview.html.erb

@@ -1,3 +1,4 @@
+<div class="version-overview">
 <% if version.completed? %>
   <p><%= format_date(version.effective_date) %></p>
 <% elsif version.effective_date %>
@@ -15,7 +16,7 @@
 
 <% if version.issues_count > 0 %>
     <%= progress_bar([version.closed_percent, version.completed_percent],
-                     :width => '40em', :legend => ('%0.0f%' % version.completed_percent)) %>
+                     :legend => ('%0.0f%' % version.completed_percent)) %>
     <p class="progress-info">
       <%= link_to(l(:label_x_issues, :count => version.issues_count),
                   version_filtered_issues_path(version, :status_id => '*')) %>
@@ -31,3 +32,4 @@
 <% else %>
     <p class="progress-info"><%= l(:label_roadmap_no_issues) %></p>
 <% end %>
+</div>

public/stylesheets/application.css

@@ -789,6 +789,7 @@ table.progress {
   margin: 1px 6px 1px 0px;
 }
 
+table.progress {width:80px;}
 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%; }
@@ -796,7 +797,9 @@ table.progress td.todo { background: #eee none repeat scroll 0%; }
 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; }
+.version-overview table.progress {width:40em;}
+.version-overview table.progress td { height: 1.2em; }
+
 /***** Tabs *****/
 #content .tabs {height: 2.6em; margin-bottom:1.2em; position:relative; overflow:hidden;}
 #content .tabs ul {margin:0; position:absolute; bottom:0; padding-left:0.5em; width: 2000px; border-bottom: 1px solid #bbbbbb;}

public/stylesheets/responsive.css

@@ -740,7 +740,9 @@
 
     div#activity dl, #search-results { margin-left: 0; }
 
+    .version-overview table.progress {width:75%;}
     div#version-summary {float:none; width:100%; margin-left:0;}
+    body.controller-versions.action-show div#roadmap .related-issues {width:100%;}
 
     /*----------------------------------------*\
         G) FORMS