Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

reza changed navbar

Browse Source
temp
Reza_ashrafi 3 years ago
parent 5c7046df04
commit d4a7e5b8c7
13 changed files with 80 additions and 131 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 180
      src/components/Navbar/index.js
  2. 5
      src/views/404/index.js
  3. 2
      src/views/AR/index.js
  4. 4
      src/views/Activation/index.js
  5. 2
      src/views/Contact/index.js
  6. 4
      src/views/Faq/index.js
  7. 2
      src/views/Home/Desktop/index.js
  8. 2
      src/views/Orders/index.js
  9. 2
      src/views/Product/index.js
  10. 2
      src/views/Products/index.js
  11. 2
      src/views/ShoppingCart/index.js
  12. 2
      src/views/Video/index.js
  13. 2
      src/views/VideoDisplay/index.js

180
src/components/Navbar/index.js
Unescape View File

@ -11,7 +11,7 @@ import OverLayer from "../OverLayer";
import cartIcon from "./cart-blue.svg"; import cartIcon from "./cart-blue.svg";
// import whiteCartIcon from "./white-cart-icon.svg"; // import whiteCartIcon from "./white-cart-icon.svg";
// import profileIcon from "./dark-crimson-profile-icon.svg"; // import profileIcon from "./dark-crimson-profile-icon.svg";
// import searchIcon from "./dark-crimson-search-box.svg"; import searchIcon from "./dark-crimson-search-box.svg";
// import lightGraySearchIcon from "./light-gray-search-box.svg"; // import lightGraySearchIcon from "./light-gray-search-box.svg";
import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg"; import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg";
// import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg"; // import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
@ -40,24 +40,14 @@ function Navbar({
isMobile, isMobile,
isLogin, isLogin,
headerOptions, headerOptions,
loginBtn,
menuItems,
category,
searchBox,
topHeader,
bottomHeader,
productCategoryTextColor,
menuItemsColor,
}) { }) {
const navigation = useNavigate(); const navigation = useNavigate();
const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } = const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } =
headerOptions; headerOptions;
const [overLayer, setOverLayer] = useState(false);
const [top, setTop] = useState(false); const [top, setTop] = useState(false);
const [search, setSearch] = useState(null); const [search, setSearch] = useState(null);
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
const [desktopMiddleFix, setDesktopMiddleFix] = useState(false);
const [desktopEndTransform, setDesktopEndTransform] = useState(false);
useEffect(() => { useEffect(() => {
if (window.scrollY === 0) { if (window.scrollY === 0) {
@ -204,112 +194,78 @@ function Navbar({
{/* portrait end */} {/* portrait end */}
</div> </div>
) : ( ) : (
<header className={`rounded-b-md w-full bg-transparent pb-1`}> <header
<div className="flex flex-row justify-between items-center px-20 border-b border-gray-200 border-solid py-4 "> className={`rounded-b-md w-full border-b border-gray-200 border-solid fixed top-0 right-0 shadow-md bg-white z-20`}
<div className="divide-x flex flex-row transform gap-4"> >
{/* <span className="text-sm font-normal text-blue52"> <div className={`w-11/12 mx-auto flex flex-col`}>
انتخاب کشور <div className="w-full flex flex-row items-center py-3 relative justify-between h-ful">
</span> */} <div className="flex flex-row items-center">
<Link to="/orders" className="text-sm font-normal text-blue52"> <Link
پیگیری سفارش to="/"
</Link> className="flex flex-row items-center text-2xl font-medium"
</div> >
<div className="flex flex-row gap-5" style={{ direction: "ltr" }}> <img src={logoIcon} className="w-8 relative bottom-1 ml-1" />
{!isLogin && ( دانوین
<Link to="/signup" className="text-sm font-semibold text-blue52">
ورود و ثبت نام
</Link>
)}
<Link to="#" className="text-sm font-normal text-blue52">
شکایات&nbsp;
</Link>
</div>
</div>
<div
className={`w-full flex flex-col z-20 ${desktopMiddleFix ? "" : ""}`}
>
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-5 px-20 z-20 border-b border-gray-200 border-solid ">
<div className="ml-10">
<Link to="/" className="flex flex-row items-center">
<img src={logoIcon} className="w-6" />
<span
className={`font-bold text-3xl text-blue52 transform translate-y-1 mr-2`}
>
دانوین
</span>
</Link> </Link>
<ul className="flex flex-row list-none items-center relative top-0.5 mr-6">
{pages.map((page, index) => (
<li key={index}>
<Link
to={page.link}
className="text-tiny font-medium text-blue5F py-2 px-4 mx-4"
>
{page.name}
</Link>
</li>
))}
</ul>
</div> </div>
<div {overLayer && (
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" <div
style={{ maxWidth: "calc(100vw / 2)" }} className="z-30 w-screen h-full fixed top-0 right-0 backdrop-filter blur-sm bg-opacity-60 bg-gray-600"
></div> onClick={() => setOverLayer(false)}
<OverLayer /> >
<div <div className="relative w-full h-full">
className="flex flex-col w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 rounded-md" <div
style={{ maxWidth: "calc(100vw / 3)" }} className="flex flex-col w-full absolute left-1/2 top-8 transform -translate-x-1/2 z-50 rounded-md"
> style={{ maxWidth: "calc(100vw / 3)" }}
<Search onChange={(val) => setSearch(val)} /> onClick={(e) => e.stopPropagation()}
{search && <SearchResult text={search} setText={setSearch} />} >
</div> <Search onChange={(val) => setSearch(val)} />
{isLogin && ( {search && <SearchResult text={search} setText={setSearch} />}
<div className="flex justify-end items-center gap-4"> </div>
<Link to="/cart" className="relative"> </div>
<img src={cartIcon} alt="" className="w-11" />
<span className="absolute -right-2 -top-0.5 w-6 h-6 flex justify-center items-center bg-blue-500 bg-opacity-90 rounded-full text-white text-tiny">
{cartProductsLength}
</span>
</Link>
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
</div> </div>
)} )}
</div>
<div <div className="flex flex-row items-center">
className={`flex items-center relative w-full py-2 px-20 border-b border-solid border-gray-200 transform bg-white ${
desktopEndTransform ? "" : ""
}`}
style={
{
// transition: "all 0.3s",
}
}
>
<div className="ml-10 flex flex-row items-center">
<img <img
src={darkCrimsonHamburgerMenu} src={searchIcon}
alt="" alt=""
className="w-8 transform translate-y-1 ml-2" className="w-7 ml-3 cursor-pointer"
onClick={() => setOverLayer(true)}
/> />
{/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */} {isLogin && (
<span className={`text-sm text-blue52 ${productCategoryTextColor}`}> <div className="flex justify-end items-center gap-4">
دسته بندی کالاها &nbsp;&nbsp; <Link to="/cart" className="relative">
</span> <img src={cartIcon} alt="" className="w-8" />
</div> <span className="absolute -right-2 -top-0.5 w-4 p-2.5 h-4 flex justify-center items-center bg-green-700 bg-opacity-100 rounded-full text-white text-xs">
<div {cartProductsLength}
className="flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" </span>
style={{ maxWidth: "calc(100vw / 2)" }} </Link>
> {/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* {menuItems.map((item, index) => (
<a
href="#"
className={`text-sm text-blue52 ${menuItemsColor}`}
key={index}
>
{item}
</a>
))} */}
{pages.map((item, index) => ( {/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
</div>
)}
{1 && (
<Link <Link
to={item.link} to="/signup"
className={`text-sm text-blue52 ${menuItemsColor} hover:text-blueC0`} className="bg-blueC0 text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
key={"nav" + index}
> >
{item.name} ورود یا ثبت نام
</Link> </Link>
))} )}
</div> </div>
</div> </div>
</div> </div>
@ -322,7 +278,9 @@ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
headerOptions: state.publicApi.headerOptions, headerOptions: state.publicApi.headerOptions,
isLogin: state.user.status, isLogin: state.user.status,
cartProductsLength: state.userProduct.list?.filter((product) => product.condition < 2)?.length, cartProductsLength: state.userProduct.list?.filter(
(product) => product.condition < 2
)?.length,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
@ -333,18 +291,10 @@ export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
Navbar.defaultProps = { Navbar.defaultProps = {
pages: [ pages: [
{
link: "/",
name: "خانه",
},
{ {
link: "/products", link: "/products",
name: "محصولات", name: "محصولات",
}, },
{
link: "/filter",
name: "دسته بندی ها",
},
{ {
link: "/contact-us", link: "/contact-us",
name: "تماس با ما", name: "تماس با ما",

5
src/views/404/index.js
Unescape View File

@ -9,8 +9,7 @@ function NotFound({ headerOptions, setHeaderOptions }) {
}, []); }, []);
return ( return (
<div <div
className="w-full flex h-full transform justify-center items-center flex-col bg-transparent px-4" className="w-full flex h-screen transform justify-center items-center flex-col bg-transparent px-4"
style={{ height: "calc(100vh - 160px)" }}
> >
<h1 <h1
className="dark:text-white text-5xl font-semibold" className="dark:text-white text-5xl font-semibold"
@ -19,7 +18,7 @@ function NotFound({ headerOptions, setHeaderOptions }) {
404 404
</h1> </h1>
<img src={notFoundImage} alt="404" className="mt-10" /> <img src={notFoundImage} alt="404" className="mt-10" />
<p className="text-base dark:text-white mt-12"> <p className="text-base dark:text-white mt-12 leading-7">
وای!! وای!!
<br /> <br />
صفحه ای که بدنبال آن بوده‌اید دیگر وجود ندارد :( صفحه ای که بدنبال آن بوده‌اید دیگر وجود ندارد :(

2
src/views/AR/index.js
Unescape View File

@ -12,7 +12,7 @@ function AR({ getArList, arList, headerOptions, setHeaderOptions }) {
}, []); }, []);
return ( return (
<div className="flex flex-col flex-1 gap-4 px-4"> <div className="flex flex-col flex-1 gap-4 px-4 lg:w-1/2 lg:min-h-screen lg:py-24 lg:mx-auto">
{arList.length > 0 && {arList.length > 0 &&
arList.map((book, index) => <Book book={book} key={index} />)} arList.map((book, index) => <Book book={book} key={index} />)}
</div> </div>

4
src/views/Activation/index.js
Unescape View File

@ -18,8 +18,8 @@ function Activation({ headerOptions, setHeaderOptions, isMobile }) {
}, []); }, []);
return ( return (
<div <div
className="w-full flex h-full flex-col bg-transparent" className="w-full flex h-full flex-col bg-transparent lg:pt-36 lg:pb-24"
style={{ height: "calc(100vh - 145px)" }} // style={{ height: "calc(100vh - 145px)" }}
> >
<Header bg={isMobile ? qrBgImage : desktopQrBgImage} title="فعال‌سازی کتاب دیجیتال" /> <Header bg={isMobile ? qrBgImage : desktopQrBgImage} title="فعال‌سازی کتاب دیجیتال" />
<div className="flex-1 flex flex-col justify-between lg:justify-start px-4 lg:w-1/4 lg:mx-auto"> <div className="flex-1 flex flex-col justify-between lg:justify-start px-4 lg:w-1/4 lg:mx-auto">

2
src/views/Contact/index.js
Unescape View File

@ -48,7 +48,7 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
return ( return (
<div <div
className="w-full flex h-auto flex-col bg-transparent" className="w-full flex h-auto flex-col bg-transparent lg:pt-36 lg:pb-24"
// style={{ height: "calc(100vh - 140px)" }} // style={{ height: "calc(100vh - 140px)" }}
> >
<Header <Header

4
src/views/Faq/index.js
Unescape View File

@ -18,8 +18,8 @@ function Faq({ headerOptions, setHeaderOptions, isMobile }) {
}, []); }, []);
return ( return (
<div <div
className="w-full flex h-full flex-col bg-transparent" className="w-full flex h-full flex-col bg-transparent lg:pt-36 lg:pb-24"
style={{ height: "calc(100vh - 145px)" }} // style={{ height: "calc(100vh - 145px)" }}
> >
<Header <Header
bg={isMobile ? faqBgImage : desktopFaqBgImage} bg={isMobile ? faqBgImage : desktopFaqBgImage}

2
src/views/Home/Desktop/index.js
Unescape View File

@ -61,7 +61,7 @@ const DesktopHome = ({ grades, getBooks, books, getVODs, listVOD }) => {
},[]); },[]);
return ( return (
<div className="flex flex-col items-center w-11/12 justify-center my-10"> <div className="flex flex-col items-center w-11/12 justify-center py-24">
{/* <Banners {/* <Banners
mainBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg' mainBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg'
midBottomBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?' midBottomBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?'

2
src/views/Orders/index.js
Unescape View File

@ -10,7 +10,7 @@ function Orders({ orders, headerOptions, setHeaderOptions }) {
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
}, []); }, []);
return ( return (
<div className="flex flex-col px-4 lg:pb-20"> <div className="flex flex-col px-4 lg:pb-20 lg:pt-24">
{orders.map((order, index) => ( {orders.map((order, index) => (
<Order order={order} key={index} /> <Order order={order} key={index} />
))} ))}

2
src/views/Product/index.js
Unescape View File

@ -187,7 +187,7 @@ export const Product = ({
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center lg:py-24">
<DesktopProductLayout /> <DesktopProductLayout />
</div> </div>
)} )}

2
src/views/Products/index.js
Unescape View File

@ -158,7 +158,7 @@ export const Products = ({
</> </>
) : ( ) : (
<div <div
className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3 justify-center`} className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3 justify-center lg:pt-24 lg:mt-0`}
> >
<div className="w-11/12 flex flex-row gap-5"> <div className="w-11/12 flex flex-row gap-5">
<Sidebar onChange={onChange} /> <Sidebar onChange={onChange} />

2
src/views/ShoppingCart/index.js
Unescape View File

@ -165,7 +165,7 @@ function ShoppingCart({
</div> </div>
) : ( ) : (
<div <div
className={`w-11/12 mx-auto flex flex-row relative gap-10 px-5 mt-10 pb-20 ${ className={`w-11/12 mx-auto flex flex-row relative gap-10 px-5 mt-10 pb-20 pt-24 ${
desktopContentTransform ? "top-24" : "" desktopContentTransform ? "top-24" : ""
}`} }`}
> >

2
src/views/Video/index.js
Unescape View File

@ -109,7 +109,7 @@ function Video({
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex flex-col w-11/12 min-h-screen mx-auto pb-20"> <div className="flex flex-col w-11/12 min-h-screen mx-auto pb-20 pt-24">
<header className="w-full flex flex-row gap-12"> <header className="w-full flex flex-row gap-12">
<div className="w-9/12"> <div className="w-9/12">
<Videos videos={book?.fileIds} /> <Videos videos={book?.fileIds} />

2
src/views/VideoDisplay/index.js
Unescape View File

@ -102,7 +102,7 @@ function VideoDisplay({
</div> </div>
</div> </div>
) : ( ) : (
<div className="w-11/12 flex flex-col mb-6 justify-center items-center mx-auto"> <div className="w-11/12 flex flex-col mb-6 justify-center items-center mx-auto pt-24 pb-20">
<div className="w-full flex flex-row justify-between overflow-hidden relative gap-2 mt-4"> <div className="w-full flex flex-row justify-between overflow-hidden relative gap-2 mt-4">
<div className="flex flex-col w-8/12"> <div className="flex flex-col w-8/12">
<JolPlayer <JolPlayer

Write Preview
Loading…
Cancel
Save