Redesign series style (#3768)

app/assets/javascripts/initializers/initializeArticleReactions.js

@@ -43,6 +43,7 @@ function getNumReactions(reactionName) {
 }
 
 function initializeArticleReactions() {
+  setCollectionFunctionality();
   setTimeout(function() {
     if (document.getElementById('article-body')) {
       var articleId = document.getElementById('article-body').dataset.articleId;
@@ -146,3 +147,24 @@ function reactToArticle(articleId, reaction) {
       document.getElementById('reaction-butt-' + reaction).disabled = false;
     });
 }
+
+
+function setCollectionFunctionality() {
+  if (document.getElementById('collection-link-inbetween')) {
+    var inbetweenLinks = document.getElementsByClassName('collection-link-inbetween');
+    var inbetweenLinksLength = inbetweenLinks.length
+    for (var i = 0; i < inbetweenLinks.length; i++) {
+      inbetweenLinks[i].onclick = function(e) {
+        e.preventDefault();
+        var els = document.getElementsByClassName('collection-link-hidden');
+        var elsLength = els.length
+        for (var i = 0; i < elsLength; i++) {
+          els[0].classList.remove('collection-link-hidden');
+        }
+        for (var i = 0; i < inbetweenLinksLength; i++) {
+          inbetweenLinks[0].className = 'collection-link-hidden'
+        }
+      }
+    }  
+  }
+}

app/assets/stylesheets/article-show.scss

@@ -338,69 +338,70 @@ article {
   }
 
   .article-collection-wrapper {
-    text-align: center;
     font-family: $helvetica;
     font-size: 16px;
-
+    border-radius: 5px;
+    border: 1px solid $light-medium-gray;
+    width: 92%;
+    max-width: 500px;
+    margin: calc(1.1vw + 5px) auto 1.0vw;
+    box-shadow: $bold-shadow;
     p {
-      max-width: 90%;
-      margin: 35px auto 15px;
-      padding: 2px 0;
+      margin: 0px auto;
+      padding: calc(0.1vw + 9px);
       font-weight: bold;
-      font-style: oblique;
+      font-size: 0.96em;
     }
 
     .article-collection {
-      display: inline-block;
       user-select: none;
       font-size: 16px;
       overflow: hidden;
-      width: 92%;
-      max-width: 718px;
-      margin-bottom: 1.1vw;
       position: relative;
       z-index: 8;
-
       a {
-        color: $black;
-        padding: calc(0.3vw + 14px);
         @include themeable (
-          background,
-          theme-series-article-background,
-          darken($lightest-gray, 12%)
+          color,
+          theme-color,
+          $black
         );
-        display: inline-block;
+        padding: calc(0.1vw + 9px);
+        display: block;
         position: relative;
         z-index: 4;
-        max-width: 260px;
-        margin: 0.2vw;
-        border-radius: 100px;
-
-        &:first-child {
-          // margin-left:-5px;
+        border-top: 1px solid $light-medium-gray;
+        font-size: 0.88em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &:last-child {
+          border-bottom-left-radius: 5px;
+          border-bottom-right-radius: 5px;
         }
 
         &:hover {
           @include themeable (
             background,
             theme-series-article-hover,
-            darken($lightest-gray, 18%)
+            $lightest-gray
           );
         }
 
         &.current-article {
           @include themeable (
             background,
-            theme-current-article-background,
-            $black
+            theme-series-article-background,
+            lighten($sky-blue, 21%)
           );
-          color: white;
         }
 
         &.coming-soon {
           pointer-events: none;
           color: lighten($black, 78%);
         }
+        &.collection-link-hidden {
+          display: none;
+        }
       }
     }
 

app/views/articles/_collection.html.erb

@@ -1,19 +1,33 @@
 <% @collection = @article.collection %>
-<% if @collection.present? && @collection.articles.published.size > 1 %>
+<% @collection_size = @collection.articles.published.size %>
+<% if @collection.present? && @collection_size > 1 %>
   <div class="article-collection-wrapper article-collection-wrapper-<%= position %>">
     <% if @collection.slug.present? %>
-      <p>Part of "<%= @collection.slug %>" series</p>
+      <p><%= @collection.slug %> (<%= @collection_size %> Part Series)</p>
     <% else %>
-      <p>Part of a series</p>
+      <p><%= @collection_size %> Part Series</p>
     <% end %>
     <div class="article-collection">
       <% @collection.articles.published.order("published_at ASC").each_with_index do |article, i| %>
-        <a
-          href="<%= article.path if article.published %>"
-          class="<%= collection_link_class(@article, article) %>"
-          data-preload-image="<%= cloud_cover_url(article.main_image) %>"
-          title="Part <%= i + 1 %>: <%= article.title %>">
-        </a>
+        <% if @collection_size > 5 && i == 2 %>
+          <a
+            href="<%= article.path if article.published %>"
+            class="<%= "current-article" if @collection.articles.published.order("published_at ASC").pluck(:slug)[2..@collection_size - 3].include?(@article.slug) %> collection-link-inbetween"
+            data-preload-image="<%= cloud_cover_url(article.main_image) %>"
+            id="collection-link-inbetween"
+            data-no-instant
+            title="View more">
+            3 ... <%= @collection_size - 2 %>
+          </a>
+
+        <% end %>
+          <a
+            href="<%= article.path if article.published %>"
+            class="<%= collection_link_class(@article, article) %> <%= "collection-link-hidden" if @collection_size > 5 && (i > 1 && i < @collection_size - 2) %>"
+            data-preload-image="<%= cloud_cover_url(article.main_image) %>"
+            title="Published <%= article.readable_publish_date %>">
+            <%= i + 1 %>) <%= article.title %>
+          </a>
       <% end %>
     </div>
   </div>

app/views/layouts/_user_config.html.erb

@@ -32,9 +32,9 @@
         --theme-container-border: 1px solid #22303f;\
         --theme-subtle-border: 1px solid #1f2c3a;\
         --theme-social-icon-invert: invert(100);\
-        --theme-current-article-background: #f5f6f7;\
-        --theme-series-article-background: #636363;\
-        --theme-series-article-hover: #848484;</style>'
+        --theme-current-article-background: #1143ca;\
+        --theme-series-article-background: #314d9c;\
+        --theme-series-article-hover: #1b2e63;</style>'
     } else if (bodyClass.includes('pink-theme')) {
       document.getElementById('body-styles').innerHTML = '<style>\
       :root {\