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

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

Browse Source
master
amir hosein gorji 3 years ago
parent de02a9aa00
commit b5e5ee0d9c
27 changed files with 529 additions and 203 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. 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. 36
      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

17
src/AppRouter.js
Unescape View File

@ -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>

14
src/Redux/reducers/public.js
Unescape View File

@ -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,
}; };

15
src/views/Home/Footer/index.js
Unescape View File

@ -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">

3
src/views/Home/HomeSearch/Select/index.js
Unescape View File

@ -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],
}, },
}) })
} }

40
src/views/Home/HomeSearch/index.js
Unescape View File

@ -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>
</>
); );
} }
} }

101
src/views/Home/HomeSearch/index.scss
Unescape View File

@ -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;
}
}

9
src/views/Home/HomeSlider/Blog/index.js
Unescape View File

@ -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"

32
src/views/Home/HomeSlider/Blog/index.scss
Unescape View File

@ -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;
} }

4
src/views/Home/HomeSlider/Header/index.scss
Unescape View File

@ -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 {

18
src/views/Home/HomeSlider/Simple/index.js
Unescape View File

@ -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} تومان

12
src/views/Home/HomeSlider/Simple/index.scss
Unescape View File

@ -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;

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

@ -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) => (

36
src/views/Home/HomeStatic/Identifier/index.js
Unescape View File

@ -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
}
</> </>
); );
} }

2
src/views/Home/HomeStatic/Simple/index.js
Unescape View File

@ -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

19
src/views/Home/HomeStatic/Vitrin/index.js
Unescape View File

@ -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>
); );
}; };

40
src/views/Home/HomeStatic/index.js
Unescape View File

@ -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>
)}
</> </>
); );
}; };

30
src/views/Home/HomeStatic/index.scss
Unescape View File

@ -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 {

2
src/views/Home/Navbar/Laptop/index.js
Unescape View File

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

64
src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
Unescape View File

@ -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}

60
src/views/Home/Navbar/Mobile/index.js
Unescape View File

@ -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">

23
src/views/Home/Navbar/Mobile/index.scss
Unescape View File

@ -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 {

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

@ -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">

49
src/views/Home/index.js
Unescape View File

@ -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 ? (

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

@ -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,
}), }),

12
src/views/Products/Product/index.js
Unescape View File

@ -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">

15
src/views/Products/Product/index.scss
Unescape View File

@ -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;

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

@ -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> */}

Write Preview
Loading…
Cancel
Save