fix(listing-page):search-input-styling (#633)

* Removed dropdown button duplicate * Removed placeholder and added class for input * Placed dropdown btn in input group, removed span * Input styling + search icon placement --------- Co-authored-by: Jean Christoffer <christofferhalf6@gmail.com>
NoroffFEU · Jan 10, 2024 · 46bc643 · 46bc643
1 parent 6a66123
commit 46bc643
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 51 deletions.
diff --git a/pages/listings/index.html b/pages/listings/index.html
@@ -27,29 +27,25 @@ <h1 class="mt-2 py-1 text-center fw-bold">Job Listings</h1>
               <div class="col-md-5 w-100 col-10 ms-5 search-container">
                 <div class="input-group">
                   <label for="searchListing"></label>
-                  <input class="form-control bg-body border-top border-3 border-opacity-25 border-0" type="search" id="searchListing" data-search-listings />
-                  <span class="input-group-append">
-                    <button class="btn ms-n5" type="button">
-                      <img src="/public/assets/icons/search.svg" alt="Search icon" class="icon-sm" />
+                  <div class="search-input-group">
+                    <input class="form-control search-listing-input" type="search" id="searchListing" data-search-listings />
+                    <img src="/assets/icons/search.svg" alt="Search icon" class="icon-sm" />
+                  </div>
+                  <div class="dropdown">
+                    <button class="btn" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+                      <img src="/assets/icons/filter.svg" alt="Search icon" class="icon-sm" />
                     </button>
-                  </span>
+                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                      <li><a class="dropdown-item" href="#">All</a></li>
+                      <li><a class="dropdown-item" href="#">Latest</a></li>
+                      <li><a class="dropdown-item" href="#">Last 14 days</a></li>
+                      <li><a class="dropdown-item" href="#">Last 30 days</a></li>
+                    </ul>
+                  </div>
+                </div>
                 </div>
               </div>
-              <div class="dropdown col-2">
-                <button class="btn" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
-                  <img src="/public/assets/icons/filter.svg" alt="Search icon" class="icon-sm" />
-                </button>
-                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                  <li><a class="dropdown-item" href="#">All</a></li>
-                  <li><a class="dropdown-item" href="#">Latest</a></li>
-                  <li><a class="dropdown-item" href="#">Last 14 days</a></li>
-                  <li><a class="dropdown-item" href="#">Last 30 days</a></li>
-                </ul>
-              </div>
-
-
               </div>
-
             </div>
           </div>
         </section>

diff --git a/src/scss/custom/_allListingPage.scss b/src/scss/custom/_allListingPage.scss
@@ -10,46 +10,42 @@
   .ms-n5 {
     margin-left: -40px;
   }
+  .search-input-group {
+    position: relative;
 
-  /*
-Author: Karen Bonilla
-Team: Vetakollen
-Page: listings/index.html
-*/
-
-@media (max-width: 1199px){
-  #container-listings {
-    width: 90% !important;
-  }
-
-  .card-listing {
-    display: grid !important; 
-    grid-template-columns: auto 1fr;
-    padding-left: 8px;
-    // padding-right: 5px;
+    img {
+      position: absolute;
+      top: 10px;
+      right: 30px;
+    }
   }
 
-  #img-thumbnail {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
+  .input-group .search-listing-input {
+    background-color: var(--bs-white);
+    border: none;
+    width: 30rem;
+    height: 2.7rem;
+    margin-right: 0.8rem;
+    box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.2) inset;
+    -webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.2) inset;
+    -moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.2) inset;
 
-  #listing-card-body {
-    padding-right: 8px !important;
+    &:focus {
+      background-color: var(--bs-white);
+    }
   }
 
-  .card-title {
-    font-size: 1em !important;
-  }
+  @media (max-width: 34em) {
 
-  .card-body p {
-    font-size: 0.8em !important;
+    .input-group .search-listing-input {
+      width: 20rem;
+    }
   }
-}
 
+  @media (max-width: 25em) {
 
-@media (max-width: 1199px) {
-  .search-container {
-    margin-left: 0 !important;
+    .input-group .search-listing-input {
+      width: 16rem;
+    }
   }
-}
+