[Outreachy ] New dashboard design (publiclab#8935)

* dashboard redesign * dashboard design * dashboard sidebar * other topics section * add topics test * add media query * update comments * update comments in subscription * remove comment * subscriptions test * change subscription test * test subscription location fail * change subscribe to sub * rename subscribe tag to sub * rename recommended to featured * change a tag hover color
reginaalyssa · Oct 16, 2021 · 15799b9 · 15799b9
1 parent a951fc6
commit 15799b9
Show file tree

Hide file tree

Showing 15 changed files with 352 additions and 13 deletions.
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
@@ -51,8 +51,11 @@ def dashboard_v2
     # The new dashboard displays the blog and topics list
     if current_user
       @blog = Tag.find_nodes_by_type('blog', 'note', 1).limit(1).first
-      @tags = current_user.subscriptions(:tag).includes(:tag)
-      render template: 'dashboard/dashboard_v2'
+      @blog_tag = @blog.tag.find_by(name: "blog")
+      # Tags without the blog tag to avoid double display
+      # Not all tags have notes, some are wikis. A text will be displayed to show this.
+      @pagy, @tag_subscriptions = pagy(current_user.subscriptions(:tag).includes(:tag).where.not(tid: @blog_tag.tid))
+      render template: 'dashboard_v2/dashboard'
     else
       redirect_to '/research'
     end

diff --git a/app/controllers/subscription_controller.rb b/app/controllers/subscription_controller.rb
@@ -45,7 +45,7 @@ def add
         end
       end
 
-      case tag_selection_more_than_zero?(params[:tid])
+      case tag_selection_more_than_zero?(tag.tid)
       when true
         respond_to do |format|
           format.html do

diff --git a/app/views/dashboard/dashboard_v2.html.erb b/app/views/dashboard/dashboard_v2.html.erb
diff --git a/app/views/dashboard_v2/_blog.html.erb b/app/views/dashboard_v2/_blog.html.erb
@@ -0,0 +1,31 @@
+<%= render partial: "dashboard_v2/header" %>
+<div class="pt-2 d-block" >
+  <% if @blog %>
+      <% if @blog.main_image %>
+        <div class="img" style="background-image: url('<%= @blog.main_image.path(:large) %>')">
+        <% elsif @blog.scraped_image %>
+        <div class="img" style="background-image: url('<%= @blog.scraped_image %>')">
+      <% end %>
+      <%# subscribe to blog updates possibly via email %>
+      <a class="ellipsis pull-right pl-2" data-toggle="dropdown" rel="tooltip" title="<%= translation('tag.show.blog_updates') %>" style="cursor:pointer; background-color: #444" aria-expanded="true"><i class="fa fa-ellipsis-h" style="color:#ccc;font-size:18px;margin-right:10px;"></i></a>
+      <div class="dropdown-menu">
+        <div class="dropdown-item">
+          <a style="margin-top:-8px;" rel="tooltip" title="<%= translation('tag.show.blog_updates') %>" href="/subscribe/tag/<%= @blog_tag.name %>">
+            <%= translation('tag.show.subscribe') %>
+          </a>
+        </div>
+      </div>
+      <%# blog caption %>
+      <div style="padding-top: 220px">
+          <h4 class="blog-caption">
+            <small style="font-size: 13px;" class="float-right d-none d-lg-inline"><%= raw translation('dashboard_v2.dashboard.from_blog', :url => '/blog') %></small>
+            <a style="color: #444;" href="/blog"><%= @blog.title %></a>
+            <small style="font-size: 13px;"><%= translation('dashboard_v2.dashboard.by') %>
+            <a href="/profile/<%= @blog.author.username %>"><%= @blog.author.username %></a></small>
+          </h4>
+      </div>
+      <% if @blog.main_image || @blog.scraped_image %>
+        </div>
+      <% end %>
+  <% end %>
+</div>
diff --git a/app/views/dashboard_v2/_header.html.erb b/app/views/dashboard_v2/_header.html.erb
@@ -0,0 +1,12 @@
+  <div class="row header" style="padding-left:10px;">
+    <% if current_user %>
+      <h1 class="pr-2"><%= translation('dashboard_v2._header.dashboard') %></h1>
+      <h4 style="color: #888; margin-top: 1.25rem; font-size: 14px;">
+        <span class="d-none d-lg-inline">
+          <%= translation('dashboard_v2._header.updates',:url => '/wiki/topics') %>
+        </span>
+      </h4>
+    <% else %>
+      <h1><%= translation('dashboard_v2._header.community_research') %></h1>
+    <% end %>
+  </div>
diff --git a/app/views/dashboard_v2/_topicCard.html.erb b/app/views/dashboard_v2/_topicCard.html.erb
@@ -0,0 +1,85 @@
+<%# Most of this design has been extracted from the tags _topicCard with slight variations %>
+<% subscriptions ||= @tag_subscriptions  # allow overriding with local variable %>
+<div class="card-view pt-5">
+  <% subscriptions.each do |subscription| %>
+    <div class="card shadow-sm p-2 mb-3 bg-white rounded" >
+      <div class="card-header mt-2" style=" padding:0.8em; background-color: inherit; border:none;">
+      <%# Unfollow section %>
+        <% if current_user && current_user.following(subscription.tag.name) %>
+          <a class="ellipsis pull-right" data-toggle="dropdown" style="cursor:pointer" aria-expanded="true"><i class="fa fa-ellipsis-h" style="color:#ccc;font-size:18px;margin-right:10px;"></i></a>
+          <div class="dropdown-menu">
+            <div class="dropdown-item">
+              <a style="margin-top:-8px;" data-method="delete" data-confirm="Are you sure you'd like to unfollow this topic?" rel="tooltip" title="<%= translation('tag.show.unfollow') %>" href="/unsubscribe/tag/<%= subscription.tag.name %>">
+                <%= translation('tag.show.unfollow_text') %>
+              </a>
+            </div>
+          </div>
+        <% end %>
+      <%# Topic name %>
+        <h4 style="display: inline-block;"><a href="/tag/<%= subscription.tag.name %>"><%= subscription.tag.name %></a></h4>
+      <%# Follower count  %>
+        <p style="display: inline-block; color: #808080;"><a style="text-decoration: underline; color: #808080;" href="/tag/<%= subscription.tag.name %>"><%= Tag.follower_count(subscription.tag.name) %> <%= translation('tag.show.following') %></a></p>
+      </div>
+      <div class="card-body" style="padding:0.8em;">
+      <%# First 3 notes in the Topic  %>
+        <div class="node-list">
+          <% notes = Tag.find_nodes_by_type(subscription.tag.name, type = 'note', limit = 3).where.not(nid: @blog.nid)  %>
+          <div class="node-body">
+          <%# TODO fix odd line folding https://github.com/publiclab/plots2/issues/8837 %>
+            <% if notes.present? %>
+              <% notes.each do |node|  %>
+                  <% if node.main_image %>
+                    <img class="rounded-circle pull-left" id="profile-photo" style="width:20px; height:20px; margin-right:8px; display: inline-block;" src="<%= node.main_image.path(:default) %>" />
+                  <% elsif node.scraped_image %>
+                    <img class="rounded-circle pull-left" id="profile-photo" style="width:20px; height:20px; margin-right:8px; display: inline-block;" src="<%= node.scraped_image %>" />
+                  <% else %>
+                    <div class="circle"></div>
+                  <% end %>
+                  <p style="margin-left: 10px;">
+                    <a style="color: inherit;" <% if @widget %>target="_blank"<% end %> href="<%= node.path %>"><%= (node.type == 'note') ? node.title : node.latest.title %></a>
+                    <span style="color: #808080;"><%= translation('tag.show.by') %> <a style="color: #808080;" <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>">@<%= node.author.name %></a>
+                  </p>
+              <% end %>
+
+            <% else %>
+              <h6><%= translation('tag.show.notes_not_available') %></h6>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-footer" style="background-color: inherit; border:none;">
+        <a style="padding-top:15px;text-decoration:underline;color:#808080;display:inline-block;" href="/tag/<%= subscription.tag.name %>"><%= subscription.tag.count %> <%= translation('tag.index.posts') %> &raquo;</a>
+        <div id="new-post" style="float:right;margin:10px 0 10px 10px;">
+          <% if current_user %>
+            <a rel="tooltip" title="<%= translation('sidebar._post_button.share_your_work') %>" data-placement="bottom" href="/post?tags=<%= subscription.tag.name %>" class="btn btn-primary btn-sm requireLogin"><%= translation('tag.show.new_post') %> <i class="fa fa-plus fa-white"></i></a>
+          <% else %>
+            <a class="btn btn-primary btn-sm index-follow-buttons follow-btn-remote requireLogin" href="/subscribe/tag/<%= subscription.tag.name %>" data-remote="true"><%= translation('tag.index.follow') %></a>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<% if @pagy %>
+  <%== pagy_bootstrap_nav @pagy %>
+<% end %>
+
+<style>
+
+  .node-list {
+    display: grid;
+  }
+
+  .circle {
+    background-color: gray;
+    display: block;
+    margin-right: 8px;
+    float: left;
+    height: 20px;
+    width: 20px;
+    border-radius: 100%;
+  }
+
+</style>
diff --git a/app/views/dashboard_v2/dashboard.html.erb b/app/views/dashboard_v2/dashboard.html.erb
@@ -0,0 +1,91 @@
+<%# TODO: Topics to display if the user is new and not yet subscribed to other posts %>
+<div class="container dashboard">
+  <div class="row">
+    <%# Topics %>
+    <div class="col-lg-8">
+      <%= render partial: "dashboard_v2/blog"%>
+      <%= render partial: "dashboard_v2/topicCard"%>
+    </div>
+    <%# Sidebar %>
+    <div class="col-lg-4">
+      <%# Admin feature %>
+      <%= feature('dashboard-feature') %>
+      <%= render partial: "sidebar/dashboard_v2"%>
+    </div>
+  </div>
+  <%# Additional Topics %>
+  <div class="other-topics">
+    <h4>
+      <i class="form-grey d-none d-lg-inline"><%= translation('dashboard_v2.sidebar.interest_topics')%></i>
+    </h4>
+    <%# TODO Featured topics %>
+    <br/>
+    <%# Trending topics %>
+    <small><a href="/tags" class="form-grey"><%= translation('dashboard_v2.sidebar.trending_topics') %>:</a></small>
+    <span>
+      <% cache('trending-tags', expires_in: 24.hours, skip_digest: true) do %>
+          <% Tag.trending.each do |i| %>
+              <a href="/tag/<%= i.name %>" class="badge badge-secondary"><%= i.name %></a>
+          <% end %>
+        <% end %>
+      <small class="text-format form-grey" style="text-decoration: underline"><%= translation('dashboard_v2.sidebar.more_topics',:url => '/wiki/topics') %> </small>
+    </span>
+  </div>
+</div>
+
+<style>
+
+  .img {
+    background-size: cover;
+  }
+
+  .blog-caption {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 16px 10px 6px;
+  }
+
+  .other-topics h4 i {
+    font-style: normal;
+    font-size: small;
+    display: inline-block;
+    position: relative;
+    margin-left: 201px;
+  }
+
+  .other-topics h4 i:after,
+  .other-topics h4 i:before {
+    content: "";
+    position: absolute;
+    height: 12px;
+    border-bottom: 1px solid #888;
+    top: 0;
+
+  }
+
+  .other-topics h4 i:before {
+    right: 100%;
+    margin-right: 15px;
+    width: 186px;
+  }
+
+  .other-topics h4 i:after {
+    left: 100%;
+    margin-left: 15px;
+    width: 231px;
+  }
+
+  .dashboard a:hover {
+    text-decoration: none;
+    color: #505050;
+  }
+
+  /* Shorten line in Ipad */
+  @media (max-width: 1366px){
+    .other-topics h4 i:after {
+      left: 100%;
+      margin-left: 15px;
+      width: 112px;
+    }
+  }
+
+</style>
diff --git a/app/views/sidebar/_dashboard_v2.html.erb b/app/views/sidebar/_dashboard_v2.html.erb
@@ -0,0 +1,78 @@
+<%# TODO Location not working, will be fixed after working on https://github.com/publiclab/plots2/issues/8566 %>
+<% if current_user %>
+  <div style="margin: 2.2rem 0;">
+    <a class="btn btn-lg btn-outline-secondary blurred-location-input" submit_to="/profile/tags/create/<%= current_user.uid %>"><i class="fa fa-map-marker" style="color:#c40;"></i> <%= translation('dashboard_v2.sidebar.add_location') %></a>
+    <h4 class="text-format">
+      <%= translation('dashboard_v2.sidebar.location_work') %> |
+      <a class="text-format" style="text-decoration: underline;" href="https://publiclab.org/location-privacy" target="_blank"><%= translation('dashboard_v2.sidebar.location_privacy') %></a>
+    </h4>
+  </div>
+<% end %>
+<%= render partial: 'tag/location' %>
+
+<%# All posts %>
+<h4 class="text-format" style="text-decoration: underline; margin-top: -34px;"><%= translation('dashboard_v2.sidebar.all_posts',:url => '/notes') %> </h4>
+
+<%# More Topics %>
+<div id="accordion">
+  <div class="card">
+    <div  id="headingOne">
+      <h4 class="mb-0">
+          <a class="btn btn-link" data-toggle="collapse" data-target="#moreTopics" aria-expanded="true" aria-controls="moreTopics">
+                      <%= translation('dashboard_v2.sidebar.follow_topics') %>
+                      <i class="fas fa-angle-down arrow form-grey"></i>
+                      <i class="fas fa-angle-up arrow form-grey"></i>
+          </a>
+      </h4>
+    </div>
+    <div id="moreTopics" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+      <div class="card-body">
+        <small class="form-grey"><%= translation('dashboard_v2.sidebar.add_topics') %> <a href="#" class="form-grey" style="text-decoration: underline;"><%= translation('dashboard_v2.sidebar.learn_more') %></a></small>
+        <br/> <br/>
+        <%# TODO Featured topics %>
+        <div>
+          <%# Trending topics %>
+          <small><a href="/tags" class="form-grey"><%= translation('dashboard_v2.sidebar.trending_topics') %>:</a></small>
+          <div>
+            <% cache('trending-tags', expires_in: 24.hours, skip_digest: true) do %>
+                <% Tag.trending.each do |i| %>
+                    <a href="/tag/<%= i.name %>" class="badge badge-primary"><%= i.name %></a>
+                <% end %>
+              <% end %>
+          </div>
+        </div>
+        <%# TODO Search topics %>
+        <br/>
+        <%# All topics link %>
+        <small class="text-format form-grey" style="text-decoration: underline"><%= translation('dashboard_v2.sidebar.all_topics',:url => '/wiki/topics') %> </small>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<style>
+
+  .text-format{
+    color: #888;
+    font-size: small;
+    margin: 1.3rem 0;
+  }
+
+  .arrow{
+    font-size: 20px;
+    position: absolute;
+    right: 0;
+    padding-right: 9px;
+    padding-top: 1px;
+  }
+
+  a[aria-expanded=true] .fa-angle-up {
+   display: none;
+  }
+
+  a[aria-expanded=false] .fa-angle-down {
+    display: none;
+  }
+
+</style>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -344,7 +344,25 @@ en:
     _comment_moderate:
       first_time_post: "Moderate first-time comment:"
   dashboard_v2:
-    view: "This is the dashboard redesign page"
+    _header:
+      dashboard: "Dashboard"
+      updates: "Updates from community members on <a href='%{url}' class='form-grey' style='text-decoration: underline;'>topics</a> you follow"
+      community_research: "Community research"
+    dashboard:
+      from_blog: "From the <a href='%{url}'>Public Lab Blog</a>"
+      by: "by"
+    sidebar:
+      add_location: "Add your location"
+      location_work: "Add your location to see work near you"
+      location_privacy: "About location privacy"
+      all_posts: "<a href='%{url}' class='form-grey'>View all posts</a>"
+      follow_topics: "Follow more topics"
+      trending_topics: "Trending topics"
+      learn_more: "learn more"
+      add_topics: "Click to add topics, or"
+      all_topics: "<a href='%{url}' class='form-grey'>All topics</a>"
+      more_topics: "<a href='%{url}' class='form-grey'>more...</a>"
+      interest_topics: "Click to start followong topics that interest you"
   like:
     index:
       recent_likes: "Recent Likes"
@@ -395,6 +413,9 @@ en:
       following: "Following"
       unfollow: "Click to unfollow"
       follow: "Follow"
+      unfollow_text: "Unfollow"
+      subscribe: "Subscribe"
+      blog_updates: "Click to subscribe to blog updates via email"
       none: "None"
       users_following_tag: "Users following this tag"
       ask_question: "Ask a question about <b>%{tag}</b>"
@@ -410,6 +431,9 @@ en:
       people: "People"
       no_map_results_found: "Sorry, no map is tagged with <i>%{tag}</i>"
       contributors: "Contributors"
+      notes_not_available: "This topic has no available notes. View other posts by clicking the link below."
+      by: "by"
+      new_post: "New post"
     contributors-index:
       contributors_over_last_week: "Contributors for <i style=\"color:#aaa;\">%{tag_name}</i>
         over the past 52 weeks"

diff --git a/test/fixtures/tag_selections.yml b/test/fixtures/tag_selections.yml
@@ -123,3 +123,10 @@ selection_spectrometer:
   following: true
   created_at: <%= Time.now %>
   updated_at: <%= Time.now %>
+
+subscribed_tag:
+  user_id: 1
+  tid: 37
+  following: true
+  created_at: <%= Time.now  %>
+  updated_at: <%= Time.now %>