Merge pull request #28 from tunglambg131003/development

Development
tunglambg131003 · Jan 26, 2024 · 9c1ed81 · 9c1ed81
2 parents 5667065 + 0ff9a08
commit 9c1ed81
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 101 deletions.
diff --git a/frontend/src/Components/ExternalNavBar.js b/frontend/src/Components/ExternalNavBar.js
diff --git a/frontend/src/Pages/SearchPage.js b/frontend/src/Pages/SearchPage.js
@@ -1,11 +1,14 @@
 import React from "react";
 import SearchBar from "../Components/SearchBar";
-import ExNavbar from "../Components/ExternalNavBar";
+import Navbar from "../Components/Navbar";
 import Footer from "../Components/Footer";
 import {useState, useEffect} from "react";
 import "../Styles/ScrollUp.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {  faAngleUp } from "@fortawesome/free-solid-svg-icons";
+import About from "../Components/About";
+import Contact from "../Components/Contact";
+
 
 function SearchPage() {
     const [goUp, setGoUp] = useState(false);
@@ -30,8 +33,10 @@ function SearchPage() {
 
   return(
       <div>
-        <ExNavbar />
+        <Navbar />
         <SearchBar />
+        <About/>
+        <Contact/>
           <Footer />
           <div
               onClick={scrollToTop}

diff --git a/frontend/src/Styles/MeddictSearchBar.css b/frontend/src/Styles/MeddictSearchBar.css
@@ -437,3 +437,69 @@ body {
   }
 }
 
+@media (max-width: 408px) {
+  .meddict-search {
+    width: 100%;
+    max-width: 390px;
+    margin: 0 auto;
+  }
+
+  .meddict-search input {
+    width: 100%;
+    max-width: 210px;
+  }
+
+  .result-container {
+    flex-direction: column;
+    height: auto;
+    margin-top: 50px;
+  }
+
+  .result-left,
+  .result-right {
+    width: 100%;
+  }
+
+  .result-image {
+    border-radius: 0;
+  }
+
+  .result-card {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 400px) {
+  .meddict-search {
+    width: 100%;
+    max-width: 380px;
+    margin: 0 auto;
+  }
+
+  .meddict-search input {
+    width: 100%;
+    max-width: 200px;
+  }
+
+  .result-container {
+    flex-direction: column;
+    height: auto;
+    margin-top: 50px;
+  }
+
+  .result-left,
+  .result-right {
+    width: 100%;
+  }
+
+  .result-image {
+    border-radius: 0;
+  }
+
+  .result-card {
+    max-width: 100%;
+  }
+}
+
+
+