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

master
amir hosein gorji 3 years ago
parent de02a9aa00
commit b5e5ee0d9c
  1. 17
      src/AppRouter.js
  2. 14
      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. 32
      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. 64
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  20. 60
      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. 49
      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() { render() {
const mobile = window.innerWidth < 1000 ? true : false; const mobile = window.innerWidth < 1000 ? true : false;
let status = proxy.status(); let status = proxy.status();
let home = mobile ? ( console.log({ status });
let home = (
<Route exact path={"/"}> <Route exact path={"/"}>
{status ? ( {status && status.status == 0 ? (
this.props.profile.status ? (
<Home />
) : (
// <Auth />
<Auth page={"profile"} /> <Auth page={"profile"} />
)
) : ( ) : (
<Auth /> <Home status={status} />
)} )}
</Route> </Route>
) : (
<Route exact path={"/"}>
<Home />
</Route>
); );
return ( return (
<Router> <Router>
<Switch> <Switch>

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

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

@ -56,7 +56,8 @@ export default function CustomizedSelects(props) {
parent.setState({ parent.setState({
filters: { filters: {
...parent.state.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() { render() {
const { height, levels } = this.props; const { height, levels } = this.props;
return ( return window.innerWidth > 1000 ? (
<div className="home-search d-flex"> <div className="home-search d-flex">
<input <input
placeholder="جستجو در عناوین کتاب ..." placeholder="جستجو در عناوین کتاب ..."
@ -44,6 +44,44 @@ class HomeSearch extends Component {
</div> </div>
<button className="home-search__submit">جستجو</button> <button className="home-search__submit">جستجو</button>
</div> </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; padding: 5px 10px 5px 100px !important;
} }
} }
&__select { &__select {
position: relative; // position: relative;
margin-left: 20px; // margin-left: 20px;
& img { & img {
position: absolute; position: absolute;
left: 27px; left: 27px;
@ -67,3 +68,99 @@
padding: 7px 50px; 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="mobile-slider-blog__footer d-flex mt-3">
<div className="d-flex"> <div className="d-flex">
{/* <img src={} /> */} {/* <img src={} /> */}
<div className="d-flex flex-column"> <div
className="d-flex flex-column"
style={{ fontSize: "12px" }}
>
<span>مطالعه کامل در {data.duration} دقیقه</span> <span>مطالعه کامل در {data.duration} دقیقه</span>
<span> <span>
تاریخ انتشار {moment(data.createdAt).format("YYYY/MM/DD")} تاریخ انتشار {moment(data.createdAt).format("YYYY/MM/DD")}
</span> </span>
</div> </div>
</div> </div>
<Link to={`/blogs/${data.id}`}>{data.buttonText}</Link> <Link to={`/blogs/${data.id}`}>
{data.buttonText || "ادامه مطلب"}
</Link>
</div> </div>
<span <span
className="mobile-slider-blog__category" className="mobile-slider-blog__category"

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

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

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

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

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

@ -1,29 +1,17 @@
import React from 'react'; import React from "react";
import Flex from '../Flex/index'; import Flex from "../Flex/index";
import Simple from '../Simple/index'; import Simple from "../Simple/index";
import Vitrin from '../Vitrin/index'; import Vitrin from "../Vitrin/index";
import Column from '../3D/index'; import Column from "../3D/index";
export default function Identifier(props) { export default function Identifier(props) {
const {data} = props; const { data, status } = props;
return ( return (
<> <>
{ {data.design === "flex" ? <Flex data={data} /> : null}
data.design === 'flex' ? {data.design === "simple" ? <Simple data={data} status={status} /> : null}
<Flex data={data} /> : null {data.design === "vitrin" ? <Vitrin data={data} /> : null}
} {data.design === "3d" ? <Column data={data} /> : null}
{
data.design === 'simple' ?
<Simple data={data} /> : 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) { export default function Simple(props) {
const { data } = props; const { data, status } = props;
const parentStyle = { const parentStyle = {
// backgroundImage: `url('${data.imageUrl}')`, // backgroundImage: `url('${data.imageUrl}')`,
background: data.fileId background: data.fileId

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

@ -1,9 +1,9 @@
import React, { Component } from "react"; import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import Identifier from "./Identifier/index"; import Identifier from "./Identifier/index";
import proxy from "~/Redux/proxy";
import "./index.scss"; import "./index.scss";
const status = proxy.status();
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
@ -49,11 +49,15 @@ export default class HomeStatic extends Component {
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<section <section
className="mobile-home-static d-flex" className="mobile-home-static d-flex"
style={{ height: height }} style={{ height: height, margin: "5px 0px" }}
> >
{data.map((item, i) => ( {data.map((item, i) =>
<Identifier data={item} key={i} /> status ? (
))} <Identifier data={item} key={i} status={status} />
) : (
<Item data={item} height={height} key={i} />
)
)}
</section> </section>
) : null} ) : null}
</> </>
@ -85,7 +89,29 @@ const Item = (props) => {
alt="عکس" alt="عکس"
/> />
</div> </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 { .home-static {
margin: 20px 0px; margin: 20px 0px;
width: 100%; width: 100%;
justify-content: space-between;
&__list { &__list {
justify-content: space-between; justify-content: space-between;
width: 100%; 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 { .mobile-home-static {

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

@ -20,7 +20,7 @@ import mobileMail from "~/assets/icons/mobileMail.svg";
import mobileProfile from "~/assets/icons/mobileProfile.svg"; import mobileProfile from "~/assets/icons/mobileProfile.svg";
import mobileDanger from "~/assets/icons/mobileDanger.svg"; import mobileDanger from "~/assets/icons/mobileDanger.svg";
import mobileLogout from "~/assets/icons/mobileLogout.svg"; import mobileLogout from "~/assets/icons/mobileLogout.svg";
import proxy from "~/Redux/proxy";
import "./NavbarDrawer.scss"; import "./NavbarDrawer.scss";
class NavbarDrawer extends Component { class NavbarDrawer extends Component {
state = { state = {
@ -28,10 +28,64 @@ class NavbarDrawer extends Component {
}; };
render() { 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; const { status } = this.props;
let score = 2; let score = 2;
return ( return (
<div className="navbar-drawer d-flex flex-column"> <div className="navbar-drawer d-flex flex-column">
{statusx ? (
<div className="navbar-drawer__header d-flex align-items-center"> <div className="navbar-drawer__header d-flex align-items-center">
<> <>
<Avatar <Avatar
@ -43,6 +97,7 @@ class NavbarDrawer extends Component {
: "" : ""
} }
/> />
<div className="navbar-drawer__header--right d-fex flex-column"> <div className="navbar-drawer__header--right d-fex flex-column">
<h1>{status.firstName + " " + status.lastName}</h1> <h1>{status.firstName + " " + status.lastName}</h1>
</div> </div>
@ -62,10 +117,13 @@ class NavbarDrawer extends Component {
onClick={() => this.setState({ dropdown: true })} onClick={() => this.setState({ dropdown: true })}
> >
{score ? <span>{score} امتیاز</span> : null}{" "} {score ? <span>{score} امتیاز</span> : null}{" "}
<KeyboardArrowDownIcon style={{ color: "grey", fontSize: 30 }} /> <KeyboardArrowDownIcon
style={{ color: "grey", fontSize: 30 }}
/>
</div> </div>
)} )}
</div> </div>
) : null}
{this.state.dropdown ? ( {this.state.dropdown ? (
<div className="navbar-drawer__dropdown d-flex flex-column"> <div className="navbar-drawer__dropdown d-flex flex-column">
{/* {this.props.users.map((item, i) => ( {/* {this.props.users.map((item, i) => (
@ -87,7 +145,7 @@ class NavbarDrawer extends Component {
</div> </div>
) : null} ) : null}
<div className="navbar-drawer__bottom mt-3"> <div className="navbar-drawer__bottom mt-3">
{this.props.links.map((item, key) => ( {(statusx ? this.props.links : this.links).map((item, key) => (
<Link <Link
to={item.link} to={item.link}
key={key} key={key}

@ -11,9 +11,23 @@ import qr from "../../../../assets/icons/qr.png";
import back from "../../../../assets/icons/back.png"; import back from "../../../../assets/icons/back.png";
import hamburger from "../../../../assets/icons/hamburger.png"; import hamburger from "../../../../assets/icons/hamburger.png";
import search from "../../../../assets/icons/navbarSearch.png"; import search from "../../../../assets/icons/navbarSearch.png";
import proxy from "~/Redux/proxy";
import "./index.scss"; 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({ const useStyles = makeStyles({
list: { list: {
width: window.innerWidth * 0.8, width: window.innerWidth * 0.8,
@ -26,6 +40,7 @@ const useStyles = makeStyles({
}); });
export default function MobileNavbar(props) { export default function MobileNavbar(props) {
const status = proxy.status();
const classes = useStyles(); const classes = useStyles();
const [state, setState] = useState({ const [state, setState] = useState({
top: false, top: false,
@ -63,21 +78,62 @@ export default function MobileNavbar(props) {
/> />
</div> </div>
); );
if (!status)
return ( return (
<nav className="mobile-navbar d-flex"> <nav className="mobile-navbar d-flex">
<div>
<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
className="mobile-navbar__logo" className="mobile-navbar__logo"
// style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }} // style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
> >
<Link to="/"> <Link to="/">
<img src={logo} alt="لوگو" /> <img src={logo} alt="لوگو" />
</Link> </Link>
</div> </div> */}
<div <div
className="mobile-navbar__menu" className="mobile-navbar__menu"
onClick={toggleDrawer("right", true)} onClick={toggleDrawer("right", true)}
> >
<img src={hamburger} alt="منو" /> <img src={hamburger} alt="منو" />
<Link to="/">
<img src={logo} alt="لوگو" className="logo" />
</Link>
</div> </div>
<div className="mobile-navbar__left"> <div className="mobile-navbar__left">

@ -9,11 +9,27 @@
z-index: 400; z-index: 400;
padding: 0px 10px 0px; padding: 0px 10px 0px;
height: 50px; 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 { &__menu {
justify-self: flex-start; justify-self: flex-start;
img { img {
width: 26px; width: 26px;
} }
.logo {
width: 85px;
margin-right: 10px;
}
} }
&__logo { &__logo {
position: absolute; position: absolute;
@ -26,6 +42,13 @@
width: 85px; width: 85px;
} }
} }
&__logo2 {
margin: 0 10px;
img {
// transform: translate(20px, 0px);
width: 85px;
}
}
&__left { &__left {
justify-self: flex-end; justify-self: flex-end;
img { img {

@ -32,7 +32,7 @@ export default class SingleBlog extends Component {
style={{ fontSize: fontSize.desktop.a }} style={{ fontSize: fontSize.desktop.a }}
to={"/blogs/" + data.id} to={"/blogs/" + data.id}
> >
ادامه ادامه مطلب
</Link> </Link>
</div> </div>
<div className="single-blog__left d-flex justify-content-center align-items-center"> <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 home_ar from "~/assets/icons/home_ar(2).png";
import "./index.scss"; import "./index.scss";
class Home extends Component { class Home extends Component {
componentDidMount() { componentDidMount() {
const mobile = window.innerWidth < 1000;
window.scrollTo(0, 0); window.scrollTo(0, 0);
if (window.innerWidth < 1000) { if (mobile && this.props.status) {
this.props.getHomeData({ device: 2 }); this.props.getHomeData({ device: 2 });
} else { } else {
this.props.getHomeData({ device: 1 }); this.props.getHomeData({ device: 1, mobile: mobile ? 1 : 0 });
} }
} }
render() { render() {
const { homeData, loading } = this.props; const { homeData, loading, status } = this.props;
const mobile = window.innerWidth < 1000;
if (loading)
return ( 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 <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }} style={{ height: "100vh", width: "100vw" }}
> >
<Loader /> <Loader />
</div> </div>
) );
) : null} return (
{window.innerWidth < 1000 ? (
!loading ? (
<> <>
<div className="mobile-home d-flex flex-column"> <>
<div
className={
(this.props.status && mobile ? "mobile-home" : "home") +
" d-flex flex-column"
}
>
<Navbar page={"home"} /> <Navbar page={"home"} />
{homeData.map((item, i) => ( {homeData.map((item, i) => (
<Identifier item={item} key={i} /> <Identifier item={item} key={i} />
))} ))}
</div> </div>
{window.innerWidth > 1000 ? <Footer /> : null}
</> </>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
</> </>
); );
} }
@ -144,7 +131,7 @@ const Identifier = (props) => {
/> />
) : null ) : null
) : null} ) : null}
{props.item.type === "search" && window.innerWidth > 1000 ? ( {props.item.type === "search" ? (
<HomeSearch height={props.item.height} data={props.item.data} /> <HomeSearch height={props.item.height} data={props.item.data} />
) : null} ) : null}
{props.item.type === "membership" && window.innerWidth > 1000 ? ( {props.item.type === "membership" && window.innerWidth > 1000 ? (

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

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

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

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

Loading…
Cancel
Save