بهط ئخذهمث اخئث1

master
amir hosein gorji 3 years ago
parent de02a9aa00
commit b5e5ee0d9c
  1. 19
      src/AppRouter.js
  2. 24
      src/Redux/reducers/public.js
  3. 15
      src/views/Home/Footer/index.js
  4. 3
      src/views/Home/HomeSearch/Select/index.js
  5. 40
      src/views/Home/HomeSearch/index.js
  6. 101
      src/views/Home/HomeSearch/index.scss
  7. 9
      src/views/Home/HomeSlider/Blog/index.js
  8. 32
      src/views/Home/HomeSlider/Blog/index.scss
  9. 4
      src/views/Home/HomeSlider/Header/index.scss
  10. 18
      src/views/Home/HomeSlider/Simple/index.js
  11. 12
      src/views/Home/HomeSlider/Simple/index.scss
  12. 2
      src/views/Home/HomeSlider/index.js
  13. 38
      src/views/Home/HomeStatic/Identifier/index.js
  14. 2
      src/views/Home/HomeStatic/Simple/index.js
  15. 19
      src/views/Home/HomeStatic/Vitrin/index.js
  16. 40
      src/views/Home/HomeStatic/index.js
  17. 30
      src/views/Home/HomeStatic/index.scss
  18. 2
      src/views/Home/Navbar/Laptop/index.js
  19. 128
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  20. 62
      src/views/Home/Navbar/Mobile/index.js
  21. 23
      src/views/Home/Navbar/Mobile/index.scss
  22. 2
      src/views/Home/SingleBlog/index.js
  23. 73
      src/views/Home/index.js
  24. 5
      src/views/MyBooks/index.js
  25. 12
      src/views/Products/Product/index.js
  26. 15
      src/views/Products/Product/index.scss
  27. 2
      src/views/QRScan/index.js

@ -67,24 +67,17 @@ class AppRouter extends Component {
render() {
const mobile = window.innerWidth < 1000 ? true : false;
let status = proxy.status();
let home = mobile ? (
console.log({ status });
let home = (
<Route exact path={"/"}>
{status ? (
this.props.profile.status ? (
<Home />
) : (
// <Auth />
<Auth page={"profile"} />
)
{status && status.status == 0 ? (
<Auth page={"profile"} />
) : (
<Auth />
<Home status={status} />
)}
</Route>
) : (
<Route exact path={"/"}>
<Home />
</Route>
);
return (
<Router>
<Switch>

@ -35,21 +35,23 @@ export default function publicApi(state = initialState, action) {
switch (type) {
case "public/homePage":
let itemsLevel;
if (window.innerWidth > 1000) {
const jadidTarin = data.filter(
(item) => item.title === "جدیدترین کتابهای دانوین"
);
itemsLevel = jadidTarin[0].data
.map((item) => item.book.gradeId * 1)
.sort((a, b) => a - b)
.map((e) => grades[e]);
itemsLevel.unshift("همه");
}
// if (window.innerWidth > 1000) {
const jadidTarin = data.filter(
(item) => item.title === "جدیدترین کتابهای دانوین"
);
itemsLevel = jadidTarin[0]
? jadidTarin[0].data
.map((item) => item.book.gradeId * 1)
.sort((a, b) => a - b)
.map((e) => grades[e])
: [];
itemsLevel.unshift("پایه تحصیلی");
// }
return {
...state,
loading: false,
levels: window.innerWidth > 1000 ? [...new Set(itemsLevel)] : [],
levels: [...new Set(itemsLevel)],
error: null,
homeData: data,
};

@ -17,24 +17,21 @@ export default class Footer extends Component {
<div className="footer-container__content--box first d-flex flex-column">
<h1>دانوین کجاست؟</h1>
<p className="mt-2">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و
با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه
و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی
تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای
کاربردی می باشد، کتابهای زیادی در شصت و سه{" "}
ما در دانوین با هدف ایجاد زیرساخت تعاملی و آموزشی با تولید
محتوایی جذاب بصورت کتاب قصد داریم تغییراتی بنیادین در نظام
آموزش و پرورش کشور ایجاد کنیم.
</p>
<div className="footer__location d-flex align-items-center mt-2">
<img src={location} alt="آدرس" className="m-1" />
<p>
تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
</p>
<p>آدرس: تهران، میدان فردوسی، خیابان موسوی، پلاک ۳۰</p>
{/* <p>شماره تماس: ۸۸۸۱۴۶۳۷-۰۲۱ </p> */}
</div>
<div
className="d-flex align-items-center mt-1"
style={{ width: "55%", justifyContent: "space-between" }}
>
<div className="d-flex align-items-center">
<span>02163462405</span>
<span>۸۸۸۱۴۶۳۷</span>
<img src={contact} alt="تماس" className="m-1" />
</div>
<div className="d-flex align-items-center">

@ -56,7 +56,8 @@ export default function CustomizedSelects(props) {
parent.setState({
filters: {
...parent.state.filters,
[name]: e.target.value === "همه" ? [] : [e.target.value],
[name]:
e.target.value === "پایه تحصیلی" ? [] : [e.target.value],
},
})
}

@ -25,7 +25,7 @@ class HomeSearch extends Component {
render() {
const { height, levels } = this.props;
return (
return window.innerWidth > 1000 ? (
<div className="home-search d-flex">
<input
placeholder="جستجو در عناوین کتاب ..."
@ -44,6 +44,44 @@ class HomeSearch extends Component {
</div>
<button className="home-search__submit">جستجو</button>
</div>
) : (
<>
<div className="home-mobile-search d-flex">
<div className="home-mobile-search__select" style={{ width: "100%" }}>
<Select options={levels} name="levels" parent={this} />
<img src={dropdown} alt="فلش" />
</div>
</div>
<div className="home-mobile-search ">
<input
ref="input"
placeholder="نام یک کتاب را جستجو کنید"
className="home-mobile-search__input "
type="text"
name="searchBox"
onChange={(e) =>
this.setState({
filters: { ...this.state.filters, search: e.target.value },
})
}
/>
<button
className="home-mobile-search__submit"
style={{ float: "left" }}
onClick={() => {
this.setState({
filters: {
...this.state.filters,
search: this.refs.input.value,
},
});
}}
>
جستجو
</button>
</div>
</>
);
}
}

@ -48,9 +48,10 @@
padding: 5px 10px 5px 100px !important;
}
}
&__select {
position: relative;
margin-left: 20px;
// position: relative;
// margin-left: 20px;
& img {
position: absolute;
left: 27px;
@ -67,3 +68,99 @@
padding: 7px 50px;
}
}
.home-mobile-search {
// width: 100%;
// padding: 5px;
// box-shadow: 0px 0px 2px rgb(200, 200, 200);
// border-radius: 7px;
justify-content: space-between;
align-items: center;
flex: 1;
margin: 10px 7px 0;
font-family: numeralLight;
&__input:focus {
// border: 1px solid green;
box-shadow: 0px 0px 6px rgb(42, 197, 63);
}
&__input {
width: 100%;
padding: 10px;
box-shadow: 0px 0px 2px rgb(200, 200, 200);
border: 0px;
flex: 1;
border: 0px;
border-radius: 7px;
font-size: 11px;
color: green;
// padding: 5px 10px 0px;
font-size: 16px;
&::placeholder {
color: #d8dce5;
font-size: 16px;
}
&:focus {
outline: 0px !important;
}
}
.MuiFormControl-root {
margin: 0px !important;
margin-right: 0px !important;
width: 100%;
select:focus {
// border: 1px solid green;
box-shadow: 0px 0px 6px rgb(42, 197, 63);
}
select {
padding: 10px;
box-shadow: 0px 0px 2px rgb(200, 200, 200);
font-family: numeralLight;
height: 100%;
width: 100% !important;
direction: rtl;
border: 0px !important;
border-radius: 7px;
text-align: center !important;
color: #02733c !important;
&:focus {
background-color: white !important;
}
}
.MuiNativeSelect-icon {
display: none;
}
.MuiNativeSelect-select {
// padding: 5px 10px 5px 100px !important;
}
}
&__select {
position: relative;
width: 100%;
// margin-left: 5px;
position: relative;
top: 5px;
& img {
position: relative;
top: -20px;
left: 10px;
float: left;
width: 20px;
height: 10px;
}
select {
width: 100%;
}
}
&__submit {
position: relative;
top: -37px;
left: 5px;
border: 0px;
background-color: #7dc241;
font-size: 13px;
color: white;
border-radius: 5px;
padding: 5px 7px;
}
}

@ -110,14 +110,19 @@ export default class Simple extends Component {
<div className="mobile-slider-blog__footer d-flex mt-3">
<div className="d-flex">
{/* <img src={} /> */}
<div className="d-flex flex-column">
<div
className="d-flex flex-column"
style={{ fontSize: "12px" }}
>
<span>مطالعه کامل در {data.duration} دقیقه</span>
<span>
تاریخ انتشار {moment(data.createdAt).format("YYYY/MM/DD")}
</span>
</div>
</div>
<Link to={`/blogs/${data.id}`}>{data.buttonText}</Link>
<Link to={`/blogs/${data.id}`}>
{data.buttonText || "ادامه مطلب"}
</Link>
</div>
<span
className="mobile-slider-blog__category"

@ -62,13 +62,17 @@
.mobile-slider-blog {
margin: 10px;
padding: 5px 8px;
box-shadow: 0px 0px 5px rgb(200, 200, 200);
padding: 5px 5px;
// box-shadow: 0px 0px 5px rgb(200, 200, 200);
border: 1px solid #eee;
border-radius: 15px;
width: 100%;
text-decoration: none;
position: relative;
cursor: pointer;
a {
text-decoration: none;
}
img {
width: 100%;
height: 150px;
@ -76,25 +80,28 @@
}
h1 {
font-family: numeralMedium;
margin-top: 15px;
font-size: calc(100vw / 35);
margin-top: 8px;
font-size: 15px;
color: #6f7074;
text-decoration: none;
}
h2 {
font-family: numeralLight;
margin-top: 5px;
font-size: calc(100vw / 50);
font-size: 12px;
text-decoration: none;
color: #a5a5a5;
}
&__category {
font-family: numeralMedium;
font-family: numeralLight;
position: absolute;
top: 10px;
left: 13px;
left: 10px;
color: white;
padding: 5px 7px;
border-radius: 5px;
font-size: calc(100vw / 60);
font-size: 12px;
background-color: #ffffff44;
}
&__footer {
@ -102,20 +109,21 @@
align-items: center;
justify-content: space-between;
a {
font-family: numeralMedium;
padding: 6px 12px;
font-family: numeralLight;
font-size: 11px;
padding: 3px 6px;
background-color: #e6e6e6;
color: #02733c;
text-decoration: none;
border-radius: 5px;
font-size: calc(100vw / 50);
font-size: 10px;
&:hover {
color: #02733c;
}
}
span {
font-family: numeralLight;
font-size: calc(100vw / 50);
font-size: 11px;
color: #a5a5a5;
letter-spacing: -1px;
}

@ -53,9 +53,9 @@
& img {
position: relative;
// width: 200%;
height: 110%;
height: 100%;
// right: 40px;
bottom: 10px;
// bottom: 10px;
}
}
&__left {

@ -1,8 +1,8 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import proxy from "~/Redux/proxy";
import "./index.scss";
const status = proxy.status();
const maxDesktopSize = 1250;
const fontSize = {
@ -17,6 +17,7 @@ const fontSize = {
export default class Simple extends Component {
render() {
const mobile = window.innerWidth < 1000;
const { height, data } = this.props;
return (
<article
@ -31,13 +32,20 @@ export default class Simple extends Component {
<img
src={`https://dnvn.ir/api/v1/file/${data.book.fileIds}`}
alt={data.title}
style={{ height: mobile && !status ? 160 : null }}
/>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.name}</h1>
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
<h1 style={{ fontSize: mobile ? 14 : fontSize.desktop.h1 }}>
{data.name}
</h1>
{data.subTitle ? (
<h2 style={{ fontSize: mobile ? 14 : fontSize.desktop.h2 }}>
{data.subTitle}
</h2>
) : null}
{data.price ? (
<div className="slider-simple__price d-flex justify-content-center">
<div
style={{ fontSize: fontSize.desktop.available }}
style={{ fontSize: mobile ? 14 : fontSize.desktop.available }}
className="slider-simple__price--price d-flex"
>
{data.price} تومان

@ -1,5 +1,6 @@
.slider-simple {
padding: 10px;
padding: 0 10px;
text-align: center;
a {
width: 100%;
text-decoration: none;
@ -13,13 +14,14 @@
}
h1 {
font-family: numeralMedium;
margin-top: 15px;
color: #7dc241;
margin-top: 5px;
margin-bottom: 5px;
color: #41c26f;
letter-spacing: -1px;
}
h2 {
font-family: numeralLight;
margin-top: 10px;
margin-top: 5px;
color: #6f7074;
}
}
@ -32,7 +34,7 @@
}
&__price {
width: 100%;
margin-top: 15px;
margin-top: 5px;
text-align: center;
&--old {
font-family: numeralLight;

@ -146,7 +146,7 @@ export default class HomeSlider extends Component {
itemsToShow={number}
isRTL={true}
enableTilt={false}
showArrows={true}
showArrows={false}
pagination={false}
>
{data.map((item, i) => (

@ -1,29 +1,17 @@
import React from 'react';
import Flex from '../Flex/index';
import Simple from '../Simple/index';
import Vitrin from '../Vitrin/index';
import Column from '../3D/index';
import React from "react";
import Flex from "../Flex/index";
import Simple from "../Simple/index";
import Vitrin from "../Vitrin/index";
import Column from "../3D/index";
export default function Identifier(props){
const {data} = props;
return(
export default function Identifier(props) {
const { data, status } = props;
return (
<>
{
data.design === 'flex' ?
<Flex data={data} /> : null
}
{
data.design === 'simple' ?
<Simple data={data} /> : null
}
{
data.design === 'vitrin' ?
<Vitrin data={data} /> : null
}
{
data.design === '3d' ?
<Column data={data} /> : null
}
{data.design === "flex" ? <Flex data={data} /> : null}
{data.design === "simple" ? <Simple data={data} status={status} /> : null}
{data.design === "vitrin" ? <Vitrin data={data} /> : null}
{data.design === "3d" ? <Column data={data} /> : null}
</>
);
}
}

@ -9,7 +9,7 @@ const fontSize = {
};
export default function Simple(props) {
const { data } = props;
const { data, status } = props;
const parentStyle = {
// backgroundImage: `url('${data.imageUrl}')`,
background: data.fileId

@ -23,38 +23,39 @@ export default function Vitrin(props) {
};
return (
<div
<Link
to={data.link}
className="mobile-home-static__vitrin d-flex flex-column"
style={style}
>
<Link to={data.link}>
<span to={data.link}>
<h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
</Link>
</span>
<div className="d-flex align-items-end" style={{ margin: "auto" }}>
{data.books.map((item, i) => (
<Item data={item} key={i} />
))}
<Link to={data.link} style={{ fontSize: fontSize.span }}>
<span to={data.link} style={{ fontSize: fontSize.span }}>
مشاهده بیشتر
</Link>
</span>
</div>
</div>
</Link>
);
}
const Item = (props) => {
const { data } = props;
return (
<Link
to={"/products/physical/" + data.id}
<div
// to={"/products/physical/" + data.id}
className="mobile-home-static__vitrin--product d-flex"
>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={"عکس محصول"}
/>
</Link>
</div>
);
};

@ -1,9 +1,9 @@
import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import Identifier from "./Identifier/index";
import proxy from "~/Redux/proxy";
import "./index.scss";
const status = proxy.status();
const maxDesktopSize = 1250;
const fontSize = {
@ -49,11 +49,15 @@ export default class HomeStatic extends Component {
{window.innerWidth < 1000 ? (
<section
className="mobile-home-static d-flex"
style={{ height: height }}
style={{ height: height, margin: "5px 0px" }}
>
{data.map((item, i) => (
<Identifier data={item} key={i} />
))}
{data.map((item, i) =>
status ? (
<Identifier data={item} key={i} status={status} />
) : (
<Item data={item} height={height} key={i} />
)
)}
</section>
) : null}
</>
@ -85,7 +89,29 @@ const Item = (props) => {
alt="عکس"
/>
</div>
) : null}
) : (
<div
style={{
width: `${props.data.width}%`,
height: props.height,
}}
className="home-static__list2--item"
>
<img
src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`}
alt="عکس"
style={{ float: "left" }}
/>
<div className="d-flex flex-column">
<h2 style={{ color: "#02733c", fontSize: 12 }}>
{props.data.topText}
</h2>
<h2 style={{ color: "#7dc241", fontSize: 12 }}>
{props.data.bottomText}
</h2>
</div>
</div>
)}
</>
);
};

@ -1,6 +1,7 @@
.home-static {
margin: 20px 0px;
width: 100%;
justify-content: space-between;
&__list {
justify-content: space-between;
width: 100%;
@ -24,6 +25,35 @@
}
}
}
&__list2 {
justify-content: space-between;
// width: 50%;
&--item {
// box-shadow: 0px 0px 5px rgb(200, 200, 200);
border: 1px solid #eee;
font-family: numeralMedium;
align-items: center;
border-radius: 10px;
margin: 5px;
padding: 15px 10px;
justify-content: space-around;
text-align: center;
div {
text-align: right;
h2 {
// font-weight: bold;
font-size: 20px;
letter-spacing: -1px;
}
}
img {
padding-top: 5px;
margin: auto;
// border-radius: 10px;
height: 35px;
}
}
}
}
.mobile-home-static {

@ -91,7 +91,7 @@ export default class LaptopNavbar extends Component {
to={"/auth"}
className="laptop-navbar__signup"
>
ورود به حساب کاربری
ورود یا ثبتنام
</Link>
</>
)}

@ -20,7 +20,7 @@ import mobileMail from "~/assets/icons/mobileMail.svg";
import mobileProfile from "~/assets/icons/mobileProfile.svg";
import mobileDanger from "~/assets/icons/mobileDanger.svg";
import mobileLogout from "~/assets/icons/mobileLogout.svg";
import proxy from "~/Redux/proxy";
import "./NavbarDrawer.scss";
class NavbarDrawer extends Component {
state = {
@ -28,44 +28,102 @@ class NavbarDrawer extends Component {
};
render() {
const statusx = proxy.status();
this.links = [
{
name: "صفحه اصلی",
link: "/",
icon: <img src={mobileHome} alt="صفحه اصلی" />,
toast: "",
message: "",
},
{
name: "ورود یا ثبت نام",
link: "/auth",
icon: <img src={mobileLogout} alt="کتابهای من" />,
toast: "",
message: "",
},
{
name: "فروشگاه",
link: "/products",
icon: <img src={mobileBlog} alt="کتابهای من" />,
toast: "",
message: "",
},
{
name: "بلاگ",
link: "/blogs",
icon: <img src={mobileBlog} alt="بلاگ" />,
toast: "",
message: "",
},
{
name: "پشتیبانی",
link: "/support",
icon: <img src={mobileDanger} alt="پشتیبانی" />,
toast: "",
message: "",
// onClick: this.props.logout,
},
{
name: "خروج",
link: "/auth",
icon: <img src={mobileLogout} alt="خروج" />,
toast: "",
message: "",
onClick: () => {
localStorage.removeItem("refresh");
localStorage.removeItem("access");
localStorage.removeItem("userData");
window.location.reload();
},
},
];
const { status } = this.props;
let score = 2;
return (
<div className="navbar-drawer d-flex flex-column">
<div className="navbar-drawer__header d-flex align-items-center">
<>
<Avatar
style={{ width: 60, height: 60 }}
alt="Remy Sharp"
src={
status.picFileId
? `https://dnvn.ir/api/v1/file/${status.picFileId}`
: ""
}
/>
<div className="navbar-drawer__header--right d-fex flex-column">
<h1>{status.firstName + " " + status.lastName}</h1>
</div>
</>
{statusx ? (
<div className="navbar-drawer__header d-flex align-items-center">
<>
<Avatar
style={{ width: 60, height: 60 }}
alt="Remy Sharp"
src={
status.picFileId
? `https://dnvn.ir/api/v1/file/${status.picFileId}`
: ""
}
/>
{this.state.dropdown ? (
<div
className="navbar-drawer__header--dropdown"
onClick={() => this.setState({ dropdown: false })}
>
{score ? <span>{score} امتیاز</span> : null}
<KeyboardArrowUpIcon style={{ color: "grey", fontSize: 30 }} />
</div>
) : (
<div
className="navbar-drawer__header--dropdown"
onClick={() => this.setState({ dropdown: true })}
>
{score ? <span>{score} امتیاز</span> : null}{" "}
<KeyboardArrowDownIcon style={{ color: "grey", fontSize: 30 }} />
</div>
)}
</div>
<div className="navbar-drawer__header--right d-fex flex-column">
<h1>{status.firstName + " " + status.lastName}</h1>
</div>
</>
{this.state.dropdown ? (
<div
className="navbar-drawer__header--dropdown"
onClick={() => this.setState({ dropdown: false })}
>
{score ? <span>{score} امتیاز</span> : null}
<KeyboardArrowUpIcon style={{ color: "grey", fontSize: 30 }} />
</div>
) : (
<div
className="navbar-drawer__header--dropdown"
onClick={() => this.setState({ dropdown: true })}
>
{score ? <span>{score} امتیاز</span> : null}{" "}
<KeyboardArrowDownIcon
style={{ color: "grey", fontSize: 30 }}
/>
</div>
)}
</div>
) : null}
{this.state.dropdown ? (
<div className="navbar-drawer__dropdown d-flex flex-column">
{/* {this.props.users.map((item, i) => (
@ -87,7 +145,7 @@ class NavbarDrawer extends Component {
</div>
) : null}
<div className="navbar-drawer__bottom mt-3">
{this.props.links.map((item, key) => (
{(statusx ? this.props.links : this.links).map((item, key) => (
<Link
to={item.link}
key={key}

@ -11,9 +11,23 @@ import qr from "../../../../assets/icons/qr.png";
import back from "../../../../assets/icons/back.png";
import hamburger from "../../../../assets/icons/hamburger.png";
import search from "../../../../assets/icons/navbarSearch.png";
import proxy from "~/Redux/proxy";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop: {
li: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 30 : window.innerWidth / 18,
p: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28,
h2: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 23,
li: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 28,
},
};
const useStyles = makeStyles({
list: {
width: window.innerWidth * 0.8,
@ -26,6 +40,7 @@ const useStyles = makeStyles({
});
export default function MobileNavbar(props) {
const status = proxy.status();
const classes = useStyles();
const [state, setState] = useState({
top: false,
@ -63,21 +78,62 @@ export default function MobileNavbar(props) {
/>
</div>
);
if (!status)
return (
<nav className="mobile-navbar d-flex">
<div>
<div
className="mobile-navbar__menu"
onClick={toggleDrawer("right", true)}
>
<img src={hamburger} alt="منو" />
<Link to="/" className="mobile-navbar__logo2">
<img src={logo} alt="لوگو" className="logo" />
</Link>
</div>
</div>
<div className="mobile-navbar__left" style={{ marginLeft: 10 }}>
<Link
style={{ fontSize: 12 }}
to={"/auth"}
className="mobile-navbar__signup"
>
ورود یا ثبتنام
</Link>
{page !== "home" ? (
<Link to={"/"}>
<img src={back} alt="بازگشت" />
</Link>
) : null}
</div>
<SwipeableDrawer
anchor="right"
open={state["right"]}
onClose={toggleDrawer("right", false)}
onOpen={toggleDrawer("right", true)}
>
{list(props, "right")}
</SwipeableDrawer>
</nav>
);
return (
<nav className="mobile-navbar d-flex">
<div
{/* <div
className="mobile-navbar__logo"
// style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
>
<Link to="/">
<img src={logo} alt="لوگو" />
</Link>
</div>
</div> */}
<div
className="mobile-navbar__menu"
onClick={toggleDrawer("right", true)}
>
<img src={hamburger} alt="منو" />
<Link to="/">
<img src={logo} alt="لوگو" className="logo" />
</Link>
</div>
<div className="mobile-navbar__left">

@ -9,11 +9,27 @@
z-index: 400;
padding: 0px 10px 0px;
height: 50px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
&__signup {
font-family: numeralLight;
text-decoration: none;
color: white;
background-color: #6cbe44;
border-radius: 6px;
padding: 5px 10px;
&:hover {
color: white;
}
}
&__menu {
justify-self: flex-start;
img {
width: 26px;
}
.logo {
width: 85px;
margin-right: 10px;
}
}
&__logo {
position: absolute;
@ -26,6 +42,13 @@
width: 85px;
}
}
&__logo2 {
margin: 0 10px;
img {
// transform: translate(20px, 0px);
width: 85px;
}
}
&__left {
justify-self: flex-end;
img {

@ -32,7 +32,7 @@ export default class SingleBlog extends Component {
style={{ fontSize: fontSize.desktop.a }}
to={"/blogs/" + data.id}
>
ادامه
ادامه مطلب
</Link>
</div>
<div className="single-blog__left d-flex justify-content-center align-items-center">

@ -36,59 +36,46 @@ import Loader from "~/components/Loader/index";
// import home_ar from "~/assets/icons/home_ar(2).png";
import "./index.scss";
class Home extends Component {
componentDidMount() {
const mobile = window.innerWidth < 1000;
window.scrollTo(0, 0);
if (window.innerWidth < 1000) {
if (mobile && this.props.status) {
this.props.getHomeData({ device: 2 });
} else {
this.props.getHomeData({ device: 1 });
this.props.getHomeData({ device: 1, mobile: mobile ? 1 : 0 });
}
}
render() {
const { homeData, loading } = this.props;
const { homeData, loading, status } = this.props;
const mobile = window.innerWidth < 1000;
if (loading)
return (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
);
return (
<>
{window.innerWidth > 1000 ? (
!loading ? (
<>
<div className="home d-flex flex-column">
<Navbar page={"home"} />
{homeData.map((item, i) => (
<Identifier item={item} key={i} />
))}
</div>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
{window.innerWidth < 1000 ? (
!loading ? (
<>
<div className="mobile-home d-flex flex-column">
<Navbar page={"home"} />
{homeData.map((item, i) => (
<Identifier item={item} key={i} />
))}
</div>
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
<>
<div
className={
(this.props.status && mobile ? "mobile-home" : "home") +
" d-flex flex-column"
}
>
<Navbar page={"home"} />
{homeData.map((item, i) => (
<Identifier item={item} key={i} />
))}
</div>
{window.innerWidth > 1000 ? <Footer /> : null}
</>
</>
);
}
@ -144,7 +131,7 @@ const Identifier = (props) => {
/>
) : null
) : null}
{props.item.type === "search" && window.innerWidth > 1000 ? (
{props.item.type === "search" ? (
<HomeSearch height={props.item.height} data={props.item.data} />
) : null}
{props.item.type === "membership" && window.innerWidth > 1000 ? (

@ -27,7 +27,8 @@ const fontSize = {
class MyBooks extends React.Component {
componentDidMount() {
this.props.getList();
console.log(this.props);
// this.props.getList();
window.scrollTo(0, 0);
}
@ -109,7 +110,7 @@ class MyBooks extends React.Component {
export default connect(
(state) => ({
list: state.userProduct.mylist,
list: state.userProduct.mylist || [],
checkEmpty: state.userProduct.checkEmpty,
// status: state.user.status,
}),

@ -29,8 +29,8 @@ export default class Product extends Component {
return (
<>
{window.innerWidth < 1000 ? (
<div
// to={`/products/physical/${product.id}`}
<Link
to={`/products/physical/${product.id}`}
className="mobile-products-product d-flex flex-column"
>
<img
@ -41,8 +41,8 @@ export default class Product extends Component {
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{product.name}</h1>
</div>
<div className="mobile-products-product__links d-flex mt-2">
<Link
to={`/products/physical/${product.id}`}
<div
// to={`/products/physical/${product.id}`}
style={{ fontSize: fontSize.mobile.a }}
className="mobile-products-product__links--physical d-flex justify-content-between align-items-center"
>
@ -50,7 +50,7 @@ export default class Product extends Component {
<span style={{ fontSize: fontSize.mobile.h2 }}>
{product.product[1].price} تومان
</span>
</Link>
</div>
<a
href="#"
// to={`/products/digital/${product.id}`}
@ -63,7 +63,7 @@ export default class Product extends Component {
</span>
</a>
</div>
</div>
</Link>
) : null}
{window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items-center">

@ -98,7 +98,8 @@
width: 80%;
margin: 10px auto;
justify-content: space-between;
a {
a,
div {
width: 48%;
padding: 5px 3px;
border-radius: 7px;
@ -142,7 +143,8 @@
margin: 0px;
text-align: center;
}
a {
a,
div {
width: 48%;
padding: 5px 3px;
border-radius: 7px;
@ -163,7 +165,8 @@
margin: 10px auto;
flex-direction: column;
a {
a,
div {
width: 100%;
padding: 10px 5px;
border-radius: 7px;
@ -206,7 +209,8 @@
color: #4d4d4d;
letter-spacing: -1px;
}
a {
a,
div {
width: 48%;
padding: 5px 3px;
border-radius: 7px;
@ -227,7 +231,8 @@
margin: 10px auto;
flex-direction: column;
a {
a,
div {
width: 100%;
padding: 10px 5px;
border-radius: 7px;

@ -93,7 +93,7 @@ class QRScan extends Component {
{window.innerWidth < 1000 ? (
<>
<div className="mobile-qr-scan d-flex flex-column">
<Navbar page="home" />
<Navbar page="qr-scan" />
{/* <div className="mobile-qr-scan__back d-flex">
<Link to="/">بازگشت</Link>
</div> */}

Loading…
Cancel
Save