Merge pull request #1700 from consul/timeline

Budgets investments timeline

app/assets/stylesheets/participation.scss

@@ -494,60 +494,59 @@
   }
 }
 
-
 .tab-milestones ul {
-  position: relative;
   margin-top: rem-calc(40);
+  position: relative;
 
   li {
+    margin: 0 auto;
     position: relative;
     width: 0;
-    margin: 0 auto;
   }
 
   li::before {
+    background: $budget;
+    border-radius: rem-calc(20);
     content: '';
+    height: rem-calc(20);
     position: absolute;
-    top: rem-calc(5);
+    top: 5px;
     transform: translateX(-50%);
     width: rem-calc(20);
-    height: rem-calc(20);
-    border-radius: 50%;
-    background: $budget;
     z-index: 2;
   }
 
   li::after {
-    content: '';
-    width: 1px;
     background: $light-gray;
     bottom: 100%;
+    content: '';
     height: 100%;
     position: absolute;
-    top: rem-calc(25);
+    top: 25px;
+    width: 1px;
     z-index: 1;
   }
 }
 
-.tab-milestones ul div {
+.tab-milestones ul .milestone-content {
+  padding: $line-height / 6 $line-height / 2;
   position: relative;
-  padding: rem-calc(3) rem-calc(10);
 
   h3 {
-    font-size: 1.2rem;
     margin-bottom: 0;
   }
 
-  strong {
-    color: $text-light;
-    font-size: 0.9rem;
+  .milestone-date {
+    color: $text-medium;
+    font-size: $small-font-size;
   }
 }
 
 .tab-milestones .timeline ul li:nth-child(odd),
 .tab-milestones .timeline ul li:nth-child(even) {
 
-  div {
+  .milestone-content {
+
     @include breakpoint(medium) {
       width: rem-calc(300);
     }
@@ -559,7 +558,8 @@
 }
 
 .tab-milestones .timeline ul li:nth-child(odd) {
-  div {
+
+  .milestone-content {
     text-align: right;
 
     @include breakpoint(medium) {
@@ -573,8 +573,9 @@
 }
 
 .tab-milestones .timeline ul li:nth-child(even) {
-  div {
-    left: rem-calc(15);
+
+  .milestone-content {
+    left: 15px;
   }
 }
 
@@ -586,16 +587,16 @@
 
       &:nth-child(odd),
       &:nth-child(even) {
-        div {
+
+        .milestone-content {
+          left: 15px;
           text-align: left;
-          left: rem-calc(15);
         }
       }
     }
   }
 }
 
-
 // 04. List participation
 // ----------------------
 

app/views/admin/budget_investment_milestones/_form.html.erb

@@ -1,7 +1,7 @@
 <%= form_for [:admin, @investment.budget, @investment, @milestone] do |f| %>
 
   <%= f.text_field :title, maxlength: Budget::Investment::Milestone.title_max_length %>
-  <%= f.text_area :description %>
+  <%= f.text_area :description, rows: 5 %>
 
   <%= f.submit nil, class: "button success" %>
 <% end %>

app/views/budgets/investments/_milestones.html.erb

@@ -10,9 +10,11 @@
         <ul class="no-bullet">
           <% @investment.milestones.each do |milestone| %>
             <li>
-              <div>
+              <div class="milestone-content">
                 <h3><%= milestone.title %></h3>
-                <strong><%= t("budgets.investments.show.milestone_publish_date", publish_date: milestone.created_at.strftime("%d/%m/%Y")) %></strong>
+                <span class="milestone-date">
+                  <strong><%= t("budgets.investments.show.milestone_publish_date", publish_date: milestone.created_at.strftime("%d/%m/%Y")) %></strong>
+                </span>
                 <p><%= milestone.description %></p>
               </div>
             </li>