From b05c319c2fc85bf8512052ff1bf2c8333ed17b85 Mon Sep 17 00:00:00 2001
From: Lisa Sy <lisa@dev.to>
Date: Thu, 3 Sep 2020 20:32:44 -0400
Subject: [PATCH] Update nav menu in Notification to use crayons-link styling
 (#10196) [deploy]

* Move nav code into partials

* Update small styling with new nav menu
---
 app/assets/stylesheets/notifications.scss     |  20 ++++
 app/views/notifications/_nav_menu.html.erb    |  35 ++++++
 .../notifications/_nav_menu_filter.html.erb   |  38 ++++++
 app/views/notifications/index.html.erb        | 113 +-----------------
 4 files changed, 95 insertions(+), 111 deletions(-)
 create mode 100644 app/views/notifications/_nav_menu.html.erb
 create mode 100644 app/views/notifications/_nav_menu_filter.html.erb

diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss
index 375614782..2499f72d6 100644
--- a/app/assets/stylesheets/notifications.scss
+++ b/app/assets/stylesheets/notifications.scss
@@ -435,6 +435,26 @@
   }
 }
 
+.notification-nav {
+  margin-bottom: var(--su-4);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  header {
+    color: var(--base-80);
+  }
+
+  .crayons-link {
+    margin-bottom: var(--su-1);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .notifications-filter__list {
   li {
     margin-bottom: var(--su-1);
diff --git a/app/views/notifications/_nav_menu.html.erb b/app/views/notifications/_nav_menu.html.erb
new file mode 100644
index 000000000..713458fdf
--- /dev/null
+++ b/app/views/notifications/_nav_menu.html.erb
@@ -0,0 +1,35 @@
+<nav class="notification-nav">
+  <% if @organizations.present? %>
+    <header class="pl-2 mb-2">
+      <h4>
+        <%= @user.name %>
+      </h4>
+    </header>
+  <% end %>
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].blank? %>" href="/notifications">
+    All
+  </a>
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
+    Comments
+  </a>
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
+    Posts
+  </a>
+</nav>
+<nav class="notification-nav">
+  <% if @organizations.present? %>
+    <% @organizations.each do |org| %>
+      <header class="pl-2 mb-2">
+        <h4>
+          <%= org.name %>
+        </h4>
+      </header>
+      <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
+        All
+      </a>
+      <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
+        Comments
+      </a>
+    <% end %>
+  <% end %>
+</nav>
diff --git a/app/views/notifications/_nav_menu_filter.html.erb b/app/views/notifications/_nav_menu_filter.html.erb
new file mode 100644
index 000000000..20203551e
--- /dev/null
+++ b/app/views/notifications/_nav_menu_filter.html.erb
@@ -0,0 +1,38 @@
+<section class="notifications-filter__dropdown s:flex-col">
+  <% if @organizations.present? %>
+    <div class="p-2 s:inline-flex">
+      <select id="notifications-filter__select" class="crayons-select">
+        <option value="/notifications"><%= @user.name %></option>
+        <% @organizations.each do |org| %>
+          <option value="/notifications/org/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %></option>
+        <% end %>
+      </select>
+    </div>
+  <% end %>
+
+  <div class="s:inline-flex">
+    <nav class="crayons-tabs notifications-filter__tabs <%= "hidden" if params[:org_id].present? %>">
+      <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].blank? %>" href="/notifications">
+        All
+      </a>
+      <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
+        Comments
+      </a>
+      <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
+        Posts
+      </a>
+    </nav>
+    <% if @organizations.present? %>
+      <% @organizations.each do |org| %>
+        <nav class="crayons-tabs notifications-filter__tabs <%= "hidden" unless params[:org_id].to_i == org.id %>">
+          <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
+            All
+          </a>
+          <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
+            Comments
+          </a>
+        </nav>
+      <% end %>
+    <% end %>
+  </div>
+</section>
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index a60290d92..7487bf198 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -42,119 +42,10 @@
 <% if user_signed_in? %>
   <div class="home" id="notifications-container">
     <div class="side-bar">
-      <div class="crayons-card">
-        <header class="crayons-card__header">
-          <h3 class="crayons-card__title">Filter</h3>
-        </header>
-        <div class="crayons-card__body widget-body">
-          <section class="crayons-card__inner-section">
-            <% if @organizations.present? %>
-              <header class="crayons-card__subheader">
-                <h4 class="crayons-card__subheader__title">
-                  <%= @user.name %>
-                </h4>
-              </header>
-            <% end %>
-            <ul class="notifications-filter__list">
-              <li>
-                <a class="notifications-filter__list--item <%= "selected" if params[:filter].blank? %>" href="/notifications">
-                  All
-                  <div class="notifications-filter__icon">
-                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
-                  </div>
-                </a>
-              </li>
-              <li>
-                <a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
-                  Comments
-                  <div class="notifications-filter__icon">
-                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
-                  </div>
-                </a>
-              </li>
-              <li>
-              </li>
-                <a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
-                  Posts
-                  <div class="notifications-filter__icon">
-                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
-                  </div>
-                </a>
-              </li>
-            </ul>
-          </section>
-          <section class="crayons-card__inner-section">
-            <% if @organizations.present? %>
-              <% @organizations.each do |org| %>
-                <header class="crayons-card__subheader">
-                  <h4 class="crayons-card__subheader__title">
-                    <%= org.name %>
-                  </h4>
-                </header>
-                <ul class="notifications-filter__list">
-                  <li>
-                    <a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
-                      All
-                      <div class="notifications-filter__icon">
-                        <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
-                      Comments
-                      <div class="notifications-filter__icon">
-                        <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-              <% end %>
-            <% end %>
-          </section>
-        </div>
-      </div>
+      <%= render "notifications/nav_menu" %>
     </div>
     <div class="articles-list" id="articles-list">
-
-      <section class="notifications-filter__dropdown s:flex-col">
-        <% if @organizations.present? %>
-          <div class="p-2 s:inline-flex">
-            <select id="notifications-filter__select" class="crayons-select">
-              <option value="/notifications"><%= @user.name %></option>
-              <% @organizations.each do |org| %>
-                <option value="/notifications/org/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %></option>
-              <% end %>
-            </select>
-          </div>
-        <% end %>
-
-        <div class="s:inline-flex">
-          <nav class="crayons-tabs notifications-filter__tabs <%= "hidden" if params[:org_id].present? %>">
-            <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].blank? %>" href="/notifications">
-              All
-            </a>
-            <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
-              Comments
-            </a>
-            <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
-              Posts
-            </a>
-          </nav>
-          <% if @organizations.present? %>
-            <% @organizations.each do |org| %>
-              <nav class="crayons-tabs notifications-filter__tabs <%= "hidden" unless params[:org_id].to_i == org.id %>">
-                <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
-                  All
-                </a>
-                <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
-                  Comments
-                </a>
-              </nav>
-            <% end %>
-          <% end %>
-        </div>
-      </section>
+      <%= render "notifications/nav_menu_filter" %>
       <%= render "notifications_list", params: params %>
     </div>