reza added many options

master
RezaAshrafi77 3 years ago
parent 13345793e6
commit 03bc98379a
  1. 12
      src/AppRouter.js
  2. 3
      src/Redux/actions/book.js
  3. 14
      src/Redux/reducers/book.js
  4. 2
      src/views/About/index.scss
  5. 820
      src/views/About/mobin.js
  6. BIN
      src/views/About/mobin.rar
  7. 4
      src/views/About/reza.js
  8. 4
      src/views/Activation/index.js
  9. 1
      src/views/Activation/index.scss
  10. 33
      src/views/Callback/Status/index.js
  11. 14
      src/views/Callback/Status/index.scss
  12. 299
      src/views/Callback/index.js
  13. 0
      src/views/Callback/index.scss
  14. 3
      src/views/Cart/DeliveryMethod/index.scss
  15. 36
      src/views/Cart/Table/index.js
  16. 2
      src/views/Cart/index.js
  17. 2
      src/views/Cart/index.scss
  18. 2
      src/views/Contact/index.scss
  19. 2
      src/views/Faq/index.scss
  20. 10
      src/views/Home/Navbar/Laptop/index.js
  21. 4
      src/views/Home/Navbar/Laptop/index.scss
  22. 1
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  23. 19
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
  24. 5
      src/views/Home/Navbar/Mobile/index.js
  25. 2
      src/views/Home/index.scss
  26. 42
      src/views/Product/BreadCrumb/index.js
  27. 84
      src/views/Product/MaterialModal/index.js
  28. 23
      src/views/Product/MaterialModal/index.scss
  29. 36
      src/views/Product/index.js
  30. 32
      src/views/Product/index.scss
  31. 7
      src/views/Products/BreadCrumb/index.js
  32. 6
      src/views/Products/Product/index.scss
  33. 18
      src/views/Products/index.js
  34. 2
      src/views/Products/index.scss
  35. 89
      src/views/QR/Image/Modal/index.js
  36. 42
      src/views/QR/Image/Modal/index.scss
  37. 191
      src/views/QR/Image/index.js
  38. 73
      src/views/QR/Image/index.scss
  39. 2
      src/views/QR/index.scss
  40. 11
      src/views/QRScan/Modal/index.js
  41. 28
      src/views/QRScan/Modal/index.scss
  42. 15
      src/views/QRScan/index.js
  43. 4
      src/views/QRScan/index.scss

@ -25,6 +25,7 @@ import Chatroom from "./views/ChatRoom/index";
import Cart from "./views/Cart/index"; import Cart from "./views/Cart/index";
import MyBooks from "./views/MyBooks/index"; import MyBooks from "./views/MyBooks/index";
import AR from "./views/AR/index"; import AR from "./views/AR/index";
import Callback from "./views/Callback/index";
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
@ -34,14 +35,6 @@ class AppRouter extends Component {
state = {}; state = {};
componentDidMount() {
// if (this.props.profile) {
// return;
// } else {
// this.props.getProfile();
// }
}
render() { render() {
let home = ( let home = (
<Route exact path={"/"}> <Route exact path={"/"}>
@ -83,6 +76,9 @@ class AppRouter extends Component {
/> />
)} )}
</Route> </Route>
<Route exact path={"/callback"}>
<Callback />
</Route>
<Route exact path={"/about"}> <Route exact path={"/about"}>
<About /> <About />
</Route> </Route>

@ -26,6 +26,9 @@ const book = {
await proxy.delete("book/delete", data); await proxy.delete("book/delete", data);
await proxy.get("book/list", data2, { dispatch }); await proxy.get("book/list", data2, { dispatch });
}, },
searchBook: (data) => async (dispatch) => {
dispatch({ type: "book/search", data: data });
},
}; };
export default book; export default book;

@ -3,6 +3,7 @@ const initialState = {
error: null, error: null,
list: null, list: null,
info: null, info: null,
searchResult: [],
}; };
export default function book(state = initialState, action) { export default function book(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
@ -17,7 +18,18 @@ export default function book(state = initialState, action) {
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "book/delete": case "book/delete":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
///////////// case "book/search":
return {
...state,
loading: false,
error: null,
searchResult: state.list.filter(
(item) =>
item.product[0].name.indexOf(data) !== -1 ||
item.product[1].name.indexOf(data) !== -1 ||
item.name.indexOf(data) !== -1
),
};
case "loading": case "loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "error": case "error":

@ -5,7 +5,7 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 60px;
&__fury { &__fury {
margin-top: 30px; margin-top: 30px;
width: 100%; width: 100%;

@ -1,820 +0,0 @@
//about
let aboutData = {
fury: {
title: "ماموریت ما در دانوین",
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت",
},
keywords: {
title: "کلمات کلیدی ماموریت",
list: [
"کیفیت آموزش",
"جذابیت",
"سازگار با نظام آموزش و پرورش",
"در راستای نیل به سند تحول",
],
},
advantages: {
title: "مزیت رقابت اصلی",
list: [
"بکارگیری بروزترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)",
"دارای رویکرد آموزش سرگرم کننده",
"بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی",
"رویکرد معرفتی - ارزشی",
"ویدیوهای منحصر بفرد",
"متن گفتگو محور - روایی- قابل فهم - جذاب و سرگرم کننده",
],
},
};
//ar, images => http://localhost:3000/ar
arData = [
{
id: 222,
title: "دانوین زیست دهم",
imageUrl: zist_10,
},
{
id: 223,
title: "دانوین شیمی نهم",
imageUrl: chemistry_10,
},
{
id: 225,
title: "دانوین علوم نهم",
imageUrl: sciense_6,
},
{
id: 226,
title: "دانوین علوم هشتم",
imageUrl: sciense_8,
},
{
id: 227,
title: "دانوین علوم هفتم",
imageUrl: sciense_7,
},
{
id: 228,
title: "دانوین علوم ششم",
imageUrl: sciense_6,
},
];
//cart
deliveryMethods = [
{
name: "ارسال با پست پیشتاز",
price: 36.891,
},
{
name: "ارسال با پیک موتوری",
price: 36.891,
},
];
//contact
let contactData = {
address: "fdsfds",
cellphone: "32432",
email: "fsdafs",
};
//faq
let messages = [
{
id: 0,
title: "چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 1,
title: "نحوه سفارش برای خارج از کشور چگونه است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 2,
title: "آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 3,
title: "در صورت فراموشی رمزعبور باید چکار کنیم؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 4,
title: "امکان بازگشت وجه تا چند روز ممکن است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
];
//home
let mobileData = [
{
type: "slider",
title: "",
height: window.innerWidth > 1000 ? 370 : 203,
design: "header",
number: 1,
data: [
{
id: 0,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 1,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 2,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: qr,
backgroundColor: {
first: "#2070CBED",
second: "#2070CBED",
angle: "180deg",
},
design: "flex",
title: "QR خوان",
subTitle: "در صفحات کتاب هوشمند",
link: "/qr-scan",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
{
id: 1,
imageUrl: home_ar,
backgroundColor: {
first: "#09DA76",
second: "#056D3B",
angle: "230deg",
},
design: "flex",
title: "واقعیت افزوده",
subTitle: "توضیحات مختصر در این رابطه",
link: "/ar",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: home_chat,
backgroundColor: {
first: "#0AB81B",
second: "#6CFF61",
angle: "110deg",
},
design: "flex",
title: "دانوینی ها",
subTitle: "",
link: "/chatroom",
badge: "5 پیام جدید",
flex: 1.6,
fontSize: "normal",
color: "white",
},
{
id: 1,
imageUrl: myBook,
backgroundColor: {
first: "#9446FCaa",
second: "#9446FCaa",
angle: "180deg",
},
design: "simple",
title: "کتابهای من",
subTitle: "",
justifyContent: "flex-start",
alignItems: "center",
link: "/mybooks",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: homeBlog,
backgroundColor: {
first: "#39BF55",
second: "#39BF4B55",
angle: "110deg",
},
design: "simple",
title: "بلاگ",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/blog",
badge: "",
flex: 1.2,
fontSize: "normal",
color: "white",
},
{
id: 1,
backgroundColor: {
first: "#5DBEFF",
second: "#0483D9",
angle: "180deg",
},
design: "vitrin",
title: "فروشگاه",
subTitle: "",
justifyContent: "flex-start",
alignItems: "center",
books: [
{ id: 0, imageUrl: sciense_6 },
{ id: 1, imageUrl: chemistry_10 },
{ id: 2, imageUrl: sciense_8 },
],
link: "/products",
badge: "",
flex: 2,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
data: [
{
id: 0,
design: "3d",
flex: 1,
subData: [
{
id: 0,
imageUrl: "",
backgroundColor: {
first: "#FC365F",
second: "#7E1B30",
angle: "254deg",
},
design: "simple",
title: "پیشتیبانی",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/contact",
badge: "",
flex: 1,
fontSize: "normal",
color: "white",
},
{
id: 1,
imageUrl: "",
backgroundColor: {
first: "#FFCC00",
second: "#FF9800",
angle: "105deg",
},
design: "simple",
title: "پروفایل",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/profile",
badge: "",
flex: 1,
fontSize: "normal",
color: "white",
},
],
},
{
id: 1,
imageUrl: bookActivation,
backgroundColor: {
first: "#03FCDA7F",
second: "#03FCDA7F",
angle: "180deg",
},
design: "simple",
title: "فعال سازی کتاب",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/activation",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
];
let homeData = [
{
type: "slider",
title: "",
height: window.innerWidth > 1000 ? 370 : 233,
design: "header",
number: 1,
data: [
{
id: 0,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 1,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 2,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
],
},
{
type: window.innerWidth > 1000 ? "" : "static",
title: "",
height: 150,
data: [
{
image: qr,
width: 48,
link: "",
topText: "QR خوان",
bottomText: "توضیحات مختصر در این رابطه",
},
{
image: ar,
width: 48,
link: "",
topText: "واقعیت افزوده",
bottomText: "توضیحات مختصر در این رابطه",
},
],
},
{
type: window.innerWidth > 1000 ? "static" : "",
title: "",
height: 150,
data: [
{
image: online,
width: 24,
link: "",
topText: "دسترسی به محتوای آموزشی",
bottomText: "از تمامی دستگاهها",
},
{
image: chemistry,
width: 24,
link: "",
topText: " به صورت زنده و جالب انگیز",
bottomText: "آزمایش انجام دهید",
},
{
image: calculator,
width: 24,
link: "",
topText: "به صرفه تر هزینه کنید",
bottomText: "با خرید یکی دوتا ببرید",
},
{
image: homework,
width: 24,
link: "",
topText: "به صورت کاملا تعاملی",
bottomText: "درسهای خود را یاد بگیرید",
},
],
},
{
type: "search",
data: ["همه", "پرفروش"],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "کتابهای من",
moreText: "لیست کتابها",
height: window.innerWidth > 1000 ? 340 : 270,
design: window.innerWidth > 1000 ? "simple" : "myProduct",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
},
],
},
{
type: window.innerWidth < 1000 ? "scroll" : "",
title: "موضوعات",
moreText: "تمام موضوعات",
design: "subjects",
number: 4,
data: [
{ id: 0, name: "علوم طبیعی", backgroundColor: "yellow" },
{ id: 1, name: "شیمی الی", backgroundColor: "red" },
{ id: 2, name: "زمین شناسی", backgroundColor: "blue" },
{ id: 3, name: "ریاضیات", backgroundColor: "purple" },
],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "پرفروشترین کتابهای دانوین",
moreText: "لیست کتابها",
height: window.innerWidth > 1000 ? 420 : 320,
design: window.innerWidth > 1000 ? "simple" : "product",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "جدیدترین کتابهای دانوین",
height: window.innerWidth > 1000 ? 420 : 320,
design: window.innerWidth > 1000 ? "tab" : "product",
number: window.innerWidth > 1000 ? 4 : 3.5,
moreText: "لیست کتابها",
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
},
{
type: "singleBlog",
height: 350,
direction: "rtl",
data: {
id: 0,
image: pic,
video: null,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
link: "",
buttonText: "اطلاعات بیشتر",
},
},
{
type: "slider",
title: "بلاگ",
height: "",
design: "blog",
number: window.innerWidth > 1000 ? 3 : 2,
data: [
{
id: 0,
image: blog1,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
date: new Date(),
link: "",
buttonText: "ادامه مطلب",
category: { name: "علمی تخیلی", color: "red" },
duration: "۲۰ دقیقه",
},
{
id: 1,
image: blog2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
date: new Date(),
link: "",
buttonText: "ادامه مطلب",
category: { name: "تاریخی", color: "blue" },
duration: "۲۰ دقیقه",
},
{
id: 2,
image: blog3,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
link: "",
buttonText: "ادامه مطلب",
category: { name: "ورزشی", color: "green" },
duration: "۲۰ دقیقه",
},
{
id: 3,
image: pic,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
link: "",
buttonText: "ادامه مطلب",
category: { name: "سیاسی", color: "purple" },
duration: "۲۰ دقیقه",
},
],
},
{
type: "membership",
},
];
//product

Binary file not shown.

@ -1,4 +0,0 @@
//comment modal
//comment for book or bookPage
//user can edit self comment
//trophy

@ -73,7 +73,7 @@ export default class Activation extends Component {
ثبت کد فعال سازی ثبت کد فعال سازی
</button> </button>
</form> </form>
<div className="activation__support d-flex align-center"> {/* <div className="activation__support d-flex align-center">
<span> <span>
<img src={danger} /> <img src={danger} />
</span> </span>
@ -87,7 +87,7 @@ export default class Activation extends Component {
{data.map((item, i) => ( {data.map((item, i) => (
<History data={item} key={i} /> <History data={item} key={i} />
))} ))}
</div> </div> */}
</div> </div>
<Footer /> <Footer />
</> </>

@ -117,6 +117,7 @@
padding: 0px 10px 40px; padding: 0px 10px 40px;
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
padding-top: 60px;
&__header { &__header {
max-width: 900px; max-width: 900px;
width: 100%; width: 100%;

@ -0,0 +1,33 @@
import React from "react";
import { Link } from "react-router-dom";
import mobileHome from "~/assets/icons/mobileHome.svg";
import "./index.scss";
export default function Status(props) {
const customStyle = {
backgroundColor: props.status ? "#6ada72" : "#ff0000",
borderColor: props.status ? "red" : "green",
};
const textHandler = () => {
return props.status
? "عملیات خرید شما با موفقیت انجام شد."
: "عملیات با موفقیت انجام نشد!";
};
return (
<>
{window.innerWidth < 1000 ? (
<div
className="mobile-callback-status d-flex justify-content-between"
style={customStyle}
>
{textHandler()}
<Link to="/">
<img src={mobileHome} />
</Link>
</div>
) : null}
</>
);
}

@ -0,0 +1,14 @@
.mobile-callback-status {
flex: 1;
border-radius: 10px;
font-family: numeralLight;
padding: 15px;
margin-bottom: 20px;
color: white;
a {
text-decoration: none;
img {
width: 20px;
}
}
}

@ -0,0 +1,299 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { userProduct } from "~/Redux/actions";
import { ToastContainer } from "react-toastify";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Table from "../Cart/Table/index";
import DiscoutCode from "../Cart/Discount/index";
import DeliveryMethod from "../Cart/DeliveryMethod/index";
import Factor from "../Cart/Factor/index";
import Loader from "~/components/Loader/index";
import Status from "./Status/index";
import sciense_6 from "../../assets/images/sciense-6.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
},
};
class Callback extends Component {
state = {
selectedDelivery: { name: "", price: 0 },
discount: 0,
totalPrice: null,
list: [
{
id: 0,
title: " گسسته ",
subTitle: " گیرد",
options: "بپشتی",
image: sciense_6,
slicePrice: 200000,
number: 1,
price: 1899900,
},
{
id: 1,
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
options: "بستههای الحاقی: کیف، کفش و کوله پشتی",
image: sciense_6,
slicePrice: 300000,
number: 1,
price: 2500000,
},
{
id: 2,
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
options: "بستههای الحاقی: کیف، کفش و کوله پشتی",
image: sciense_6,
slicePrice: 150000,
number: 1,
price: 1000000,
},
],
};
componentDidMount() {
this.props.getList();
}
handleCounter = (type, id) => {
if (type === "increase") {
this.setState((prevState) => ({
list: prevState.list.map((item) =>
item.id === id ? { ...item, number: item.number + 1 } : item
),
}));
} else {
this.setState((prevState) => ({
list: prevState.list.map((item) =>
item.id === id ? { ...item, number: item.number - 1 } : item
),
}));
}
};
handleDelete = (id) => {
let list = this.state.list.filter((item) => item.id !== id);
this.setState({
list: list,
});
};
totalPrice = () => {
let total = 0;
for (let i = 0; i < this.state.list.length; i++) {
total += this.state.list[i].price * this.state.list[i].number;
}
return total - this.state.discount + this.state.selectedDelivery.price;
};
render() {
const { list, payPrice } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
list ? (
<>
<div className="cart d-flex flex-column">
<Navbar />
<div
className="d-flex"
style={{ width: "100%", flex: 1, marginBottom: 10 }}
>
<section className="cart__right d-flex flex-column">
<header>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
سبد خرید
</h1>
</header>
<Table
list={list}
handleCounter={this.handleCounter}
handleDelete={this.handleDelete}
payPrice={payPrice}
route={"callback"}
/>
</section>
<section className="cart__left d-flex flex-column p-3">
<header className="cart__left--header d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
روشهای ارسال
</h2>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</header>
<DiscoutCode />
<Factor parent={this} />
<div className="cart__totalPrice d-flex align-items-center justify-content-center">
<h3 style={{ fontSize: fontSize.mobile.h2 }}>
جمع کل
<br />
سبد خرید
</h3>
<div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}>
{payPrice}
</strong>
<span style={{ fontSize: fontSize.mobile.h3 }}>
تومان
</span>
</div>
</div>
<div className="cart__left--header d-flex flex-column mt-3">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
روشهای ارسال
</h2>
<p style={{ fontSize: fontSize.desktop.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div>
<button className="cart__left--submit">پرداخت</button>
</section>
</div>
</div>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
{window.innerWidth < 1000 ? (
list ? (
<div className="mobile-cart d-flex flex-column">
<Navbar />
{/* <h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1> */}
<Status status={true} />
<div className="d-flex">
<Table
list={list}
handleCounter={this.handleCounter}
handleDelete={this.handleDelete}
payPrice={payPrice}
route={"callback"}
/>
</div>
{/* <div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div> */}
{/* <DiscoutCode parent={this} /> */}
<Factor parent={this} />
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center mt-2">
<h3 style={{ fontSize: fontSize.mobile.h2 }} className="m-2">
جمع کل
<br />
سبد خرید
</h3>
<div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}>
{payPrice}
</strong>
<span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span>
</div>
</div>
{/* <div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div> */}
{/* <button className="mobile-cart__submit">پرداخت</button> */}
</div>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
<ToastContainer
position="bottom-right"
autoClose={1500}
hideProgressBar={true}
newestOnTop={true}
closeOnClick
rtl={true}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</>
);
}
}
export default connect(
(state) => ({
list: state.userProduct.list,
payPrice: state.userProduct.sum,
}),
{ getList: userProduct.list }
)(Callback);
Callback.defaultProps = {
payMethods: [
{
name: "ارسال با پست پیشتاز",
price: 36.891,
},
{
name: "ارسال با پیک موتوری",
price: 36.891,
},
],
};

@ -3,7 +3,8 @@
border-radius: 10px; border-radius: 10px;
border: 1px solid #88a9ff; border: 1px solid #88a9ff;
margin-top: 10px; margin-top: 10px;
width: 48%; flex: 1;
margin: 5px;
h3, h3,
strong, strong,
span { span {

@ -61,7 +61,7 @@ const fontSize = {
function BasicTable(props) { function BasicTable(props) {
const classes = useStyles(); const classes = useStyles();
const { list, handleCounter, handleDelete } = props; const { list, handleCounter, handleDelete, route } = props;
const sum = () => { const sum = () => {
let total = 0; let total = 0;
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
@ -87,6 +87,10 @@ function BasicTable(props) {
<TableRow> <TableRow>
<TableCell align="right">محصولات</TableCell> <TableCell align="right">محصولات</TableCell>
<TableCell align="center">قیمت</TableCell> <TableCell align="center">قیمت</TableCell>
{route === "callback" ? (
<TableCell align="center">تعداد</TableCell>
) : null}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -99,18 +103,26 @@ function BasicTable(props) {
info={props.info} info={props.info}
id={props.id} id={props.id}
handleDelete={handleDelete} handleDelete={handleDelete}
route={route}
/> />
))} ))}
{route === "cart" ? (
<TableRow> <TableRow>
<TableCell align="right" component="th" scope="row"> <TableCell
<span style={{ color: "grey" }}>{sum()} محصول</span> align="right"
</TableCell> component="th"
scope="row"
></TableCell>
<TableCell align="center"> <TableCell align="center">
<span style={{ color: "grey" }}> <span style={{ color: "grey" }}>
مبلغ کل {props.payPrice} مبلغ کل {props.payPrice}
</span> </span>
</TableCell> </TableCell>
<TableCell align="right" component="th" scope="row">
<span style={{ color: "grey" }}>{sum()} محصول</span>
</TableCell>
</TableRow> </TableRow>
) : null}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
@ -136,6 +148,7 @@ function BasicTable(props) {
info={props.info} info={props.info}
id={props.id} id={props.id}
handleDelete={handleDelete} handleDelete={handleDelete}
route={route}
/> />
))} ))}
<TableRow> <TableRow>
@ -163,7 +176,7 @@ function BasicTable(props) {
} }
const Item = (props) => { const Item = (props) => {
const { data, pushToCart, handleDelete, info, id } = props; const { data, pushToCart, handleDelete, info, id, route } = props;
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
@ -188,6 +201,7 @@ const Item = (props) => {
<span style={{ fontSize: fontSize.mobile.info.span }}> <span style={{ fontSize: fontSize.mobile.info.span }}>
{data.product.book.item || "هیچی"} {data.product.book.item || "هیچی"}
</span> </span>
{route !== "callback" ? (
<div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end"> <div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end">
<DeleteOutlineOutlinedIcon <DeleteOutlineOutlinedIcon
style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }} style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }}
@ -203,6 +217,7 @@ const Item = (props) => {
حذف حذف
</span> </span>
</div> </div>
) : null}
</div> </div>
</div> </div>
</TableCell> </TableCell>
@ -212,10 +227,13 @@ const Item = (props) => {
<strong style={{ fontSize: fontSize.mobile.price.strong }}> <strong style={{ fontSize: fontSize.mobile.price.strong }}>
{data.product.book.price || "1000"} {data.product.book.price || "1000"}
</strong> </strong>
{route !== "callback" ? (
<span style={{ fontSize: fontSize.mobile.price.span }}> <span style={{ fontSize: fontSize.mobile.price.span }}>
{data.product.book.subPrice || "100"} قیمت هر واحد {data.product.book.subPrice || "100"} قیمت هر واحد
</span> </span>
) : null}
</div> </div>
{route === "cart" ? (
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> <div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
<button <button
onClick={() => onClick={() =>
@ -245,8 +263,16 @@ const Item = (props) => {
- -
</button> </button>
</div> </div>
) : null}
</div> </div>
</TableCell> </TableCell>
{route === "callback" ? (
<TableCell>
<strong className="d-flex justify-content-center align-items-center">
{data.count}
</strong>
</TableCell>
) : null}
</TableRow> </TableRow>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (

@ -136,6 +136,7 @@ class Cart extends Component {
handleCounter={this.handleCounter} handleCounter={this.handleCounter}
handleDelete={this.handleDelete} handleDelete={this.handleDelete}
payPrice={payPrice} payPrice={payPrice}
route={"cart"}
/> />
</section> </section>
<section className="cart__left d-flex flex-column p-3"> <section className="cart__left d-flex flex-column p-3">
@ -205,6 +206,7 @@ class Cart extends Component {
handleCounter={this.handleCounter} handleCounter={this.handleCounter}
handleDelete={this.handleDelete} handleDelete={this.handleDelete}
payPrice={payPrice} payPrice={payPrice}
route={"cart"}
/> />
</div> </div>
<div className="mobile-cart__payMethods d-flex flex-column"> <div className="mobile-cart__payMethods d-flex flex-column">

@ -4,7 +4,7 @@
margin: 0px auto; margin: 0px auto;
padding: 0px; padding: 0px;
font-family: numeralLight; font-family: numeralLight;
padding-top: 100px; padding-top: 85px;
&__totalPrice { &__totalPrice {
padding: 20px 0px; padding: 20px 0px;
border-bottom: 1px dotted #a5a5a5; border-bottom: 1px dotted #a5a5a5;

@ -6,7 +6,7 @@
direction: rtl; direction: rtl;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
overflow-x: hidden; overflow-x: hidden;
padding-top: 100px; padding-top: 60px;
&__forms { &__forms {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;

@ -5,7 +5,7 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 70px;
&__header { &__header {
margin-top: 30px; margin-top: 30px;
width: 600px; width: 600px;

@ -1,4 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import proxy from "~/Redux/proxy";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import logo from "~/assets/icons/logo.png"; import logo from "~/assets/icons/logo.png";
@ -21,9 +22,9 @@ export default class LaptopNavbar extends Component {
return ( return (
<nav className="laptop-navbar d-flex"> <nav className="laptop-navbar d-flex">
<div className="d-flex"> <div className="d-flex">
<div className="laptop-navbar__logo"> <Link to="/" className="laptop-navbar__logo">
<img src={logo} alt="لوگو" /> <img src={logo} alt="لوگو" />
</div> </Link>
<ul className="laptop-navbar__list d-flex"> <ul className="laptop-navbar__list d-flex">
{links.map((item, i) => ( {links.map((item, i) => (
<li style={{ fontSize: fontSize.desktop.li }} key={i}> <li style={{ fontSize: fontSize.desktop.li }} key={i}>
@ -44,7 +45,8 @@ export default class LaptopNavbar extends Component {
<Link to="/cart"> <Link to="/cart">
<img width="30" height="35" src={basket} alt="سبد خرید" /> <img width="30" height="35" src={basket} alt="سبد خرید" />
</Link> </Link>
{proxy.status() ? null : (
<>
<Link <Link
style={{ fontSize: fontSize.desktop.a }} style={{ fontSize: fontSize.desktop.a }}
to={"/auth"} to={"/auth"}
@ -59,6 +61,8 @@ export default class LaptopNavbar extends Component {
> >
ثبت نام ثبت نام
</Link> </Link>
</>
)}
</div> </div>
</nav> </nav>
); );

@ -8,6 +8,7 @@
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
padding: 0px 10px 0px 20px; padding: 0px 10px 0px 20px;
max-height: 60px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
width: 0px; width: 0px;
@ -18,6 +19,9 @@
// background : greenyellow; // background : greenyellow;
position: relative; position: relative;
left: 14px; left: 14px;
img {
max-height: 88%;
}
} }
&__list { &__list {
margin: 0px; margin: 0px;

@ -58,6 +58,7 @@ class NavbarDrawer extends Component {
className="navbar-drawer__header--dropdown" className="navbar-drawer__header--dropdown"
onClick={() => this.setState({ dropdown: true })} onClick={() => this.setState({ dropdown: true })}
> >
<span>25 امتیاز</span>
<KeyboardArrowDownIcon style={{ color: "grey", fontSize: 45 }} /> <KeyboardArrowDownIcon style={{ color: "grey", fontSize: 45 }} />
</div> </div>
)} )}

@ -10,7 +10,7 @@
// background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important; // background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important;
text-align: right !important; text-align: right !important;
direction: rtl; direction: rtl;
padding: 30px 0px 10px 10px; padding: 30px 0px 10px 0px;
&__header { &__header {
height: 60px; height: 60px;
background-color: white; background-color: white;
@ -23,19 +23,26 @@
& h1 { & h1 {
margin-bottom: 0px; margin-bottom: 0px;
font-size: calc(100vw / 22); font-size: calc(100vw / 22);
color: #4D4D4F; color: #4d4d4f;
letter-spacing: -1px; letter-spacing: -1px;
} }
& div { & div {
color: #4D4D4F; color: #4d4d4f;
font-size: calc(100vw / 34); font-size: calc(100vw / 34);
letter-spacing: -1px; letter-spacing: -1px;
} }
} }
&--dropdown { &--dropdown {
position: absolute; position: absolute;
left: 10px; left: 0px;
top: 10px; top: 10px;
span {
background-color: #6cbe44;
color: white;
padding: 2px 4px;
border-radius: 7px;
font-size: calc(100vw / 27);
}
} }
& img { & img {
width: 100%; width: 100%;
@ -56,11 +63,11 @@
& h1 { & h1 {
margin-bottom: 0px; margin-bottom: 0px;
font-size: calc(100vw / 22); font-size: calc(100vw / 22);
color: #4D4D4F; color: #4d4d4f;
letter-spacing: -1px; letter-spacing: -1px;
} }
& div { & div {
color: #4D4D4F; color: #4d4d4f;
font-size: calc(100vw / 34); font-size: calc(100vw / 34);
letter-spacing: -1px; letter-spacing: -1px;
} }

@ -70,12 +70,13 @@ export default function MobileNavbar(props) {
> >
<img src={hamburger} alt="منو" /> <img src={hamburger} alt="منو" />
</div> </div>
<div <Link
to="/"
className="mobile-navbar__logo" className="mobile-navbar__logo"
style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }} style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
> >
<img src={logo} alt="لوگو" /> <img src={logo} alt="لوگو" />
</div> </Link>
<div className="mobile-navbar__left"> <div className="mobile-navbar__left">
{page === "home" ? ( {page === "home" ? (
<img src={search} alt="جستجو" /> <img src={search} alt="جستجو" />

@ -4,7 +4,7 @@
margin: 0px auto; margin: 0px auto;
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
padding-top: 100px; padding-top: 60px;
} }
.mobile-home { .mobile-home {

@ -1,12 +1,12 @@
import React from 'react'; import React from "react";
import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
import './index.scss'; import "./index.scss";
function handleClick(event) { function handleClick(event) {
event.preventDefault(); event.preventDefault();
console.info('You clicked a breadcrumb.'); console.info("You clicked a breadcrumb.");
} }
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
@ -17,21 +17,37 @@ const fontSize = {
mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25, mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
}; };
export default function ActiveLastBreadcrumb() { export default function ActiveLastBreadcrumb(props) {
const { name } = props;
return ( return (
<Breadcrumbs aria-label="breadcrumb"> <Breadcrumbs aria-label="breadcrumb">
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to={'/products'} onClick={handleClick}> <Link
محصولات style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
}}
to={"/"}
>
صفحه اصلی
</Link> </Link>
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to="/products" onClick={handleClick}> <Link
پایه هفتم style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
}}
to={"/products"}
>
محصولات
</Link> </Link>
<Link <Link
style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, color: '#00CC69'}} style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
color: "#00CC69",
}}
to="/products/1" to="/products/1"
onClick={handleClick}
> >
زیست شناسی {name}
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
); );

@ -0,0 +1,84 @@
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
},
mobile: {
h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22,
},
};
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
return {
top: `${50}%`,
left: `${50}%`,
transform: `translate(-${50}%, -${50}%)`,
padding: "10px",
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: "absolute",
width: "100%",
maxWidth: "500px",
backgroundColor: theme.palette.background.paper,
border: "0px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
direction: "rtl",
fontFamily: "numeralLight",
},
}));
export default function SimpleModal(props) {
const classes = useStyles();
// getModalStyle is not a pure function, we roll the style only on the first render
const [modalStyle] = React.useState(getModalStyle);
const body = (
<div style={modalStyle} className={classes.paper}>
<h2
id="simple-modal-title"
style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop.h2 : fontSize.mobile.h2,
marginBottom: 20,
color: "#4e4e4e",
letterSpacing: "-1px",
}}
>
کامنت خود را وارد کرده و دکمه ثبت را بزنید.
</h2>
<textarea placeholder="متن پیام" name="description" rows="5"></textarea>
<button style={{ marginTop: 20, borderRadius: 6, padding: 8 }}>
ثبت
</button>
</div>
);
return (
<div>
<Modal
open={props.openComment}
onClose={props.handleOpenComment}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{body}
</Modal>
</div>
);
}

@ -0,0 +1,23 @@
textarea {
width: 100%;
font-family: numeralLight;
border-radius: 10px;
border: 1px solid #c4c4c5;
padding: 10px 8px;
color: #6f7074;
&::placeholder {
color: #797979;
}
&:focus {
outline: 0px;
}
}
button {
width: 100%;
font-family: numeralLight;
background-color: #00cc69;
color: white;
border: 0px;
margin-top: 20px;
}

@ -16,6 +16,7 @@ import AddToCart from "./AddToCart/index";
import HomeScroll from "../Home/HomeScroll/index"; import HomeScroll from "../Home/HomeScroll/index";
import HomeSlider from "../Home/HomeSlider/index"; import HomeSlider from "../Home/HomeSlider/index";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import MaterialModal from "./MaterialModal/index";
import product_shipping from "~/assets/icons/product-shipping.png"; import product_shipping from "~/assets/icons/product-shipping.png";
import product_cash_back from "~/assets/icons/product-cash-back.png"; import product_cash_back from "~/assets/icons/product-cash-back.png";
@ -41,6 +42,16 @@ const fontSize = {
}, },
}; };
class Product extends Component { class Product extends Component {
state = {
openComment: false,
};
handleOpenComment = () => [
this.setState({
openComment: !this.state.openComment,
}),
];
componentDidMount() { componentDidMount() {
this.props.getInfo({ this.props.getInfo({
id: window.location.pathname.slice( id: window.location.pathname.slice(
@ -60,7 +71,14 @@ class Product extends Component {
<> <>
<div className="product d-flex flex-column"> <div className="product d-flex flex-column">
<Navbar /> <Navbar />
<Breadcrumbs /> <Breadcrumbs
page={page}
name={
page === "digital"
? info.product[0].name
: info.product[1].name
}
/>
<header className="product__header d-flex mt-4"> <header className="product__header d-flex mt-4">
<Gallery gallery={info.files} /> <Gallery gallery={info.files} />
<Info <Info
@ -88,7 +106,7 @@ class Product extends Component {
<h3 style={{ fontSize: fontSize.desktop.h1 }}> <h3 style={{ fontSize: fontSize.desktop.h1 }}>
نظرات خریداران نظرات خریداران
</h3> </h3>
<button> <button onClick={() => this.handleOpenComment()}>
ارسال نظر ارسال نظر
<img src={send_comment} alt="ارسال نظر" /> <img src={send_comment} alt="ارسال نظر" />
</button> </button>
@ -103,6 +121,10 @@ class Product extends Component {
{0 ? <Identifier item={[]} /> : null} {0 ? <Identifier item={[]} /> : null}
</div> </div>
<Footer /> <Footer />
<MaterialModal
openComment={this.state.openComment}
handleOpenComment={this.handleOpenComment}
/>
</> </>
) : ( ) : (
<div <div
@ -207,9 +229,15 @@ class Product extends Component {
</p> </p>
</div> </div>
<div className="mobile-product__comments d-flex flex-column"> <div className="mobile-product__comments d-flex flex-column">
<div className="d-flex justify-content-between align-items-center mb-3">
<h3 style={{ fontSize: fontSize.mobile.h3 }}> <h3 style={{ fontSize: fontSize.mobile.h3 }}>
نظرات خریداران نظرات خریداران
</h3> </h3>
<button onClick={() => this.handleOpenComment()}>
ارسال نظر
<img src={send_comment} alt="ارسال نظر" />
</button>
</div>
<div className="mobile-product__comments--list d-flex"> <div className="mobile-product__comments--list d-flex">
{info.comment.length > 0 {info.comment.length > 0
? info.comment.map((item, i) => ( ? info.comment.map((item, i) => (
@ -219,6 +247,10 @@ class Product extends Component {
</div> </div>
</div> </div>
</div> </div>
<MaterialModal
openComment={this.state.openComment}
handleOpenComment={this.handleOpenComment}
/>
</> </>
) : ( ) : (
<div <div

@ -144,11 +144,11 @@
&__comments { &__comments {
max-width: 100%; max-width: 100%;
margin-top: 30px; margin-top: 30px;
h1 { h3 {
font-family: numeralBold; font-family: numeralBold;
color: #6f7074; color: #6f7074;
letter-spacing: -1px; // letter-spacing: -1px;
margin-bottom: 30px; // margin-bottom: 30px;
} }
&--list { &--list {
@ -156,6 +156,27 @@
overflow-x: scroll !important; overflow-x: scroll !important;
transform: translateX(10px); transform: translateX(10px);
} }
button {
position: relative;
background-color: #ffc400;
border: 0px;
border-radius: 5px;
color: white;
font-family: numeralLight;
width: 110px;
text-align: right;
padding: 6px;
// height: 45px;
&:focus {
outline: none;
}
img {
position: absolute;
left: 5px;
top: 6px;
width: 25px;
}
}
} }
} }
@ -167,7 +188,7 @@
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 70px;
&__header { &__header {
margin-top: 30px; margin-top: 30px;
width: 100%; width: 100%;
@ -196,6 +217,9 @@
width: 130px; width: 130px;
text-align: right; text-align: right;
height: 45px; height: 45px;
&:focus {
outline: none;
}
img { img {
position: absolute; position: absolute;
left: 5px; left: 5px;

@ -21,12 +21,12 @@ export default function ActiveLastBreadcrumb() {
return ( return (
<Breadcrumbs aria-label="breadcrumb"> <Breadcrumbs aria-label="breadcrumb">
<Link <Link
to={""} to={"/"}
style={{ style={{
fontSize: fontSize:
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
}} }}
onClick={handleClick} // onClick={handleClick}
> >
صفحه اصلی صفحه اصلی
</Link> </Link>
@ -37,8 +37,7 @@ export default function ActiveLastBreadcrumb() {
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
color: "#00CC69", color: "#00CC69",
}} }}
// onClick={handleClick}
onClick={handleClick}
> >
محصولات محصولات
</Link> </Link>

@ -26,6 +26,9 @@
border-radius: 7px; border-radius: 7px;
font-family: numeralMedium; font-family: numeralMedium;
text-decoration: none; text-decoration: none;
&:hover {
color: white;
}
} }
&--ar { &--ar {
border: 1px solid #7fc75d; border: 1px solid #7fc75d;
@ -33,6 +36,9 @@
border-radius: 7px; border-radius: 7px;
color: #7fc75d; color: #7fc75d;
margin-top: 10px; margin-top: 10px;
&:hover {
color: #7fc75d;
}
} }
} }

@ -28,6 +28,7 @@ const fontSize = {
class Products extends Component { class Products extends Component {
state = { state = {
selectedSort: null, selectedSort: null,
search: null,
selectedFilters: { selectedFilters: {
level: [], level: [],
subject: [], subject: [],
@ -56,6 +57,13 @@ class Products extends Component {
this.props.getList(); this.props.getList();
} }
handleProductSearch = (val) => {
this.setState({
search: val,
});
this.props.searchBook(val);
};
render() { render() {
const { dateFilters, degreeFilters, firstFilters } = this.state; const { dateFilters, degreeFilters, firstFilters } = this.state;
const { loading, list, page } = this.props; const { loading, list, page } = this.props;
@ -99,6 +107,7 @@ class Products extends Component {
type="search" type="search"
style={{ fontSize: fontSize.mobile.input }} style={{ fontSize: fontSize.mobile.input }}
placeholder={"جستجو"} placeholder={"جستجو"}
onChange={(e) => this.handleProductSearch(e.target.value)}
/> />
<img src={navbarSearch} alt="جستجو" /> <img src={navbarSearch} alt="جستجو" />
</div> </div>
@ -115,7 +124,11 @@ class Products extends Component {
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> <FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div> </div>
<div className="mobile-products__list d-flex flex-wrap"> <div className="mobile-products__list d-flex flex-wrap">
{list.map((item, i) => ( {this.state.search
? this.props.searchResult.map((item, i) => (
<Product product={item} key={i} id={i} />
))
: list.map((item, i) => (
<Product product={item} key={i} id={i} /> <Product product={item} key={i} id={i} />
))} ))}
</div> </div>
@ -138,10 +151,11 @@ class Products extends Component {
export default connect( export default connect(
(state) => ({ (state) => ({
list: state.book.list, list: state.book.list,
searchResult: state.book.searchResult,
loading: state.book.loading, loading: state.book.loading,
// status: state.user.status, // status: state.user.status,
}), }),
{ getList: book.list } { getList: book.list, searchBook: book.searchBook }
)(Products); )(Products);
Products.defaultProps = { Products.defaultProps = {

@ -5,7 +5,7 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 70px;
&__body { &__body {
margin-top: 20px; margin-top: 20px;
&--left { &--left {

@ -0,0 +1,89 @@
import React, { useState } from "react";
import ChevronRightRoundedIcon from "@material-ui/icons/ChevronRightRounded";
import ChevronLeftRoundedIcon from "@material-ui/icons/ChevronLeftRounded";
import CloseRoundedIcon from "@material-ui/icons/CloseRounded";
import "./index.scss";
export default function Modal(props) {
const [clientX, setClientX] = useState(100);
const { selectedImage, handleNavigation, setOpen } = props;
const handleTouch = (val) => {
if (val - clientX > 20) {
handleNavigation("left", selectedImage);
} else if (val - clientX < -20) {
handleNavigation("right", selectedImage);
}
};
return (
<>
{window.innerWidth > 1000 ? null : (
<div
className="qr-image-modal d-flex"
onTouchStart={(e) => setClientX(e.touches[0].clientX)}
onTouchEnd={(e) => handleTouch(e.changedTouches[0].clientX)}
>
<CloseRoundedIcon
onClick={() => setOpen(false)}
style={{
fontSize: 50,
color: "red",
position: "fixed",
right: 10,
top: 30,
zIndex: 1000,
}}
/>
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("right", selectedImage)}
>
<ChevronRightRoundedIcon style={{ fontSize: 35, color: "white" }} />
</div>
<img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} />
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("left", selectedImage)}
>
<ChevronLeftRoundedIcon style={{ fontSize: 35, color: "white" }} />
</div>
</div>
)}
{window.innerWidth > 1000 ? (
<div
className="qr-image-modal d-flex"
onTouchStart={(e) => setClientX(e.touches[0].clientX)}
onTouchEnd={(e) => handleTouch(e.changedTouches[0].clientX)}
>
<CloseRoundedIcon
onClick={() => setOpen(false)}
style={{
fontSize: 50,
color: "red",
position: "fixed",
right: 10,
top: 30,
zIndex: 1000,
}}
/>
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("right", selectedImage)}
>
<ChevronRightRoundedIcon style={{ fontSize: 55, color: "white" }} />
</div>
<img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} />
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("left", selectedImage)}
>
<ChevronLeftRoundedIcon style={{ fontSize: 55, color: "white" }} />
</div>
</div>
) : null}
</>
);
}

@ -0,0 +1,42 @@
.mobile-qr-image-modal {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
padding: 0px 5px;
z-index: 600;
background-color: rgba(0, 0, 0, 0.938);
&__slide {
width: 35px;
height: 100%;
// background-color: white;
}
& img {
width: calc(100% - 70px);
height: 100%;
object-fit: contain;
margin: 20px 0px;
}
}
.qr-image-modal {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
padding: 0px 100px;
z-index: 600;
background-color: rgba(0, 0, 0, 0.938);
&__slide {
width: 65px;
height: 100%;
// background-color: white;
}
& img {
width: calc(100% - 130px);
height: 100%;
object-fit: contain;
}
}

@ -1,34 +1,201 @@
import React, { Component } from "react"; import React, { Component, useState } from "react";
import Modal from "./Modal/index";
import "./index.scss"; import "./index.scss";
const maxMobileSize = 550;
const fontSize = {
mobile: {
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 10,
},
};
export default function QRImage(props) { export default function QRImage(props) {
const list = props.data.fileIds.split(","); const list = props.data.fileIds.split(",");
const [open, setOpen] = useState(null);
const [selectedImage, setSelectedImage] = useState(list[0]);
const handleNavigation = (direction, item) => {
const position = list.indexOf(item);
const length = list.length;
if (direction === "left") {
if (position < length - 1) {
setSelectedImage(list[position + 1]);
}
} else {
if (position > 0) {
setSelectedImage(list[position - 1]);
}
}
};
const closeModal = (val) => {
console.log(val);
setOpen(false);
};
const mobileImages = () => {
if (list.length === 1) {
return ( return (
<> <div
{window.innerWidth < 1000 ? ( className="mobile-qr-image d-flex"
(list.length === 1 ? ( // onClick={() => setOpen(true)}
<div className="mobile-qr-image d-flex"> >
<img <img
className="mobile-qr-image__single" className="mobile-qr-image__single"
src={`https://dnvn.ir/api/v1/file/${list[0]}`} src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/> />
</div> </div>
) : null, );
list.length !== 2 ? ( } else if (list.length === 2) {
<div className="mobile-qr-image d-flex"> return (
<div
className="mobile-qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img <img
className="mobile-qr-image__two" className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[0]}`} src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/> />
<img <img
className="mobile-qr-image__two" className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`} src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/> />
</div> </div>
) : null) );
) : ( } else {
<p>reza</p> return (
)} <div className="mobile-qr-image d-flex">
<div className="mobile-qr-image__two mobile-qr-image__more">
<img
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
<div className="mobile-qr-image__two mobile-qr-image__more d-flex justify-content-center align-items-center">
<span
style={{ fontSize: fontSize.mobile.span }}
className="d-flex justify-content-center align-items-center"
onClick={() => setOpen(true)}
>
+{list.length - 2}
</span>
<img
className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
/>
</div>
{open ? (
<Modal
setOpen={closeModal}
handleNavigation={handleNavigation}
selectedImage={selectedImage}
/>
) : null}
</div>
);
}
};
const desktopImages = () => {
if (list.length === 1) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
className="qr-image__single"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else if (list.length === 2) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
className="qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
className="qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else if (list.length === 3) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
<img
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[2]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else {
return (
<div className="qr-image d-flex">
<div className="qr-image__three qr-image__more">
<img
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
<div className="qr-image__three qr-image__more">
<img
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
</div>
<div className="qr-image__three qr-image__more d-flex justify-content-center align-items-center">
<span
style={{ fontSize: fontSize.mobile.span }}
className="d-flex justify-content-center align-items-center"
onClick={() => setOpen(true)}
>
+{list.length - 3}
</span>
<img src={`https://dnvn.ir/api/v1/file/${list[2]}`} />
</div>
{open ? (
<Modal
setOpen={closeModal}
handleNavigation={handleNavigation}
selectedImage={selectedImage}
/>
) : null}
</div>
);
}
};
return (
<>
{window.innerWidth < 1000 ? mobileImages() : null}
{window.innerWidth > 1000 ? desktopImages() : null}
</> </>
); );
} }

@ -10,4 +10,77 @@
width: 49%; width: 49%;
height: 150px; height: 150px;
} }
&__more {
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
span {
direction: ltr;
font-family: numeralLight;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.767);
color: white;
position: absolute;
left: 0px;
top: 0px;
}
}
}
.qr-image {
width: 100%;
justify-content: space-between;
max-width: 550px;
margin: 20px auto;
&__single {
width: 100%;
border-radius: 10px;
height: 280px;
& img {
object-fit: cover;
}
}
&__two {
width: 49%;
height: 225px;
& img {
object-fit: cover;
}
}
&__three {
width: 32.5%;
height: 180px;
& img {
object-fit: cover;
}
}
&__more {
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
span {
direction: ltr;
font-family: numeralLight;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.767);
color: white;
position: absolute;
left: 0px;
top: 0px;
}
}
} }

@ -147,7 +147,7 @@
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 90px;
&__notAccess { &__notAccess {
justify-content: center; justify-content: center;
h1 { h1 {

@ -24,7 +24,16 @@ export default class QRModal extends Component {
{this.props.tail} {this.props.tail}
</Link> </Link>
</div> </div>
) : null} ) : (
<div className="qr-modal d-flex flex-column justify-content-center align-items-center">
<span style={{ fontSize: fontSize.mobile.span }}>
اسکن کد QR موفقیت آمیز بود.
</span>
<Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}>
{this.props.tail}
</Link>
</div>
)}
</> </>
); );
} }

@ -26,6 +26,34 @@
} }
} }
.qr-modal {
position: fixed;
left: 0px;
background-color: rgba(0, 0, 0, 0.925);
top: 0px;
width: 100vw;
height: 100vh;
z-index: 500;
animation-name: qrModal;
animation-duration: 0.4s;
span {
font-family: numeralLight;
color: white;
}
a {
text-decoration: none;
width: 50%;
margin: 25px auto;
background-color: #00cc69;
border: 2px solid white;
padding: 20px 0px;
text-align: center;
color: white;
font-family: numeralLight;
border-radius: 25px;
}
}
@keyframes qrModal { @keyframes qrModal {
0% { 0% {
left: -100vw; left: -100vw;

@ -29,7 +29,7 @@ class QRScan extends Component {
state = { state = {
value: null, value: null,
facingMode: 0, facingMode: 0,
tail: null, tail: "Zist13-10",
}; };
async componentDidUpdate() { async componentDidUpdate() {
@ -83,19 +83,8 @@ class QRScan extends Component {
)} )}
</section> </section>
{this.state.tail === null ? null : ( {this.state.tail === null ? null : (
<Link to={"/qr"} style={{ fontSize: fontSize.desktop.p }}> <Modal tail={this.state.tail} />
{this.state.tail}
</Link>
)} )}
<p
style={{ fontSize: fontSize.desktop.p }}
className="qr-scan__box--text d-flex"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و
مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای
</p>
</div> </div>
</div> </div>
<Footer /> <Footer />

@ -128,7 +128,7 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
padding-top: 110px; padding-top: 80px;
&__back { &__back {
justify-content: flex-start; justify-content: flex-start;
a { a {
@ -181,6 +181,8 @@
&--camera { &--camera {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
max-width: 300px;
margin: 0px auto 40px;
* { * {
border-radius: 10px; border-radius: 10px;
} }

Loading…
Cancel
Save