Fix dynamic search

Signed-off-by: Dinne Kopelevich <[email protected]>
DSACMS · Feb 18, 2025 · a0aa4c0 · a0aa4c0
1 parent b10050a
commit a0aa4c0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 5 deletions.
diff --git a/app/site/projects.liquid b/app/site/projects.liquid
@@ -177,7 +177,7 @@ layout: base
                   <option value="ascending">Ascending</option>
                   <option value="descending">Descending</option>
                 </select>
-                <svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
+                <svg class="usa-icon filter-icon sort-icon" aria-hidden="true" focusable="false" role="img">
                   <use href="{{ site.baseurl }}/assets/img/sprite.svg#sort_arrow"></use>
                 </svg>
               </div>

diff --git a/app/src/css/style.css b/app/src/css/style.css
@@ -274,7 +274,7 @@ a.usa-link:visited {
 .search-block {
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+  align-items: flex-end;
 }
 
 .dashboard-container {
@@ -296,9 +296,9 @@ a.usa-link:visited {
   z-index: 10;
 }
 
-section:active {
+/* section:active {
   border: #E7C000;
-}
+} */
 
 .usa-search--small [type=submit], .usa-search--small .usa-search__submit {
   padding-left: 0.75rem;
@@ -323,6 +323,10 @@ section:active {
   border: none
 }
 
+#sort-direction {
+  width: 90%;
+}
+
 .sort-outer {
   display: flex;
   background-color: #E0EAF8;
@@ -340,6 +344,11 @@ section:active {
   margin: 0 0 0 -20%;
 }
 
+.sort-icon {
+  margin-left: -30%;
+  margin-right: 8%;
+}
+
 .outer-project-template {
   height: fit-content;
   width: 90vw;
@@ -601,6 +610,13 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
 }
 
 @media (max-width: 767px) {
+  .usa-header {
+    align-items: stretch;
+  }
+  .title {
+    width: 100vw;
+  }
+
   .usa-nav {
     display: none;
     position: absolute;
@@ -641,6 +657,29 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   .usa-accordion__heading {
     font-size: 1.2rem;
   }
+
+  .search-block {
+    align-items: center;
+  }
+
+  .sort-styling {
+    width: 75vw;
+    align-items: center;
+  }
+
+  .search-styling {
+    width: 65vw;
+  }
+
+  .sort-outer {
+    margin-left: 0;
+    width: 75vw;
+  }
+
+  .sort-icon {
+    margin-left: -21%;
+    margin-right: 5%;
+  }
 }
 
 @media (min-width: 768px) {

diff --git a/app/src/js/projects.js b/app/src/js/projects.js
@@ -20,7 +20,7 @@ let filteredProjects = [...parsedProjectsData];
 
 
 // Hide sort direction when sort is not selected
-document.getElementById("sort-direction-form").hidden = true;
+// document.getElementById("sort-direction-form").hidden = true;
 
 // Main Function to create project cards, filter buttons, and hide headings based on filters
 createProjectCards();