Tags index design update (#9072)

* flare tag line height

* .

* dropdown fix + actions bar fix

* actions bar on mob

* .

* .

* js

* little updates

* improve contrast ratio

* Remove unused id and duplicated element id

Co-authored-by: rhymes <rhymes@hey.com>

app/assets/javascripts/initializers/initScrolling.js

@@ -120,7 +120,7 @@ function buildTagsHTML(tag) {
     '</a>' +
     antifollow +
     '</h3>' +
-    '<p class="grid-cell__summary"></p>' +
+    '<p class="grid-cell__summary truncate-at-3"></p>' +
     '<form class="edit_follow flex items-center flex-nowrap mb-4" id="edit_follow_' +
     tag.id +
     '" action="/follows/' +

app/assets/javascripts/initializers/initializeAllFollowButts.js

@@ -203,10 +203,16 @@ function handleFollowButtPress(butt) {
 
 function assignState(butt, newState) {
   var style = JSON.parse(butt.dataset.info).style;
+  var followStyle = JSON.parse(butt.dataset.info).followStyle;
   butt.classList.add('showing');
   if (newState === 'follow' || newState === 'follow-back') {
     butt.dataset.verb = 'unfollow';
-    butt.classList.remove('following-butt');
+    butt.classList.remove('crayons-btn--outlined');
+    if (followStyle === 'primary') {
+      butt.classList.add('crayons-btn--primary');
+    } else if (followStyle === 'secondary') {
+      butt.classList.add('crayons-btn--secondary');
+    }
     if (newState === 'follow-back') {
       addFollowText(butt, newState);
     } else if (newState === 'follow') {
@@ -220,7 +226,9 @@ function assignState(butt, newState) {
   } else {
     butt.dataset.verb = 'follow';
     addFollowingText(butt, style);
-    butt.classList.add('following-butt');
+    butt.classList.remove('crayons-btn--primary');
+    butt.classList.remove('crayons-btn--secondary');
+    butt.classList.add('crayons-btn--outlined');
   }
 }
 

app/assets/stylesheets/base/helpers.scss

@@ -0,0 +1,38 @@
+.truncate-at-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.truncate-at-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+
+  .branded-2 {
+    border-top: var(--su-2) solid var(--accent-brand);
+  }
+
+  .branded-3 {
+    border-top: var(--su-3) solid var(--accent-brand);
+  }
+
+  .branded-4 {
+    border-top: var(--su-4) solid var(--accent-brand);
+  }
+
+  .branded-5 {
+    border-top: var(--su-5) solid var(--accent-brand);
+  }
+
+  .branded-6 {
+    border-top: var(--su-6) solid var(--accent-brand);
+  }
+
+  .branded-7 {
+    border-top: var(--su-7) solid var(--accent-brand);
+  }

app/assets/stylesheets/components/tags.scss

@@ -16,6 +16,7 @@
 
   &__prefix {
     opacity: 0.5;
+    font-weight: normal;
   }
 
   &[href]:hover {

app/assets/stylesheets/crayons.scss

@@ -3,6 +3,7 @@
 @import 'config/generator';
 
 @import 'base/reset';
+@import 'base/helpers';
 @import 'base/icons';
 @import 'base/layout';
 

app/assets/stylesheets/views/dashboard.scss

@@ -34,15 +34,9 @@
   }
 }
 
-
 .grid-cell {
   &__summary {
     color: var(--base-60);
-    overflow: hidden;
     line-height: var(--lh-tight);
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;  
-    margin-bottom: var(--su-4);
   }
 }

app/views/articles/_sticky_nav.html.erb

@@ -1,12 +1,6 @@
 <% @actor = @article.organization || @article.user %>
-<style>
-  .crayons-card--branded {
-    border-top: 32px solid <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %>;
-  }
-</style>
-
 <div class="crayons-article-sticky grid gap-4 break-word" id="article-show-primary-sticky-nav">
-  <div class="crayons-card crayons-card--secondary crayons-card--branded p-4 pt-0 hidden l:grid gap-4">
+  <div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 hidden l:grid gap-4" style="border-top-color: <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %>;">
     <div class="-mt-4">
       <a href="<%= @actor.path %>" class="flex">
         <span class="<% if @actor.class.name == "User" %>crayons-avatar crayons-avatar--xl<% elsif @actor.class.name == "Organization" %>crayons-logo crayons-logo--xl<% end %>  mr-2 shrink-0">

app/views/dashboards/following_tags.html.erb

@@ -22,8 +22,8 @@
             <% tag = follow.followable %>
             <% if tag %>
               <% color = HexComparer.new([tag.bg_color_hex || "#0000000", tag.text_color_hex || "#ffffff"]).brightness(0.8) %>
-              <div class="crayons-card p-4 m:p-6 flex flex-col single-article <% if follow.points < 0 %>opacity-75<% end %>" style="border: 1px solid <%= color %>;box-shadow: 3px 3px 0px <%= color %>" id="follows-<%= follow.id %>">
-                <h3 class="s:mb-1 p-0 fw-medium">
+              <div class="crayons-card branded-2 p-4 m:p-6 m:pt-4 flex flex-col single-article <% if follow.points < 0 %>opacity-75<% end %>" style="border-top-color: <%= color %>;" id="follows-<%= follow.id %>">
+                <h3 class="s:mb-1 -ml-1 p-0 fw-medium">
                   <a href="/t/<%= tag.name %>" class="crayons-tag crayons-tag--l">
                     <span class="crayons-tag__prefix">#</span><%= tag.name %>
                   </a>
@@ -32,9 +32,9 @@
                   <% end %>
                 </h3>
 
-                <p class="grid-cell__summary"><%= tag.short_summary %></p>
+                <p class="grid-cell__summary truncate-at-3 mb-4 fs-s"><%= tag.short_summary %></p>
 
-                <%= form_for(follow, html: { class: "flex items-center flex-nowrap mb-4" }) do |f| %>
+                <%= form_for(follow, html: { class: "flex items-center flex-nowrap" }) do |f| %>
                   <%= f.label(:points, "Follow weight:", class: "fs-s flex-1 pr-2 color-base-60 align-right whitespace-nowrap") %>
                   <%= f.number_field(:points, step: :any, required: true, class: "crayons-textfield flex-1 fs-s", style: "max-width:90px") %>
                   <button type="submit" class="crayons-btn crayons-btn--ghost crayons-btn--s" name="commit">Save</button>

app/views/tags/index.html.erb

@@ -19,25 +19,44 @@
   <meta name="twitter:image:src" content="<%= SiteConfig.main_social_image %>">
 <% end %>
 
-<div class="user-profile-header tag-header bg-transparent">
-  <div class="tag-or-query-header-container">
-    <h1>Top 100 Tags</h1>
-  </div>
-</div>
+<div class="crayons-layout crayons-layout--1-col">
+  <header class="px-2 m:px-0">
+    <h1>Top tags</h1>
+  </header>
 
-<div class="home tag-home">
-  <div class="side-bar"></div>
-  <div class="articles-list" id="articles-list">
+  <div class="grid gap-2 m:gap-4 l:gap-6 m:grid-cols-2 l:grid-cols-3 px-2 m:px-0">
     <% @tags.each do |tag| %>
-      <div class="tag-list-container" style="background:<%= tag.bg_color_hex %>;">
-        <a class="tag-show-link" href="/t/<%= tag.name %>" style="color:<%= tag.text_color_hex || "#fff" %>;">
-          <h2>#<%= tag.name %></h2>
+      <% color = HexComparer.new([tag.bg_color_hex || "#0000000", tag.text_color_hex || "#ffffff"]).brightness(0.8) %>
+      <div class="tag-card crayons-card branded-4 p-4 m:p-6 m:pt-4 flex flex-col relative" style="border-top-color: <%= color %>; ">
+        <h3 class="crayons-tag crayons-tag--l mb-2">
+          <a href="/t/<%= tag.name %>" class="crayons-link">
+            <span class="crayons-tag__prefix">#</span><%= tag.name %>
+          </a>
+        </h3>
+        <% if tag.short_summary.present? %>
+          <p class="mb-2 color-base-70 truncate-at-3"><%= sanitize tag.short_summary %></p>
+        <% end %>
+        <p class="mb-3 fs-s color-base-60">
+          <%= pluralize tag.taggings_count, "post" %> published
           <% if tag.sponsorship && tag.sponsorship.status == "live" && tag.sponsorship.expires_at > Time.current %>
-            <h4>Sponsored by <%= tag.sponsorship.organization.name %> ❤️</h4>
+          | Sponsored by <%= tag.sponsorship.organization.name %> ❤️
           <% end %>
-        </a>
+        </p>
+
+        <% if tag %>
+          <div class="mt-auto">
+            <button
+              class="crayons-btn crayons-btn--secondary follow-action-button"
+              data-info='{"id":<%= tag.id %>,"className":"Tag", "followStyle":"secondary"}'>
+              Follow
+            </button>
+          </div>
+        <% end %>
+
+        <% if tag.badge_id && tag.badge %>
+          <img src="<%= cloudinary tag.badge.badge_image_url, 180 %>" style="width: 64px; height: 64px; transform: rotate(<%= -25 + (tag.id.digits.first * 5) %>deg" class="right-1 bottom-1 absolute" />
+        <% end %>
       </div>
     <% end %>
   </div>
-  <div class="side-bar sidebar-additional"></div>
 </div>

spec/requests/tags_spec.rb

@@ -4,7 +4,7 @@ RSpec.describe "Tags", type: :request, proper_status: true do
   describe "GET /tags" do
     it "returns proper page" do
       get "/tags"
-      expect(response.body).to include("Top 100 Tags")
+      expect(response.body).to include("Top tags")
     end
   end