diff --git a/public/index.css b/public/index.css new file mode 100644 index 0000000..5ec23e1 --- /dev/null +++ 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 */ \ No newline at end of file diff --git a/public/index.html b/public/index.html index bc74151..02f2efe 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,7 @@ + PrimeShop diff --git a/src/App.js b/src/App.js index ca9fb2b..af084e8 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,7 @@ function App() { return ( - } /> + } /> } /> } /> } /> diff --git a/src/components/common/Header.jsx b/src/components/common/Header.jsx index 8119587..9491180 100644 --- a/src/components/common/Header.jsx +++ b/src/components/common/Header.jsx @@ -1,5 +1,5 @@ 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' @@ -7,29 +7,43 @@ 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( -
- nav("/")} /> -
- - - -
+ return ( + <> +
+ nav("/")} /> +
+ + + +
+ nav("/account/profile")} /> + nav("/cart")} /> +
- nav("/account/profile")}/> - nav("/cart")}/> -
+
+
+ nav("/")} /> + nav("/account/profile")} /> + nav("/cart")} /> +
+
+ + + +
+
+ ) } export default Header \ No newline at end of file diff --git a/src/components/home/Categories.jsx b/src/components/home/Categories.jsx index 73ec29a..96e9231 100644 --- 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 (
Categories
-
- {getCategories().map((category)=>{ - return
- - {category.name} -
- })} -
+
+ {getCategories().map((category) => { + return
+ + {category.name} +
+ })} +
) diff --git a/src/css/common/cart_item.module.css b/src/css/common/cart_item.module.css index c30938f..324b302 100644 --- 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; + + } +} \ No newline at end of file diff --git a/src/css/common/footer.module.css b/src/css/common/footer.module.css index 1edeaa6..22aea72 100644 --- 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 index 944b2b4..920afed 100644 --- 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); } - \ No newline at end of file + + + /* 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; + } + } \ No newline at end of file diff --git a/src/css/common/product_card.module.css b/src/css/common/product_card.module.css index cd2da04..5d68e96 100644 --- 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) { + } \ No newline at end of file diff --git a/src/css/common/product_carousel.module.css b/src/css/common/product_carousel.module.css index 7d45811..45aeeb2 100644 --- 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 index 94b87a9..809ed34 100644 --- 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; + } } \ No newline at end of file diff --git a/src/css/components/home/categories.module.css b/src/css/components/home/categories.module.css index 5736375..2d19723 100644 --- a/src/css/components/home/categories.module.css +++ b/src/css/components/home/categories.module.css @@ -1,21 +1,24 @@ -.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; @@ -23,25 +26,36 @@ 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; + } } \ No newline at end of file diff --git a/src/css/components/product/buybox.module.css b/src/css/components/product/buybox.module.css index dd9995a..0937c75 100644 --- a/src/css/components/product/buybox.module.css +++ b/src/css/components/product/buybox.module.css @@ -109,7 +109,8 @@ margin-right: 10px; margin-bottom: -4px; } -.secure_transaction div{ + +.secure_transaction div { align-self: baseline; margin: 0px; margin-bottom: -2px; @@ -125,4 +126,13 @@ display: flex; align-items: center; margin-bottom: 3px; +} + + + +@media screen and (max-width:500px) { + .buy_box { + width: 90%; + margin: auto; + } } \ No newline at end of file diff --git a/src/css/components/product/gallery.module.css b/src/css/components/product/gallery.module.css index 0354281..624baea 100644 --- a/src/css/components/product/gallery.module.css +++ b/src/css/components/product/gallery.module.css @@ -49,4 +49,13 @@ .active{ outline: 4px solid rgba(16, 166, 208, 0.312); /* box-shadow: 1px 1px 3px 0px rgb(40, 130, 255) ; */ +} +@media screen and (max-width:500px) { + .gallery{ + width: 98%; + margin: auto; + margin-top: 20px; + margin-bottom: 20px; + height: 60vh; + } } \ No newline at end of file diff --git a/src/css/components/product/product_Info.module.css b/src/css/components/product/product_Info.module.css index 83c5269..37a58ba 100644 --- a/src/css/components/product/product_Info.module.css +++ b/src/css/components/product/product_Info.module.css @@ -108,4 +108,10 @@ } .product_details{ margin-top: 20px; -} \ No newline at end of file +} +@media screen and (max-width:500px) { + .info{ + width: 90%; + margin: auto; + } + } \ No newline at end of file diff --git a/src/css/components/product/reviews.module.css b/src/css/components/product/reviews.module.css index 926b2b3..4903933 100644 --- a/src/css/components/product/reviews.module.css +++ b/src/css/components/product/reviews.module.css @@ -190,4 +190,22 @@ border-radius: 4px; margin-left: 15px; background-color: rgba(191, 191, 191, 0.699); -} \ No newline at end of file +} + + +@media screen and (max-width:500px) { + .reviews{ + flex-direction: column; + } + .top_reviews{ + width: 100%; + + } + .review{ + width: 100%; + margin-left: 0px; + } + .review_content{ + margin-left: 0px; + } +} diff --git a/src/css/components/product_gallery/filter.module.css b/src/css/components/product_gallery/filter.module.css index 5b4d734..511c8f9 100644 --- a/src/css/components/product_gallery/filter.module.css +++ b/src/css/components/product_gallery/filter.module.css @@ -103,4 +103,9 @@ padding:3px 14px; margin-top: 2px; padding-bottom: 50px; +} +@media screen and (max-width:500px) { + .filters{ + display: none; + } } \ No newline at end of file diff --git a/src/css/pages/account.module.css b/src/css/pages/account.module.css index 45d939d..7e695ba 100644 --- a/src/css/pages/account.module.css +++ b/src/css/pages/account.module.css @@ -122,4 +122,28 @@ } .logout h3:hover{ color: rgb(0, 115, 255); +} +@media screen and (max-width:500px) { + .sidebar{ + width: 90%; + margin-right: 0px; + margin: auto; + margin-top: 20px; + margin-bottom: 20px; + } + .main{ + flex-direction: column; + width: 100%; + } + .displayer{ + max-width: 90%; + margin-left: 0px; + margin: auto; + margin-top: 20px; + padding-left: 0px; + display: none; + } + .displayer input{ + max-width: 80%; + } } \ No newline at end of file diff --git a/src/css/pages/app.module.css b/src/css/pages/app.module.css index 16eee8e..120bf41 100644 --- a/src/css/pages/app.module.css +++ b/src/css/pages/app.module.css @@ -1,12 +1,23 @@ -.checkout,.login{ +.checkout, +.login { background-color: white; } -.products,.cart{ + +.products, +.cart { background-color: #f8f8f8; } -.account{ + +.account { background-color: #f8f8f8; } -.cart{ - min-height: 100vh; + +.cart { + min-height: 100vh; +} + +@media screen and (max-width:500px) { + .home { + padding: 0px; + } } \ No newline at end of file diff --git a/src/css/pages/cart.module.css b/src/css/pages/cart.module.css index 52e8edc..0210102 100644 --- a/src/css/pages/cart.module.css +++ b/src/css/pages/cart.module.css @@ -136,7 +136,6 @@ } .address div { - flex: 1; } @@ -278,4 +277,41 @@ text-align: left; margin-left: 20px; padding-left: 20px; +} +@media screen and (max-width:500px) { + .cart_page{ + flex-direction: column; + width: 100%; + margin-right: 0px; + margin: auto; + } + .product{ + height: 100vh; + } + .cart_contents{ + width: 98%; + } + .price_breakup{ + width: 100%; + margin: 0px; + margin: auto; + position: -webkit-sticky; + position: sticky; + bottom: 0px; + } + .price_breakup table{ + display: none; + } + .savings{ + display: none; + } + .price_breakup div:first-child{ + display: none; + } + .place_order{ + border-top:none; + } + .address div{ + flex: 2; + } } \ No newline at end of file diff --git a/src/css/pages/product.module.css b/src/css/pages/product.module.css index 31604e9..54276ef 100644 --- a/src/css/pages/product.module.css +++ b/src/css/pages/product.module.css @@ -1,4 +1,9 @@ .product{ display: flex; width: 100%; +} +@media screen and (max-width:500px) { + .product{ + flex-direction: column; + } } \ No newline at end of file diff --git a/src/css/pages/products.module.css b/src/css/pages/products.module.css index b24e93f..446b3c9 100644 --- a/src/css/pages/products.module.css +++ b/src/css/pages/products.module.css @@ -59,4 +59,24 @@ } */ .sidebar{ margin-left: 15px; +} +@media screen and (max-width:500px) { + .main{ + flex-direction: column; + width: 100%; + overflow: hidden; + } + .product{ + width: 85%; + + } + .product div{ + width: 100%; + height: 65vh; + margin: auto; + } + .sorts_cont{ + width: 100%; + overflow: scroll; + } } \ No newline at end of file diff --git a/src/pages/Product.jsx b/src/pages/Product.jsx index f62c0be..e9de3b0 100644 --- a/src/pages/Product.jsx +++ b/src/pages/Product.jsx @@ -13,14 +13,14 @@ function Product() { const pid = useParams(); return ( -
+
- - - -
- - + + + + + + ) } diff --git a/src/services/accountService.js b/src/services/accountService.js index e44f36a..37dc50f 100644 --- a/src/services/accountService.js +++ b/src/services/accountService.js @@ -38,14 +38,14 @@ export function getSavedAddresses() { export function getAddresses() { const addressObj = { id: "ADR01ID", - type: "HOME", + type: "WORK", name: "Ubaid Patel", pincode: 585389, - address: "New area Gola K", - locality: "Gulbarga", - city: "Shahabad", + address: "Sun Mobility 2nd Doddanakundi industrian area", + locality: "Seetharam palya", + city: "Bengaluru", state: "Karnataka", - landmark: "Beside Panchayat Office", + landmark: "Near seetharam palya metro station", mobile: ["9148749147", "9035035517"] } return (addressObj)