From d273ba2ba5e2c9651e897a000784a221c3c3a0cb Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Thu, 7 Dec 2017 13:40:12 +0100
Subject: [PATCH] improves following page, shows public interest only in this
 view

---
 app/assets/stylesheets/layout.scss            | 69 +++++++++++--------
 app/helpers/followables_helper.rb             |  2 +-
 .../users/_budget_investment_follow.html.erb  |  3 +
 app/views/users/_following.html.erb           | 49 +++++++------
 app/views/users/_proposal_follow.html.erb     |  6 ++
 app/views/users/show.html.erb                 |  2 -
 6 files changed, 72 insertions(+), 59 deletions(-)
 create mode 100644 app/views/users/_budget_investment_follow.html.erb
 create mode 100644 app/views/users/_proposal_follow.html.erb

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index a2ddea800..007b4939c 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2043,36 +2043,6 @@ table {
 
 .activity {
 
-  .accordion li {
-    margin-bottom: $line-height / 2;
-
-    .accordion-title {
-      border-bottom: 1px solid $border;
-      background: #f8f9fb;
-      font-size: $small-font-size;
-      padding: $line-height / 2;
-    }
-
-    .accordion-content {
-      padding: 0;
-    }
-  }
-
-  .accordion .title {
-    display: block;
-    line-height: $line-height;
-  }
-
-  .accordion .icon {
-    font-size: rem-calc(20);
-    float: left;
-    margin-right: $line-height / 3;
-
-    &.icon-debates {
-      margin-top: rem-calc(3);
-    }
-  }
-
   .retired {
     text-decoration: line-through;
   }
@@ -2082,6 +2052,45 @@ table {
 
   li {
     margin-right: $line-height / 4;
+
+    span {
+      background: none;
+      border: 1px solid #ececec;
+    }
+  }
+}
+
+.following {
+
+  .follow-list {
+    list-style-type: circle;
+    padding: $line-height / 2;
+
+    li {
+      margin-bottom: $line-height / 2;
+      margin-left: $line-height;
+    }
+  }
+
+  h3 {
+    font-size: rem-calc(24);
+    margin-top: $line-height;
+    padding-left: rem-calc(30);
+    position: relative;
+
+    span {
+      left: 0;
+      position: absolute;
+      top: 2px;
+    }
+  }
+
+  .interests {
+
+    @include breakpoint(medium) {
+      border-left: 1px solid #ececec;
+      padding-left: $line-height;
+    }
   }
 }
 
diff --git a/app/helpers/followables_helper.rb b/app/helpers/followables_helper.rb
index e63e2b1a5..f185ab25a 100644
--- a/app/helpers/followables_helper.rb
+++ b/app/helpers/followables_helper.rb
@@ -13,7 +13,7 @@ module FollowablesHelper
 
   def render_follow(follow)
     followable = follow.followable
-    partial = followable_class_name(followable)
+    partial = followable_class_name(followable) + "_follow"
     locals = {followable_class_name(followable).to_sym => followable}
 
     render partial, locals
diff --git a/app/views/users/_budget_investment_follow.html.erb b/app/views/users/_budget_investment_follow.html.erb
new file mode 100644
index 000000000..be6555ed7
--- /dev/null
+++ b/app/views/users/_budget_investment_follow.html.erb
@@ -0,0 +1,3 @@
+<li id="budget_investment_<%= budget_investment.id %>">
+  <%= link_to budget_investment.title, budget_investment_path(budget_investment.budget, budget_investment) %>
+</li>
diff --git a/app/views/users/_following.html.erb b/app/views/users/_following.html.erb
index a5e78a3b6..1ee5c412a 100644
--- a/app/views/users/_following.html.erb
+++ b/app/views/users/_following.html.erb
@@ -1,30 +1,27 @@
-<ul class="accordion" data-accordion data-allow-all-closed="true">
+<div class="row following margin-top" data-equalizer data-equalize-on="medium" >
+  <div class="small-12 medium-8 column" data-equalizer-watch>
+    <ul class="menu simple clear">
+      <% @follows.each do |followable_type, follows| %>
+        <li><%= link_to followable_type_title(followable_type), "##{followable_type_title(followable_type).parameterize.underscore}" %></li>
+      <% end %>
+    </ul>
 
-  <% @follows.each do |followable_type, follows| %>
+    <% @follows.each do |followable_type, follows| %>
 
-    <li class="accordion-item" data-accordion-item>
+      <h3 id="<%= followable_type_title(followable_type).parameterize.underscore %>">
+        <span class="icon-<%= followable_icon(followable_type) %>"></span>
+        <%= followable_type_title(followable_type) %>
+      </h3>
 
-      <a href="#" class="accordion-title">
-        <span class="icon">
-          <i class="icon icon-<%= followable_icon(followable_type) %>"></i>
-        </span>
-        <span class="title">
-          <strong><%= followable_type_title(followable_type) %></strong>
-        </span>
-      </a>
+      <ul class="follow-list">
+        <% follows.each do |follow| %>
+          <%= render_follow(follow) %>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
 
-      <div class="accordion-content" data-tab-content>
-        <table>
-          <tbody>
-            <% follows.each do |follow| %>
-              <%= render_follow(follow) %>
-            <% end %>
-          </tbody>
-        </table>
-      </div>
-
-    </li>
-
-  <% end %>
-
-</ul>
+  <div class="small-12 medium-4 column interests" data-equalizer-watch>
+    <%= render 'interests', user: @user if valid_interests_access? %>
+  </div>
+</div>
diff --git a/app/views/users/_proposal_follow.html.erb b/app/views/users/_proposal_follow.html.erb
new file mode 100644
index 000000000..1df5cfa72
--- /dev/null
+++ b/app/views/users/_proposal_follow.html.erb
@@ -0,0 +1,6 @@
+<li id="proposal_<%= proposal.id %>">
+  <%= link_to proposal.title, proposal, proposal.retired? ? { class: 'retired' } : {} %>
+  <% if proposal.retired? %>
+    <span class="label alert"><%= t('users.proposals.retired') %></span>
+  <% end %>
+</li>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 4e6b6f0e5..08e400bba 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -48,8 +48,6 @@
         </div>
       <% end %>
 
-      <%= render 'interests', user: @user if valid_interests_access? %>
-
     </div>
   </div>
 </main>