Merge pull request #1294 from Bahati308/feature-dev

made the search bar responsive
I-TECH-UW · Nov 6, 2024 · 59cd962 · 59cd962
2 parents 456259d + 8e8eff5
commit 59cd962
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 35 deletions.
diff --git a/frontend/src/components/Style.css b/frontend/src/components/Style.css
@@ -57,7 +57,8 @@ li.clickableUserDetails:hover {
 
 .inputSearch {
   --cds-text-primary: black;
-  width: 100%;
+  /*width: 100%;*/
+  width: 50%;
   --cds-text-secondary: black;
   --cds-icon-primary: black;
 }
@@ -279,13 +280,6 @@ button {
   --cds-text-secondary: black;
 }
 
-.inputSearch {
-  --cds-text-primary: black;
-  width: 100%;
-  --cds-text-secondary: black;
-  --cds-icon-primary: black;
-}
-
 .results {
   display: flex;
   justify-content: space-between;

diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
@@ -1,21 +1,23 @@
 .main {
   position: absolute;
-  right: 175px;
-  width: 700px;
+  width: 100%;
 }
 
 .search-bar-container {
   position: absolute;
   display: flex;
   width: 100%;
   top: 10px;
-  right: -30px;
+  margin-top: 38px;
+  right: 1px;
+  /*right: -20px;*/
   box-shadow: 0em 0.1em 0.05em #ccc;
 }
 
 .search-input {
   width: 100%;
   position: relative;
+
 }
 
 .search-bar-container:hover {
@@ -28,17 +30,18 @@
   max-height: 250px;
   position: absolute;
   background-color: #f0e7e7;
-  top: 45px;
-  right: -30px;
+  top: 89px;
+  right: -1px;
   box-shadow: 0em 0.1em 0.5em #ccc;
 }
 
 .patientHead {
-  width: 680px;
+  width: 103%;
   position: relative;
   border-bottom: 2px solid #eee3e3;
   background-color: #fcfbfb;
   height: 52px;
+  right: -1px;
   box-shadow: 0em 0.01em 0.05em #ccc;
 }
 .tags {
@@ -49,32 +52,40 @@
   cursor: pointer;
 }
 
-@media (max-width: 768px) {
-  .patientHead {
-    flex-direction: column;
-  }
+
+/* Large screens (1208px and up) */
+@media (min-width: 1208px) {
+
 
   .search-bar-container {
-    flex-direction: column;
-    align-items: stretch;
+    width: 45%;
+    margin-top: 0%;
+    right: 130px;
   }
 
   .search-input {
-    width: 100%;
-  }
-}
-
-@media (min-width: 769px) and (max-width: 1024px) {
-  .patientHead {
-    flex-direction: row;
+    width: 45%;
   }
 
-  .search-bar-container {
-    flex-direction: row;
-    align-items: center;
+  .patients {
+    overflow-y: auto;
+    width: 45%;
+    max-height: 250px;
+    position: absolute;
+    background-color: #f0e7e7;
+    top: 48px;
+    right: 130px;
+    box-shadow: 0em 0.1em 0.5em #ccc;
   }
-
-  .search-input {
-    width: 75%;
+
+  .patientHead {
+    overflow-y: auto;
+    width: 600px;
+    right: -1px;
+    position: relative;
+    border-bottom: 2px solid #eee3e3;
+    background-color: #fcfbfb;
+    height: 52px;
+    box-shadow: 0em 0.01em 0.05em #ccc;
   }
 }
diff --git a/frontend/src/components/layout/search/searchBar.js b/frontend/src/components/layout/search/searchBar.js
@@ -148,4 +148,4 @@ const SearchBar = (props) => {
   );
 };
 
-export default SearchBar;
+export default SearchBar;
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -71,7 +71,8 @@ code {
   .slide-over-panel {
     width: 25%;
     /* Use percentage for width on larger screens */
-    max-width: 25%;
+   /* max-width: 25%;*/
+    max-width: 50%;
     /* Use percentage for max-width on larger screens */
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -148,4 +148,4 @@ const SearchBar = (props) => { @@
       );
     };
-    export default SearchBar;
+    export default SearchBar;