Customize mobile search view styling

oursky · Jun 3, 2024 · fb3ab5e · fb3ab5e
2 parents cc48a86 + 7cf7da6
commit fb3ab5e
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 11 deletions.
diff --git a/public/Images/arrow-back.svg b/public/Images/arrow-back.svg
diff --git a/public/scripts/device.js b/public/scripts/device.js
@@ -194,6 +194,30 @@ function initializeSearch(viewModel, containerId) {
     placement: "bottom",
     theme: "light-border",
   });
+
+  const detachedSearchButtonList = document.querySelectorAll(
+    ".aa-DetachedSearchButton",
+  );
+  detachedSearchButtonList.forEach((detachedSearchButton) => {
+    detachedSearchButton.addEventListener("click", () => {
+      const inputForm = document.querySelector(".aa-Form");
+
+      if (inputForm.querySelector(".aa-DetachedCancelButton") != null) {
+        return;
+      }
+      const newCancelButton = document.createElement("button");
+      newCancelButton.type = "button";
+      newCancelButton.classList.add("aa-DetachedCancelButton");
+
+      newCancelButton.addEventListener("click", () => {
+        // ref https://github.com/algolia/autocomplete/blob/d0b3b27d2d22f06590cef5606062ca0e48c9003f/packages/autocomplete-js/src/__tests__/detached.test.ts#L420
+        const detachedContainer = document.querySelector(".aa-DetachedOverlay");
+        document.body.removeChild(detachedContainer);
+        document.body.classList.remove("aa-Detached");
+      });
+      inputForm.appendChild(newCancelButton);
+    });
+  });
 }
 
 function handleBrandSearchParams(viewModel) {

diff --git a/public/scripts/home.js b/public/scripts/home.js
@@ -29,13 +29,6 @@ class RootViewModel {
   }
 }
 
-function handleSearchInput(viewModel) {
-  const searchInput = document.querySelector(".aa-Input");
-  searchInput.addEventListener("input", (e) => {
-    viewModel.searchText = e.target.value;
-  });
-}
-
 function initializeAutocomplete(viewModel) {
   const { autocomplete } = window["@algolia/autocomplete-js"];
 
@@ -100,13 +93,35 @@ function initializeAutocomplete(viewModel) {
     },
   });
 
-  handleSearchInput(viewModel);
-
   tippy(".aa-ClearButton", {
     content: "Clear",
     placement: "bottom",
     theme: "light-border",
   });
+
+  const detachedSearchButtonList = document.querySelectorAll(
+    ".aa-DetachedSearchButton",
+  );
+  detachedSearchButtonList.forEach((detachedSearchButton) => {
+    detachedSearchButton.addEventListener("click", () => {
+      const inputForm = document.querySelector(".aa-Form");
+
+      if (inputForm.querySelector(".aa-DetachedCancelButton") != null) {
+        return;
+      }
+      const newCancelButton = document.createElement("button");
+      newCancelButton.type = "button";
+      newCancelButton.classList.add("aa-DetachedCancelButton");
+
+      newCancelButton.addEventListener("click", () => {
+        // ref https://github.com/algolia/autocomplete/blob/d0b3b27d2d22f06590cef5606062ca0e48c9003f/packages/autocomplete-js/src/__tests__/detached.test.ts#L420
+        const detachedContainer = document.querySelector(".aa-DetachedOverlay");
+        document.body.removeChild(detachedContainer);
+        document.body.classList.remove("aa-Detached");
+      });
+      inputForm.appendChild(newCancelButton);
+    });
+  });
 }
 function main() {
   const viewModel = new RootViewModel(window.modelItems, window.brandItems);

diff --git a/src/styles/search.css b/src/styles/search.css
@@ -58,8 +58,8 @@
 /* Mobile */
 
 .aa-DetachedFormContainer {
-  height: 64px;
-  padding: 8px 4px;
+  /* height: 64px; */
+  padding: 16px 20px;
 }
 
 .aa-DetachedSearchButton {
@@ -88,3 +88,50 @@
   box-shadow: none;
   background-color: #e5e5e5;
 }
+
+@media (max-width: 680px) {
+  .aa-SubmitButton,
+  .aa-Label,
+  .aa-InputWrapperPrefix {
+    display: none;
+  }
+  .aa-DetachedFormContainer > .aa-DetachedCancelButton {
+    display: none;
+  }
+  .aa-Form > .aa-DetachedCancelButton {
+    height: 100%;
+    background-image: url("/Images/arrow-back.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    /* margin: 0 12px 0 12px; */
+    margin: 0;
+    padding: 0 12px;
+    width: 48px;
+  }
+  .aa-Form > .aa-DetachedCancelButton:hover {
+    border: none;
+    outline: none;
+  }
+  .aa-Form > .aa-DetachedCancelButton:active {
+    outline: none;
+    background-color: #e0e0e0;
+  }
+  .aa-Form {
+    overflow: hidden;
+  }
+
+  .cancelButton {
+    height: 100%;
+  }
+  /* .aa-InputWrapperPrefix > .aa-DetachedCancelButton {
+    height: 100%;
+  } */
+  .aa-InputWrapperSuffix {
+    width: 48px;
+  }
+  .aa-Form {
+    height: 50px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+  }
+}