From 4bf69e64c5fbe9d3e5ea22abab600b9798695233 Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Wed, 16 Sep 2020 22:03:34 +0200
Subject: [PATCH] Update search menu to use Crayons styling, v2 (#10347)

* Replace old query style with crayons link block

* Add Crayons layout

* Rename nav file and refactor how it's referenced in parent file

* Rename sidebar file

* style updates

* more changes

* podcasts

* .

* code format

Co-authored-by: Lisa Sy <lisasyis@gmail.com>
---
 .../javascripts/utilities/buildArticleHTML.js | 48 ++++++----------
 app/assets/stylesheets/widgets.scss           | 56 -------------------
 app/views/articles/_search.html.erb           |  8 +--
 app/views/articles/search.html.erb            | 30 ++++++----
 app/views/articles/search/_nav_menu.html.erb  | 17 ++++++
 app/views/articles/search/_sidebar.html.erb   | 18 ------
 .../search/_sidebar_additional.html.erb       |  5 --
 7 files changed, 56 insertions(+), 126 deletions(-)
 create mode 100644 app/views/articles/search/_nav_menu.html.erb
 delete mode 100644 app/views/articles/search/_sidebar.html.erb
 delete mode 100644 app/views/articles/search/_sidebar_additional.html.erb

diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index 863876f90..edb51b83e 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -4,37 +4,23 @@
 
 function buildArticleHTML(article) {
   if (article && article.class_name === 'PodcastEpisode') {
-    return (
-      '<div class="single-article single-article-small-pic single-article-single-podcast">\
-      <div class="small-pic">\
-       <a href="/' +
-      article.podcast.slug +
-      '" class="small-pic-link-wrapper">\
-         <img src="' +
-      article.podcast.image_url +
-      '" alt="' +
-      article.podcast.title +
-      ' image">\
-       </a>\
-       </div>\
-       <a href="' +
-      article.path +
-      '" class="small-pic-link-wrapper index-article-link" id="article-link-' +
-      article.id +
-      '">\
-        <div class="content">\
-         <h3><span class="tag-identifier">podcast</span>' +
-      article.title +
-      '</h3>\
-        </div>\
-       </a>\
-       <h4><a href="/' +
-      article.podcast.slug +
-      '">' +
-      article.podcast.title +
-      '</a></h4>\
-       </div>'
-    );
+    return `<article class="crayons-story crayons-podcast-episode mb-2">
+        <div class="crayons-story__body flex flex-start">
+          <a href="${article.podcast.slug}" class="crayons-podcast-episode__cover">
+            <img src="${article.podcast.image_url}" alt="${article.podcast.title}" />
+          </a>
+          <div class="pt-2 flex-1">
+            <p class="crayons-podcast-episode__author">
+              ${article.podcast.title}
+            </p>
+            <h2 class="crayons-podcast-episode__title crayons-story__title mb-0">
+              <a href="${article.path}" id="article-link-${article.id}">
+                ${article.podcast.title}
+              </a>
+            </h2>
+          </div>
+        </div>
+      </article>`;
   }
 
   if (article) {
diff --git a/app/assets/stylesheets/widgets.scss b/app/assets/stylesheets/widgets.scss
index 6972bbd3a..2cfcf603b 100644
--- a/app/assets/stylesheets/widgets.scss
+++ b/app/assets/stylesheets/widgets.scss
@@ -63,10 +63,6 @@
   &:hover {
     opacity: 1;
   }
-  h4 {
-    margin: 0;
-  }
-
   &.showing {
     display: block;
   }
@@ -267,51 +263,6 @@
     }
   }
 
-  // Filtering / todo: replace with tabs?
-  .query-filter-button {
-    font-size: 15px;
-    font-weight: bold;
-    background: transparent;
-    border: 0px;
-    display: block;
-    padding: 6px 8px;
-    width: calc(100% - 16px);
-    text-align: left;
-    border-radius: 0px;
-    color: var(--body-color);
-    cursor: pointer;
-    &:hover {
-      @include themeable(
-        background,
-        theme-container-background-hover,
-        lighten($bold-blue, 38%)
-      );
-    }
-    &.selected {
-      @include themeable(
-        background,
-        theme-container-accent-background,
-        lighten($bold-blue, 10%)
-      );
-      color: var(--card-color);
-    }
-    &.query-type-filter-button {
-      &:hover {
-        @include themeable(
-          background,
-          theme-container-background-hover,
-          $light-green
-        );
-      }
-      &.selected {
-        @include themeable(
-          background,
-          theme-container-accent-background,
-          darken($light-green, 10%)
-        );
-      }
-    }
-  }
   p {
     margin: 8px 0;
   }
@@ -393,13 +344,6 @@
   }
 }
 
-.query-filter-button {
-  box-sizing: border-box;
-  display: inline-block;
-  padding: var(--su-2) 0;
-  width: 100%;
-}
-
 // Sidebar sponsors
 .sidebar-sponsor {
   color: var(--card-color-tertiary);
diff --git a/app/views/articles/_search.html.erb b/app/views/articles/_search.html.erb
index 1333b5b9d..25802e08f 100644
--- a/app/views/articles/_search.html.erb
+++ b/app/views/articles/_search.html.erb
@@ -70,7 +70,7 @@
     var filterButts = document.getElementsByClassName("query-filter-button");
     for (var i = 0; i < filterButts.length; i++) {
       if (filters == filterButts[i].dataset.filter) {
-        filterButts[i].classList.add("selected");
+        filterButts[i].classList.add("crayons-link--current");
       }
       filterButts[i].onclick = function (e) {
         var currentParams = getQueryParams(document.location.search);
@@ -86,10 +86,10 @@
         window.history.pushState(null, null, "/search?q=" + query + "&filters=" + filters + sortString);
         var className = e.target.className;
         for (var i = 0; i < filterButts.length; i++) {
-          filterButts[i].classList.remove("selected");
+          filterButts[i].classList.remove("crayons-link--current");
         }
-        if (className.indexOf("selected") == -1) {
-          e.target.classList.add("selected");
+        if (className.indexOf("crayons-link--current") == -1) {
+          e.target.classList.add("crayons-link--current");
           window.history.replaceState(null, null, "/search?q=" + query + "&filters=" + filters + sortString);
           search(query, filters, sortBy, sortDirection);
         } else {
diff --git a/app/views/articles/search.html.erb b/app/views/articles/search.html.erb
index c9f15b679..b1242dbe9 100644
--- a/app/views/articles/search.html.erb
+++ b/app/views/articles/search.html.erb
@@ -2,22 +2,29 @@
   <%= render "articles/search/meta" %>
 <% end %>
 <div id="query-wrapper"></div>
-<div class="home sub-home" id="index-container"
+<header class="crayons-layout crayons-layout--limited crayons-layout--1-col p-4 block s:flex items-center space-between">
+  <h1 class="fs-2xl s:fs-3xl">Search results</h1>
+
+  <nav id="sorting-option-tabs" class="crayons-tabs ml-auto">
+    <a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :relevance %>">Most Relevant</a>
+    <a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :newest %>" data-sort-by="published_at" data-sort-direction="desc">Newest</a>
+    <a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :oldest %>" data-sort-by="published_at" data-sort-direction="asc">Oldest</a>
+  </nav>
+</header>
+
+<div class="crayons-layout crayons-layout--limited crayons-layout--2-cols pt-0" id="index-container"
      data-params="<%= params.to_json(only: %i[tag username q]) %>" data-which="<%= @list_of %>"
      data-tag=""
      data-feed="<%= params[:timeframe] || "base-feed" %>"
      data-articles-since="<%= Timeframer.new(params[:timeframe]).datetime&.iso8601 %>">
-  <%= render "articles/search/sidebar" %>
-  <div class="articles-list" id="articles-list">
+
+  <div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left">
+    <div class="sidebar-bg" id="sidebar-bg-left"></div>
+    <%= render "articles/search/nav_menu" %>
+  </div>
+
+  <div class="articles-list crayons-layout__content" id="articles-list">
     <div id="banner-section"></div>
-    <div class="flex-1 flex items-center justify-between">
-      <h2 class="fs-l fw-heavy">Results</h2>
-      <nav id="sorting-option-tabs" class="crayons-tabs hidden s:flex">
-        <a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :relevance %>">Most Relevant</a>
-        <a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :newest %>" data-sort-by="published_at" data-sort-direction="desc">Newest</a>
-        <a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :oldest %>" data-sort-by="published_at" data-sort-direction="asc">Oldest</a>
-      </nav>
-    </div>
     <div class="substories" id="substories">
       <div class="query-results-nothing">
         <div class="query-results-loader"></div>
@@ -28,7 +35,6 @@
       loading...
     </div>
   </div>
-  <%= render "articles/search/sidebar_additional" %>
 </div>
 <%= render "articles/search" %>
 
diff --git a/app/views/articles/search/_nav_menu.html.erb b/app/views/articles/search/_nav_menu.html.erb
new file mode 100644
index 000000000..195eb2e1d
--- /dev/null
+++ b/app/views/articles/search/_nav_menu.html.erb
@@ -0,0 +1,17 @@
+<div class="crayons-layout__sidebar-left search-nav px-3 m:px-0">
+  <a class="query-filter-button crayons-link crayons-link--block" data-filter="class_name:Article" href="javascript:;">
+    Posts
+  </a>
+  <a class="query-filter-button crayons-link crayons-link--block" data-filter="class_name:PodcastEpisode" href="javascript:;">
+    Podcasts
+  </a>
+  <a class="query-filter-button crayons-link crayons-link--block" data-filter="class_name:User" href="javascript:;">
+    People
+  </a>
+  <a class="query-filter-button crayons-link crayons-link--block" data-filter="class_name:Comment" href="javascript:;">
+    Comments
+  </a>
+  <a class="query-filter-button my-posts-query-button crayons-link crayons-link--block" data-filter="MY_POSTS" href="javascript:;">
+    My posts only
+  </a>
+</div>
diff --git a/app/views/articles/search/_sidebar.html.erb b/app/views/articles/search/_sidebar.html.erb
deleted file mode 100644
index 88ff55081..000000000
--- a/app/views/articles/search/_sidebar.html.erb
+++ /dev/null
@@ -1,18 +0,0 @@
-<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left">
-  <div class="sidebar-bg" id="sidebar-bg-left"></div>
-  <div class="side-bar">
-    <div class="widget fixed-widget">
-      <header>
-        <h4>search results</h4>
-      </header>
-      <div class="widget-body" style="margin-bottom:16px;">
-        <a class="query-filter-button" data-filter="class_name:Article">POSTS</a>
-        <a class="query-filter-button" data-filter="class_name:PodcastEpisode">PODCASTS</a>
-        <a class="query-filter-button" data-filter="class_name:User">PEOPLE</a>
-        <a class="query-filter-button" data-filter="class_name:Comment">COMMENTS</a>
-        <hr>
-        <a class="query-filter-button my-posts-query-button" data-filter="MY_POSTS">ONLY MY POSTS</a>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/app/views/articles/search/_sidebar_additional.html.erb b/app/views/articles/search/_sidebar_additional.html.erb
deleted file mode 100644
index 3013f5acd..000000000
--- a/app/views/articles/search/_sidebar_additional.html.erb
+++ /dev/null
@@ -1,5 +0,0 @@
-<div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right">
-  <div class="sidebar-bg" id="sidebar-bg-right"></div>
-  <div class="side-bar sidebar-additional showing" id="sidebar-additional">
-  </div>
-</div>