Add mobile resposiveness

added basic responsiveness to all pages to support mobile devices
ubaid-patel · Feb 7, 2024 · aad3622 · aad3622
1 parent 05aea3a
commit aad3622
Show file tree

Hide file tree

Showing 24 changed files with 359 additions and 68 deletions.
diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,23 @@
+/* For WebKit browsers (e.g., Chrome, Safari) */
+body::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+/* For Firefox */
+/* Note: In Firefox, you need to set this property on the root element */
+body {
+
+    /* Hide horizontal scrollbar */
+}
+
+body::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.example {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+/* For Microsoft Edge and Internet Explorer */
+/* Note: In IE, you need to set this property on the body element */
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000" />
     <meta name="description" content="Prime Shop the best e-commerce app" />
+    <link rel="stylesheet" href="/index.css">
     <title>PrimeShop</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -21,7 +21,7 @@ function App() {
 
   return (
     <Routes>
-      <Route path="/" element={<Home/>} />
+      <Route path="/"element={<div className={styles.home}><Home/></div>} />
       <Route path="/product/:pid" element={<div className={styles.product}><Product/></div>} />
       <Route path="/checkout/:pid" element={<div className={styles.checkout}><Checkout/></div>} />
       <Route path="/login" element={<div className={styles.login}><Login/></div>} />

diff --git a/src/components/common/Header.jsx b/src/components/common/Header.jsx
@@ -1,35 +1,49 @@
 const logo = '/logo.png'
-const search = '/search.svg'
+const searchIcon = '/search.svg'
 const accountCircle = '/account_circle.jpg'
 const cart = '/shopping_cart.jpg'
 import { useNavigate } from 'react-router-dom'
 import styles from '../../css/common/header.module.css'
 import SuggestionBox from '../home/SuggestionBox'
 import { useState } from 'react'
 
-function Header (){
+function Header() {
     const nav = useNavigate();
-    const [search,setSearch] = useState(false)
-    function showSugestions(event){
+    const [search, setSearch] = useState(false)
+    function showSugestions(event) {
         event.preventDefault();
-        if(event.target.value != ''){
+        if (event.target.value != '') {
             setSearch(true)
-        }else{
+        } else {
             setSearch(false)
         }
     }
-    return(
-        <header className={styles.header}>
-            <img src={logo} className={styles.logo} onClick={()=>nav("/")} />
-            <div className={styles.searchBar}>
-                <img src={search} className={styles.search}/>
-                <input type="text" className={styles.searchInput} onKeyUp={showSugestions}/>
-                <SuggestionBox show={search}/>
-            </div>
+    return (
+        <>
+            <header className={styles.header}>
+                <img src={logo} className={styles.logo} onClick={() => nav("/")} />
+                <div className={styles.searchBar}>
+                    <img src={searchIcon} className={styles.search} />
+                    <input type="text" className={styles.searchInput} onKeyUp={showSugestions} />
+                    <SuggestionBox show={search} />
+                </div>
+                <img src={accountCircle} className={styles.accountCircle} onClick={() => nav("/account/profile")} />
+                <img src={cart} className={styles.cart} onClick={() => nav("/cart")} />
+            </header>
 
-            <img src={accountCircle} className={styles.accountCircle} onClick={()=>nav("/account/profile")}/>
-            <img src={cart} className={styles.cart} onClick={()=>nav("/cart")}/>
-        </header>
+            <header className={styles.mob_header}>
+                <div className={styles.row_one}>
+                    <img src={logo} className={styles.mob_logo} onClick={() => nav("/")} />
+                    <img src={accountCircle} className={styles.mob_accountCircle} onClick={() => nav("/account/profile")} />
+                    <img src={cart} className={styles.mob_cart} onClick={() => nav("/cart")} />
+                </div>
+                <div className={styles.searchBar}>
+                    <img src={searchIcon} className={styles.search} />
+                    <input type="text" className={styles.searchInput} onKeyUp={showSugestions} />
+                    <SuggestionBox show={search} />
+                </div>
+            </header>
+        </>
     )
 }
 export default Header
diff --git a/src/components/home/Categories.jsx b/src/components/home/Categories.jsx
@@ -1,18 +1,18 @@
 import styles from '../../css/components/home/categories.module.css'
 import { getCategories } from '../../services/homeService'
-function Categories(){
-    return(
+function Categories() {
+    return (
         <div className={styles.main}>
             <span className={styles.title}>Categories</span>
             <div className={styles.background}>
-            <div className={styles.categories}>
-                {getCategories().map((category)=>{
-                    return <div className={styles.category}>
-                        <img className={styles.icon} src={category.icon}/>
-                        <span className={styles.name}>{category.name}</span>
-                    </div>
-                })}
-            </div>
+                <div className={styles.categories}>
+                    {getCategories().map((category) => {
+                        return <div className={styles.category}>
+                            <img className={styles.icon} src={category.icon} />
+                            <span className={styles.name}>{category.name}</span>
+                        </div>
+                    })}
+                </div>
             </div>
         </div>
     )

diff --git a/src/css/common/cart_item.module.css b/src/css/common/cart_item.module.css
@@ -130,3 +130,35 @@
     display: flex;
     align-items: center;
 }
+
+@media screen and (max-width:500px) {
+    .product{
+        flex-direction: column;
+    }
+    .thumbnail{
+        margin: auto;
+        height:50vh;
+        width: 100%;
+    }
+    .thumbnail img{
+
+        max-width: 100%;
+        max-height: 100%;
+    }
+    .prod_head{
+        flex-direction: column;
+    }
+    .delivery{
+        width: 100%;
+        margin: 0px;
+        margin-bottom: 5px;
+    }
+    .title{
+        margin-bottom: 5px;
+    }
+    .controls{
+        width: 95%;
+        text-align: center;
+
+    }
+}
diff --git a/src/css/common/footer.module.css b/src/css/common/footer.module.css
@@ -20,3 +20,16 @@
     text-decoration: none;
     color: black;
 }
+@media screen and (max-width:500px) {
+    .footer{
+        width: 100%;
+        padding: 0px;
+        padding-left: 10px;
+        padding-bottom: 50px;
+
+        padding-right: 10px;
+    }
+    .footer::-webkit-scrollbar{
+        display: none;
+    }
+}
diff --git a/src/css/common/header.module.css b/src/css/common/header.module.css
@@ -1,7 +1,9 @@
 :root {
     --commongap: 105px;
   }
-
+  .mob_header{
+    display: none;
+  }
   .header {
     max-width: 100%;
     box-sizing: border-box;
@@ -58,4 +60,43 @@
     display: inline-block;
     margin-left: var(--commongap);
   }
-
+
+
+  /* Header for mobile device's */
+  @media screen and (max-width:500px) {
+    .header{
+      display: none;
+    }
+    .mob_header{
+        width: 100%;
+        padding: 5px 2px;
+        display: flex;
+        flex-direction: column;
+        background-color: white;
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0px;
+        z-index: 10;
+    }
+    .mob_logo{
+      width: 70%;
+    }
+    .mob_accountCircle{
+      width: 24px;
+      height: 24px;
+      margin-left: 30px;
+    }
+    .mob_cart{
+      width: 24px;
+      height: 24px;
+      margin-left: 20px;
+    }
+    .row_one{
+      display: flex;
+      align-items: center;
+    }
+    .searchBar{
+      width: 100%;
+      margin-left: 0px;
+    }
+  }
diff --git a/src/css/common/product_card.module.css b/src/css/common/product_card.module.css
@@ -9,7 +9,7 @@
 }
 .image{
     width: 98%;
-    height: 250px;
+    height: 70%;
     display: block;
     margin: auto;
     border-radius: inherit;
@@ -39,4 +39,7 @@
 .discount{
     font-size: var(--font-size-smi);
     color: var(--color-darkgreen);
+}
+@media screen and (max-width:500px) {
+
 }
diff --git a/src/css/common/product_carousel.module.css b/src/css/common/product_carousel.module.css
@@ -56,7 +56,8 @@
     }
     .items{
         overflow: scroll;
-        width: 98%;
+        width:  100%;
+        padding-left: 10px;
     }
     .back,.forward{
         display: none;

diff --git a/src/css/components/home/carousel.module.css b/src/css/components/home/carousel.module.css
@@ -74,13 +74,14 @@
     text-align: center;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 500px) {
     .carousel{
         width: 95%;
         height: 250px;
         margin: auto;
         overflow: hidden;
         position: relative;
+        margin-bottom: 0px;
 
     }
     .carousel img{
@@ -90,4 +91,8 @@
     .prevbtn,.nextbtn{
         display: none;
     }
+    .main{
+        height: max-content;
+        margin-bottom: 20px;
+    }
 }
diff --git a/src/css/components/home/categories.module.css b/src/css/components/home/categories.module.css
@@ -1,47 +1,61 @@
-.main{
+.main {
     width: 90%;
     margin: auto;
     margin-bottom: 50px;
 }
-.background{
+
+.background {
     background-color: #D9D9D9;
     border-radius: var(--br-6xs);
     padding: 20px 0px;
 }
-.title{
+
+.title {
     text-align: left;
     font-weight: 400;
     font-size: var(--font-size-mid);
 }
-.categories{
+
+.categories {
     width: 80%;
-    border-radius: 30px solid  black;
+    border-radius: 30px solid black;
     background-color: #D9D9D9;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: auto;
     text-align: center;
 }
-.category{
+
+.category {
     text-align: center;
     flex: 1;
 }
-.icon{
+
+.icon {
     border-radius: 50%;
     border: 1px solid black;
     width: 100px;
 }
-.name{
+
+.name {
     text-align: center;
     font-size: var(--font-size-mini);
     display: block;
 }
+
 @media screen and (max-width:500px) {
-.main{
-    width: 100%;
-}
-.categories{
-    overflow: scroll;
-}
+    .main {
+        width: 100%;
+    }
+
+
+    .background {
+        width: 100%;
+        overflow: scroll;
+        padding: 5px 3px;
+    }
+    .categories {
+   width: max-content;
+    }
 }