Merge pull request #42 from CityOfPhiladelphia/cherrypick-search-btn-fix

separated search button and search bar
CityOfPhiladelphia · Sep 6, 2024 · 117df1a · 117df1a
2 parents e002870 + f69ece6
commit 117df1a
Showing 1 changed file with 50 additions and 9 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -39,7 +39,7 @@
     </div>
 
     <div class="add-margins-search">    
-      <div class="search">
+      <div class="vue-search">
         <input
           id="search-bar"
           v-model="search"
@@ -48,20 +48,19 @@
           type="text"
           :placeholder="$t('Search by title or keyword')"
         >
-        <input
-          ref="archive-search-bar"
-          type="submit"
-          class="search-submit"
-          value="Search"
-          tabindex="-1"
-        >
         <button
           v-if="search.length > 0"
           class="clear-search-btn"
           @click="clearSearchBar"
         >
           <i class="fas fa-times " />
         </button>
+        <button
+          class="search-submit"
+          @click="requestData()"
+        >
+          <i class="fa-solid fa-magnifying-glass" />
+        </button>
       </div>
     </div>
 
@@ -607,6 +606,48 @@ export default {
     border-bottom: 12px solid #2176d2;
   }
 
+  .vue-search {
+    position: relative;
+    display: flex;
+
+    .search-field{
+      min-height: 3.8rem;
+      border: 2px solid #0f4d90;
+      background: white;
+    }
+
+    .clear-search-btn {
+      position: absolute;
+      top:16px;
+      right: 70px;
+      padding: 0;
+      font-size: 20px;
+      background-color: #fff;
+      opacity: 0.8;
+      cursor: pointer;
+      color: rgba(60, 60, 60, 0.5);
+        &:hover {
+        background: transparent;
+        color: black;
+      }
+    }
+
+    .search-submit{ 
+      padding: 0.4rem;
+      font-size: 2rem;
+      font-weight: 400;
+      background: #0f4d90;
+      color: white;
+      width: 3.8rem;
+      height: 3.8rem;
+      cursor: pointer;
+    }
+
+    .fa-magnifying-glass{
+      font-weight: normal;
+    }
+  }
+
   .clear-button {
     color: #ffffff;
     background-color: #0F4D90;
@@ -789,7 +830,7 @@ export default {
       margin-right: 0px;
     }
 
-    .search {
+    .vue-search {
       width: 95%;
       margin: 0 auto;
     }