From 7ea85ec2ab119147a5cb29a7590fc6e1ab7c2196 Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Mon, 9 Apr 2018 19:25:59 +0200
Subject: [PATCH] Updates tabs component for budget investments

---
 .../investments/_filter_subnav.html.erb       | 47 ++++++++++---------
 .../budgets/investments/_milestones.html.erb  |  2 +-
 app/views/budgets/investments/show.html.erb   | 13 +++--
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/app/views/budgets/investments/_filter_subnav.html.erb b/app/views/budgets/investments/_filter_subnav.html.erb
index a46c33b2d..4a38b19fc 100644
--- a/app/views/budgets/investments/_filter_subnav.html.erb
+++ b/app/views/budgets/investments/_filter_subnav.html.erb
@@ -1,22 +1,25 @@
-<div class="row">
-  <div class="small-12 column">
-    <ul class="tabs" data-tabs id="investments-tabs">
-      <li class="tabs-title is-active">
-        <%= link_to "#tab-comments" do %>
-          <h3>
-            <%= t("budgets.investments.show.comments_tab") %>
-            <span class="js-comments-count">(<%= @investment.comments_count %>)</span>
-          </h3>
-        <% end %>
-      </li>
-      <li class="tabs-title">
-        <%= link_to "#tab-milestones" do %>
-          <h3>
-            <%= t("budgets.investments.show.milestones_tab") %>
-            (<%= @investment.milestones.count %>)
-          </h3>
-        <% end %>
-      </li>
-    </ul>
-  </div>
-</div>
+<ul class="tabs"
+    id="investments_tabs"
+    role="tablist"
+    data-deep-link="true"
+    data-update-history="true"
+    data-deep-link-smudge="true"
+    data-deep-link-smudge="500"
+    data-tabs>
+  <li class="tabs-title is-active">
+    <%= link_to "#tab-comments" do %>
+      <h3>
+        <%= t("budgets.investments.show.comments_tab") %>
+        <span class="js-comments-count">(<%= @investment.comments_count %>)</span>
+      </h3>
+    <% end %>
+  </li>
+  <li class="tabs-title">
+    <%= link_to "#tab-milestones" do %>
+      <h3>
+        <%= t("budgets.investments.show.milestones_tab") %>
+        (<%= @investment.milestones.count %>)
+      </h3>
+    <% end %>
+  </li>
+</ul>
diff --git a/app/views/budgets/investments/_milestones.html.erb b/app/views/budgets/investments/_milestones.html.erb
index 60b52f46e..366d5d65a 100644
--- a/app/views/budgets/investments/_milestones.html.erb
+++ b/app/views/budgets/investments/_milestones.html.erb
@@ -1,4 +1,4 @@
-<div class="tabs-panel tab-milestones" id="tab-milestones">
+<div class="tabs-panel tab-milestones" id="tab-milestones" role="tab">
   <div class="row">
     <div class="small-12 column">
       <% if @investment.milestones.blank? %>
diff --git a/app/views/budgets/investments/show.html.erb b/app/views/budgets/investments/show.html.erb
index 264e7b102..24e1141eb 100644
--- a/app/views/budgets/investments/show.html.erb
+++ b/app/views/budgets/investments/show.html.erb
@@ -10,13 +10,18 @@
   ballot: @ballot
 } %>
 
-<div class="tabs-content" data-tabs-content="investments-tabs" role="tablist">
-  <%= render "budgets/investments/filter_subnav" %>
-  <%= render "budgets/investments/milestones" %>
+<div class="row">
+  <div class="small-12 column">
+    <%= render "budgets/investments/filter_subnav" %>
+  </div>
+</div>
 
-  <div class="tabs-panel is-active" id="tab-comments">
+<div class="tabs-content" data-tabs-content="investments_tabs">
+  <div class="tabs-panel is-active" id="tab-comments" role="tab">
     <%= render partial: '/comments/comment_tree', locals: { comment_tree: @comment_tree,
                                                             comment_flags: @comment_flags,
                                                             display_comments_count: false } %>
   </div>
+
+  <%= render "budgets/investments/milestones" %>
 </div>