Karimaldeen/dm-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

check on web res and fix all bugs

Browse Source
This commit is contained in:
Moaz Dawalibi 2024-06-10 17:23:56 +03:00
commit f6c9aa9034
11 changed files with 66 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Components/Home/CategoriesSlider.tsx
View File

@ -1,5 +1,5 @@
// import Swiper core and required modules // import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules"; import { Navigation, A11y } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
@ -31,7 +31,7 @@ const CategoriesSlider = () => {
navigation navigation
breakpoints={{ breakpoints={{
320: { 320: {
slidesPerView: 2, slidesPerView: 1,
}, },
480: { 480: {
slidesPerView: 2, slidesPerView: 2,
@ -40,13 +40,12 @@ const CategoriesSlider = () => {
slidesPerView: 3, slidesPerView: 3,
}, },
768: { 768: {
slidesPerView: 4, slidesPerView: 3,
}, },
1024: { 1024: {
slidesPerView: 5, slidesPerView: 4,
}, },
}} }}
> >
{categories?.map((item: Category, index: number) => { {categories?.map((item: Category, index: number) => {
return ( return (

7
src/Components/Home/HeroSection.tsx
View File

@ -1,8 +1,13 @@
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
const HeroSection = () => { const HeroSection = () => {
const [t] = useTranslation(); const [t] = useTranslation();
const Navigate = useNavigate();
const handleNavigate = () =>{
Navigate('/categories');
}
return ( return (
<div className="HeroSection"> <div className="HeroSection">
<div> <div>
@ -10,7 +15,7 @@ const HeroSection = () => {
<div> <div>
{/* <h3> $229.50 </h3> */} {/* <h3> $229.50 </h3> */}
<button className="button">{t("Buy Now")}</button> <button className="button" onClick={handleNavigate}>{t("Buy Now")}</button>
</div> </div>
</div> </div>
<span> <span>

1
src/Components/Home/ProductSwiper.tsx
View File

@ -18,7 +18,6 @@ const ProductSwiper = ({data,isLoading}:any) => {
const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr"); const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
const swiperRef = useRef<any>(null); const swiperRef = useRef<any>(null);
const BaseProducts = (data?.products as Product[]) || ([] as []); const BaseProducts = (data?.products as Product[]) || ([] as []);
return ( return (

4
src/Components/Ui/HeaderLink.tsx
View File

@ -9,12 +9,12 @@ const HeaderLink = ({text,isMulti,extraText,extraLink}:THeaderLink) => {
return ( return (
<div className='header_link'> <div className='header_link'>
<Link to={"/"}>{t("Home")}</Link> <Link to={"/"} className='first_link'>{t("Home")}</Link>
<FaChevronRight/> <FaChevronRight/>
{ {
isMulti ? isMulti ?
<> <>
<Link to={`/${extraLink}`}>{ t(extraText || "")}</Link> <Link to={`/${extraLink}`} className='first_link'>{ t(extraText || "")}</Link>
<FaChevronRight/> <FaChevronRight/>
</> </>
: "" : ""

7
src/Styles/Auth/Auth.scss
View File

@ -5,14 +5,13 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
width: fit-content; width: fit-content;
white-space: nowrap; white-space: nowrap;
background: var(--secondary); background: var(--primary);
color: var(--text); color: var(--white);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 15px; gap: 15px;
padding-inline: 1vw; padding-inline: 10px;
padding-block: 20px;
font-size: 1vw; font-size: 1vw;
&:hover{ &:hover{
background: var(--DarkPrimary) !important; background: var(--DarkPrimary) !important;

34
src/Styles/Layout/Layout.scss
View File

@ -21,6 +21,13 @@
font-size: 20px; font-size: 20px;
letter-spacing: .7px; letter-spacing: .7px;
cursor: pointer; cursor: pointer;
.first_link{
transition: ease-in-out .1s;
&:hover{
color: var(--primary);
border-bottom: 2px solid var(--primary);
}
}
.page_title_link{ .page_title_link{
color: var(--primary); color: var(--primary);
border-bottom: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
@ -42,16 +49,10 @@
} }
} }
@media screen and (max-width:600px) { a:hover{
.header_link{
font-size: 12px;
}
}
a:hover{
color: var(--primary); color: var(--primary);
} }
.Translate{ .Translate{
border-color: transparent; border-color: transparent;
font-weight: 500; font-weight: 500;
@ -67,3 +68,18 @@
.pointer{ .pointer{
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width:600px) {
.header_link{
font-size: 12px;
}
}
@media screen and (max-width:450px) {
.Translate{
font-size: 14px !important;
margin-bottom: -5px !important;
}
.MenuButton{
font-size: 10px !important;
}
}

34
src/Styles/Layout/NavBar.scss
View File

@ -29,7 +29,6 @@
.navbar_link{ .navbar_link{
color: var(--text); color: var(--text);
opacity: .5; opacity: .5;
// font-weight: bold;
cursor: pointer; cursor: pointer;
&:hover{ &:hover{
@ -42,7 +41,7 @@
.active{ .active{
opacity: 1; opacity: 1;
border-bottom: .1vw solid var(--primary); // border-bottom: .1vw solid var(--primary);
color: var(--primary); color: var(--primary);
} }
} }
@ -80,14 +79,13 @@
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
.navbar{ .navbar{
>img{ img{
width: 50px; width: 50px;
} }
.navbar_links{ .navbar_links{
display: none; display: none;
} }
article{ article{
// display: none;
gap: 10px; gap: 10px;
} }
.menu{ .menu{
@ -99,15 +97,14 @@
} }
} }
.menu_navbar_links{ .menu_navbar_links{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
.menu_navbar_link{
.menu_navbar_link{ cursor: pointer;
cursor: pointer; }
} }
}
} }
@media screen and (max-width:450px) { @media screen and (max-width:450px) {
@ -115,13 +112,14 @@
article{ article{
gap: 2px !important; gap: 2px !important;
svg{ svg{
font-size: 10px !important; font-size: 16px !important;
}
.icon_navbar{
font-size: 10px !important;
}
} }
.icon_navbar{
width: 6px;
font-size: 14px !important;
} }
}
}
} }
.ant-drawer .ant-drawer-header-title { .ant-drawer .ant-drawer-header-title {

33
src/Styles/Page/Cart.scss
View File

@ -10,8 +10,6 @@
.ant-drawer-body{ .ant-drawer-body{
height: 100% !important; height: 100% !important;
>div{
}
} }
.Cart_Icon{ .Cart_Icon{
@ -19,16 +17,9 @@
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
@include Flex; @include Flex;
svg{
}
} }
.Badge_Button{ .Badge_Button{
margin-inline: 10px; margin-inline: 10px;
// svg{
// height: 30px;
// color: var(--white);
// font-size: 20px !important;
// }
} }
} }
@ -73,7 +64,7 @@
font-weight: 500; font-weight: 500;
text-transform:capitalize ; text-transform:capitalize ;
&:hover{ &:hover{
background: var(--DarkPrimary); background: var(--DarkPrimary) !important;
} }
} }
} }
@ -92,40 +83,20 @@
} }
} }
} }
}
}
} }
@media screen and (max-width:650px) { @media screen and (max-width:650px) {
.cart_first_section{ .cart_first_section{
span{ span{
font-size: 13px; font-size: 13px;
} }
} }
.ViewCart_Button{ .ViewCart_Button{
p{ p{
font-size: 12px; font-size: 12px;
} }
.cart_checkout_button_container{
.cart_checkout_button{ .cart_checkout_button{
font-size: 15px; font-size: 15px;
padding: 20px 10px;
} }
}
} }
}
.EmptyCard{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 5%;
gap: 20px;
img{
width: 40%;
}
p{
font-size: max(1.5vw,15px);
}
} }

8
src/Styles/Page/Home.scss
View File

@ -72,7 +72,8 @@
align-items: center; align-items: center;
img { img {
width: 150px; min-width: 140px;
max-width: 140px;
height: 150px; height: 150px;
} }
} }
@ -171,7 +172,7 @@
display: flex; display: flex;
gap: 20px; gap: 20px;
overflow-x: scroll; overflow-x: scroll;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
@ -374,7 +375,8 @@
align-items: center; align-items: center;
img { img {
width: 100px; min-width: 100px;
max-width: 100px;
height: 100px; height: 100px;
} }

6
src/Styles/components/Card.scss
View File

@ -14,7 +14,6 @@
.Card_Img { .Card_Img {
width: 40%; width: 40%;
img { img {
transform: translateX(-6px);
width: 40%; width: 40%;
} }
} }
@ -80,10 +79,9 @@
border-radius: 7px; border-radius: 7px;
} }
.Card_Img { .Card_Img {
width: 30%; width: 20%;
img { img {
width: 100%; width: 80%;
// transform: translateX(-6px);
} }
} }
.Card_Info { .Card_Info {

2
src/Styles/components/ProductCard.scss
View File

@ -11,7 +11,7 @@
position: relative; position: relative;
height: fit-content; height: fit-content;
@include Shadow; @include Shadow;
margin-inline: auto;
h4 { h4 {
font-size: 16px; font-size: 16px;
margin-bottom: 0px; margin-bottom: 0px;