From 65de97600722ad1226798b3d807209243c81ea20 Mon Sep 17 00:00:00 2001
From: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
Date: Mon, 17 Feb 2025 10:13:33 -0700
Subject: [PATCH 1/3] Add open/close logic to filter containers

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
---
 app/site/projects.liquid | 28 +++++++++++++++++++++----
 app/src/css/style.css    |  7 +++++--
 app/src/js/projects.js   | 45 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/app/site/projects.liquid b/app/site/projects.liquid
index e1a7a2f82d..b328aeb748 100644
--- a/app/site/projects.liquid
+++ b/app/site/projects.liquid
@@ -25,7 +25,12 @@ layout: base
       {% comment %} filter by organization {% endcomment %}
       <div class="usa-accordion">
         <div class="usa-accordion__heading filter-heading">
-          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="organization-content" id="organization">Organization</button>
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="organization-content" id="organization">
+            Organization 
+            <svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
+            </svg>
+          </button>
         </div>
         <div id="organization-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
@@ -46,7 +51,12 @@ layout: base
       {% comment %} filter by maturity model tier {% endcomment %}
       <div class="usa-accordion">
         <div class="usa-accordion__heading filter-heading">
-          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="tier-content" id="mauturity-model-tier">Maturity Model Tier</button>
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="tier-content" id="mauturity-model-tier">
+            Maturity Model Tier
+            <svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
+            </svg>
+          </button>
         </div>
         <div id="tier-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
@@ -67,7 +77,12 @@ layout: base
       {% comment %} filter by fisma compliance level {% endcomment %}
       <div class="usa-accordion">
         <div class="usa-accordion__heading filter-heading">
-          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="fisma-level-content" id="fisma-level">FISMA Compliance Level</button>
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="fisma-level-content" id="fisma-level">
+            FISMA Compliance Level
+            <svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
+            </svg>
+          </button>
         </div>
         <div id="fisma-level-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
@@ -88,7 +103,12 @@ layout: base
       {% comment %} filter by project type {% endcomment %}
       <div class="usa-accordion">
         <div class="usa-accordion__heading filter-heading">
-          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="project-type-content" id="project-type">Project Type</button>
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="project-type-content" id="project-type">
+            Project Type
+            <svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
+            </svg>
+          </button>
         </div>
         <div id="project-type-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 38d46449f7..a5e40ba1a5 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -385,9 +385,10 @@ section:active {
   border-radius: 50px 50px 0 0;
   border: none;
   font-weight: 600; 
-  justify-content: center;
+  justify-content: space-between;
   min-width: 215px;
-  padding: 7% 0 7% 0;
+  padding: 10%;
+  align-items: center;
 }
 
 .filter-button:hover {
@@ -624,6 +625,8 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
     border: none;
     cursor: pointer;
   }
+
+  
 }
 
 @media (min-width: 768px) {
diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index 428a8e8897..d0dbb7f4a8 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -36,6 +36,51 @@ sortDirection.addEventListener('change', () => {
   sortCards(isDescending);
 })
 
+// Controls filter menus open/closed state
+document.addEventListener("DOMContentLoaded", () => {
+  function updateFilterMenuState() {
+    const filterButtons = document.querySelectorAll(".usa-accordion__button");
+    const isMobile = window.innerWidth < 768;
+
+    filterButtons.forEach((button) => {
+      const contentId = button.getAttribute("aria-controls");
+      const content = document.getElementById(contentId);
+      const icon = button.querySelector("svg use");
+
+      if(isMobile) {
+        button.setAttribute("aria-expanded", "false");
+        content.setAttribute("hidden", "true");
+        icon.setAttribute("href", "/assets/img/sprite.svg#expand_more");
+      } else {
+        button.setAttribute("aria-expanded", "true");
+        content.removeAttribute("hidden");
+        icon.setAttribute("href", "/assets/img/sprite.svg#expand_less");
+      }
+    });
+  }
+
+  updateFilterMenuState()
+
+  window.addEventListener("resize", updateFilterMenuState)
+
+  document.querySelectorAll(".usa-accordion__button").forEach((button) => {
+    button.addEventListener("click", () => {
+      const expanded = button.getAttribute("aria-expanded");
+      const content = document.getElementById(button.getAttribute("id"));
+      const icon = button.querySelector("svg use");
+      
+      if(expanded === 'false') {
+        content.removeAttribute("hidden");
+        icon.setAttribute("href", "/assets/img/sprite.svg#expand_less");
+      } else {
+        content.setAttribute("hidden", "true");
+        icon.setAttribute("href", "/assets/img/sprite.svg#expand_more");
+      }
+    });
+  });
+});
+
+
 // Keep filters after navigating back
 window.addEventListener('pageshow', (event) => {
   updateFilters();

From 79b1a288f91116a225552f21640eeba09776ce6a Mon Sep 17 00:00:00 2001
From: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
Date: Mon, 17 Feb 2025 11:36:21 -0700
Subject: [PATCH 2/3] Change filters widths dynamically

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
---
 app/src/css/style.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/src/css/style.css b/app/src/css/style.css
index a5e40ba1a5..07c1c6b9fa 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -626,7 +626,21 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
     cursor: pointer;
   }
 
+  .filters-container {
+    margin-right: 0;
+  }
+
+  .filter-button {
+    min-width: 315px;
+  }
   
+  .filter-button[aria-expanded="false"] {
+    min-width: 315px;
+  }
+
+  .usa-accordion__heading {
+    font-size: 1.2rem;
+  }
 }
 
 @media (min-width: 768px) {

From b10050a8b25584673ed06bedb3946da4318d5c3b Mon Sep 17 00:00:00 2001
From: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
Date: Mon, 17 Feb 2025 16:47:36 -0700
Subject: [PATCH 3/3] Fix prod svg links

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
---
 app/src/js/projects.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/src/js/projects.js b/app/src/js/projects.js
index d0dbb7f4a8..ee435d7463 100644
--- a/app/src/js/projects.js
+++ b/app/src/js/projects.js
@@ -12,6 +12,8 @@ const projects = setProjectsData(parsedProjectsData)
 const sortDirection = document.getElementById('sort-direction');
 const sortSelection = document.getElementById('sort-selection');
 
+
+const baseurl = siteData.baseurl
 let currentPage = 1;
 const itemsPerPage = 10;
 let filteredProjects = [...parsedProjectsData];
@@ -50,11 +52,11 @@ document.addEventListener("DOMContentLoaded", () => {
       if(isMobile) {
         button.setAttribute("aria-expanded", "false");
         content.setAttribute("hidden", "true");
-        icon.setAttribute("href", "/assets/img/sprite.svg#expand_more");
+        icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);
       } else {
         button.setAttribute("aria-expanded", "true");
         content.removeAttribute("hidden");
-        icon.setAttribute("href", "/assets/img/sprite.svg#expand_less");
+        icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_less`);
       }
     });
   }
@@ -68,13 +70,14 @@ document.addEventListener("DOMContentLoaded", () => {
       const expanded = button.getAttribute("aria-expanded");
       const content = document.getElementById(button.getAttribute("id"));
       const icon = button.querySelector("svg use");
+      console.log("2", baseurl)
       
       if(expanded === 'false') {
         content.removeAttribute("hidden");
-        icon.setAttribute("href", "/assets/img/sprite.svg#expand_less");
+        icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_less`);
       } else {
         content.setAttribute("hidden", "true");
-        icon.setAttribute("href", "/assets/img/sprite.svg#expand_more");
+        icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);
       }
     });
   });
@@ -228,7 +231,7 @@ function renderPaginationControls(totalProjectsCount) {
   if (currentPage === 1) prevButton.classList.add('usa-pagination__disabled');
   prevButton.innerHTML = `
     <svg class="usa-icon" aria-hidden="true" role="img">
-      <use xlink:href="/assets/img/sprite.svg#navigate_before"></use>
+      <use xlink:href="${baseurl}/assets/img/sprite.svg#navigate_before"></use>
     </svg>
     <span class="usa-pagination__link-text">Previous</span>
   `;
@@ -276,7 +279,7 @@ function renderPaginationControls(totalProjectsCount) {
   nextButton.innerHTML = `
     <span class="usa-pagination__link-text">Next</span>
     <svg class="usa-icon" aria-hidden="true" role="img">
-      <use xlink:href="/assets/img/sprite.svg#navigate_next"></use>
+      <use xlink:href="${baseurl}/assets/img/sprite.svg#navigate_next"></use>
     </svg>
   `;
   nextButton.addEventListener('click', () => {