Improve styling of the progress bars on the milestone and project lis…

…t views
ari · Jun 24, 2016 · 32d9505 · 32d9505
1 parent 25f51f1
commit 32d9505
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 23 deletions.
diff --git a/app/assets/stylesheets/project.scss b/app/assets/stylesheets/project.scss
@@ -63,28 +63,12 @@
 }
 
 .project .title .progress {
-  margin: 0 0 0 5px;
   width: 400px;
-  float: left;
-  height: 18px;
-  display: none;
-}
-
-.milestone .progress {
-  margin: 0 0 0 5px;
-  width: 100%;
-  float: right;
-  height: 14px;
-  display: none;
 }
 
-.project:hover .progress, .milestone:hover .progress {
-  display: block;
-}
-
-.milestone:hover a.action {
-  display: inline;
-  margin-left: 10px;
+.progress {
+  height: 8px;
+  min-height: 8px;
 }
 
 .milestone {

diff --git a/app/views/milestones/_milestone_row.html.erb b/app/views/milestones/_milestone_row.html.erb
@@ -16,7 +16,8 @@
     </div>
     <div class="span2">
       <div class="progress">
-        <div class="bar" style="width: <%= number_to_percentage(milestone.percent_complete, :precision => 0)  %>;"> </div>
+        <div class="bar bar-success" style="width: <%= number_to_percentage(milestone.percent_complete, :precision => 0)  %>;"> </div>
+        <div class="bar bar-danger" style="width: <%= number_to_percentage(100 - milestone.percent_complete, :precision => 0)  %>;"> </div>
       </div>
     </div>
   </div>

diff --git a/app/views/projects/_project.html.erb b/app/views/projects/_project.html.erb
@@ -1,9 +1,10 @@
 <div class="project">
 
 <div class="clearfix title">
-  <%= link_to_tasks_filtered_by project, :class => "pull-left name" %>
-  <div class="progress">
-    <div class="bar" style="width:<%= number_to_percentage(project.progress, :precision => 0) %>;"> </div>
+  <%= link_to_tasks_filtered_by project, :class => "pull-left name span3" %>
+  <div class="progress span3">
+    <div class="bar bar-success" style="width:<%= number_to_percentage(project.progress, :precision => 0) %>;"> </div>
+    <div class="bar bar-danger" style="width:<%= number_to_percentage(100 - project.progress, :precision => 0) %>;"> </div>
   </div>
   <% if current_user.can?(project, 'grant') || current_user.can?(project, 'milestone') %>
     <%= link_to '<i class="icon-pencil"></i>'.html_safe, { :controller => 'projects', :action => 'edit', :id => project },