DM-4553: Extract community subnav and update colors (#853)

* Extract community subnav and update colors * Adjust blue banner padding --------- Co-authored-by: Camille Villa <[email protected]>
department-of-veterans-affairs · Apr 18, 2024 · 3b219a5 · 3b219a5
1 parent 1b15969
commit 3b219a5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/app/assets/stylesheets/dm/pages/_page_builder_page.scss b/app/assets/stylesheets/dm/pages/_page_builder_page.scss
@@ -2,42 +2,69 @@
   border: none;
   font-weight: 700;
   width: 100%;
-  background-color: #D9D9D985;
+  background-color: #EBEBEB;
   color: #1B1B1B;
   text-align: left;
 
   // push text and icon to opposite ends
   display: flex;
   justify-content: space-between;
 
+  &:hover {
+    @include u-color('primary-dark');
+    span{
+      text-decoration: underline;
+    }
+  }
+
+  &:active {
+    @include u-color('primary-vivid');
+    span {
+      text-decoration: underline;
+    }
+  }
+
   @media screen and (min-width: 640px) {
     display: none;
   }
 }
 
 #community-subnav {
   ul {
+    flex-direction: row;
+    background-color: #F5F5F5;
     list-style: none;
     justify-content: space-evenly;
   }
 
   a, a:visited {
-    color: white;
+    @include u-color('primary-darker');
     text-decoration: none;
     font-weight: 700;
 
     &:hover {
+      @include u-color('primary-dark');
       text-decoration: underline;
     }
+
+    &:active {
+      @include u-color('primary-vivid');
+    }
   }
 
   a.current-page {
       text-decoration: underline;
   }
 
   @media screen and (max-width: 640px) {
+    ul {
+      flex-direction: column;
+    }
+
     li {
-      margin-top: 1rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      padding-left: 1rem;
     }
   }
 }

diff --git a/app/views/page/_community_subnav.html.erb b/app/views/page/_community_subnav.html.erb
@@ -1,8 +1,12 @@
+<button type="button" id="communitySubnavBtn" class="display-block tablet:display-none desktop:display-none padding-y-2 padding-x-2" aria-controls="community-subnav" aria-expanded="false">
+    <span><%= @page_group.name %></span>
+    <i class="text-align-right fa fa-plus"></i>
+</button>
 <nav id="community-subnav" class="font-sans-lg" aria-label="Community subnavigation">
-  <ul class="padding-x-0 padding-bottom-2 display-none tablet:padding-bottom-8 desktop:tablet:padding-bottom-8 flex-row tablet:display-flex">
+  <ul class="padding-x-0 padding-y-2 margin-y-0 display-none tablet:display-flex desktop:display-flex ">
     <% subnav_hash.each do |title, page_slug| %>
       <% break if @page_group.subnav_hash.length == 1 %>
-      <li>
+      <li class="subnav-item">
         <a href="/communities/<%= @page_group_slug %>/<%= page_slug %>" class="<%= "current-page" if params["page_slug"] == page_slug %>">
           <%= title %>
         </a>

diff --git a/app/views/page/_community_subnav_mobile.html.erb b/app/views/page/_community_subnav_mobile.html.erb
diff --git a/app/views/shared/_breadcrumbs.html.erb b/app/views/shared/_breadcrumbs.html.erb
@@ -21,10 +21,9 @@
 %>
 
 <% if @page_group&.is_community? # only shown on mobile width %>
-  <%= render partial: "page/community_subnav_mobile", locals: { community_slug: @page_group_slug } %>
+  <%= render partial: "page/community_subnav", locals: { community_slug: @page_group_slug, subnav_hash: @page_group.subnav_hash } %>
   <section class="<%= 'dm-gradient-banner' if heading.present? %><%= ' gradient-banner-with-image' if page_image.present? %> <%= classes if classes.present? %>">
-    <div class="grid-container padding-top-2 padding-bottom-8">
-        <%= render partial: "page/community_subnav", locals: { subnav_hash: @page_group.subnav_hash } %>
+    <div class="grid-container padding-y-4 desktop:padding-y-8">
         <%= render partial: 'shared/page_heading_banner',
           locals: {
             heading: heading,