master
amir hosein gorji 3 years ago
parent d542c25603
commit 0671058b76
  1. 2
      src/Redux/reducers/userProduct.js
  2. 55
      src/views/AR/Item/index.js
  3. 6
      src/views/AR/index.js
  4. 40
      src/views/AR/index.scss
  5. 26
      src/views/Contact/index.js
  6. 117
      src/views/Contact/index.scss
  7. 10
      src/views/Home/HomeSlider/Blog/index.js
  8. 3
      src/views/Home/HomeSlider/Blog/index.scss
  9. 24
      src/views/Home/HomeSlider/index.js
  10. 1
      src/views/Home/Navbar/Mobile/index.js
  11. 4
      src/views/Home/Navbar/Mobile/index.scss
  12. 37
      src/views/Support/index.js
  13. 4
      src/views/Support/index.scss

@ -8,7 +8,7 @@ const initialState = {
sum: null, sum: null,
checkEmpty: false, checkEmpty: false,
hasPhysical: false, hasPhysical: false,
myList: [], myList: null,
}; };
export default function userProduct(state = initialState, action) { export default function userProduct(state = initialState, action) {
let { type, data } = action; let { type, data } = action;

@ -1,20 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
const maxMobileSize = 550;
const maxDesktopSize = 1250;
const fontSize = {
mobile: {
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
},
desktop: {
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
},
};
const grades = [ const grades = [
"پیش دبستان", "پیش دبستان",
"اول", "اول",
@ -36,28 +21,24 @@ export default class Item extends Component {
console.log({ data }); console.log({ data });
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {/* {window.innerWidth < 1000 ? ( */}
<a <a
href={`https://ar.dnvn.ir/lunch?id=${data.product?.ARId}`} href={`https://ar.dnvn.ir/lunch?id=${data.product?.ARId}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="mobile-products-product d-flex flex-column" className="ar_item d-flex flex-column"
> >
<img <img
src={`https://dnvn.ir/api/v1/file/${data.product?.book?.fileIds}`} src={`https://dnvn.ir/api/v1/file/${data.product?.book?.fileIds}`}
alt={data.title} alt={data.title}
/> />
<div className="mobile-products-product__info d-flex flex-column"> <div className="ar_item__info d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}> <h1 style={{ fontSize: 17 }}>
{data.product?.book?.name}{" "} {data.product?.book?.name} {grades[+data.product?.book?.gradeId]}
{grades[+data.product?.book?.gradeId]} </h1>
</h1> </div>
</div> </a>
</a> {/* ) : null} */}
) : null}
{window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items"></article>
) : null}
</> </>
); );
} }

@ -72,7 +72,11 @@ class AR extends Component {
<div className="ar d-flex flex-column"> <div className="ar d-flex flex-column">
<Navbar /> <Navbar />
<BreadCrumbs /> <BreadCrumbs />
<div className="ar__box d-flex flex-column"></div> <div className="ar__box d-flex flex-wrap">
{arList.map((item, i) => (
<Item data={item} key={i} />
))}
</div>
</div> </div>
<Footer /> <Footer />
</> </>

@ -18,3 +18,43 @@
overflow-x: hidden; overflow-x: hidden;
padding-top: 100px; padding-top: 100px;
} }
.ar_item {
&__info {
margin: 4px auto;
color: #02a1a6;
font-size: 14px;
text-align: center;
text-decoration: none !important;
h1 {
margin: 0;
}
}
img {
border-radius: 0.5rem;
max-height: 210px;
width: fit-content;
margin: 0 auto;
}
text-decoration: none !important;
width: 100%;
background-color: #fafafa;
margin: 10px 5px 0;
padding: 5px;
border-radius: 0.5rem;
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
}
@media screen and (min-width: 350px) {
.ar_item {
width: calc(50% - 10px);
}
}
@media screen and (min-width: 550px) {
.ar_item {
width: calc(33% - 10px);
}
}
@media screen and (min-width: 750px) {
.ar_item {
width: calc(25% - 10px);
}
}

@ -11,7 +11,7 @@ import home from "../../assets/icons/home.png";
import contact from "../../assets/icons/contact.png"; import contact from "../../assets/icons/contact.png";
import Location from "./Location/Location"; import Location from "./Location/Location";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import Support from "../Support";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
@ -56,25 +56,7 @@ class Contact extends Component {
<Navbar page={"contact"} /> <Navbar page={"contact"} />
<div className="contact__forms d-flex"> <div className="contact__forms d-flex">
<div className="contact__forms--right d-flex flex-column"> <div className="contact__forms--right d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>پشتیبانی</h1> <Support />
<p style={{ fontSize: fontSize.desktop.p }}>
برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده
کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال
کنید.
</p>
<Input label={"نام و نام خانوادگی"} name={"name"} />
<Input label={"شماره تماس"} name={"mobile"} />
<Select
parent={this}
options={["واحد فروش", "واحد محتوا", "واحد فنی"]}
/>
<Input label={"موضوع پیام"} name={"subject"} />
<textarea
placeholder="متن پیام"
name="description"
rows="5"
></textarea>
<button>ارسال</button>
</div> </div>
<div className="contact__forms--left d-flex flex-column"> <div className="contact__forms--left d-flex flex-column">
<div className="contact__location d-flex align-items-center"> <div className="contact__location d-flex align-items-center">
@ -167,7 +149,7 @@ class Contact extends Component {
<div className="mobile-contact__address--location d-flex align-items-center"> <div className="mobile-contact__address--location d-flex align-items-center">
<img src={location} alt="آدرس" className="m-1" /> <img src={location} alt="آدرس" className="m-1" />
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار تهران، میدان فردوسی، خیابان موسوی، پلاک ۳۰
</p> </p>
</div> </div>
<div <div
@ -176,7 +158,7 @@ class Contact extends Component {
> >
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.mobile.span }}> <span style={{ fontSize: fontSize.mobile.span }}>
02163462405 ۸۸۸۱۴۶۳۷
</span> </span>
<img src={contact} alt="تماس" className="m-1" /> <img src={contact} alt="تماس" className="m-1" />
</div> </div>

@ -14,123 +14,12 @@
margin-bottom: 80px; margin-bottom: 80px;
&--right { &--right {
width: 45%; width: 45%;
.MuiOutlinedInput-notchedOutline {
top: 0px !important;
}
.MuiOutlinedInput-notchedOutline {
border-color: #cecece !important;
border-width: 1px !important;
color: green !important;
border-radius: 10px !important;
}
.MuiOutlinedInput-input {
padding: 20px 14px !important;
font-size: calc(100vw / 85) !important;
}
.MuiInputLabel-outlined {
font-family: numeralLight !important;
display: inline !important;
position: absolute;
text-align: right !important;
right: 10px;
top: 12px;
padding: 0px !important;
transform: translate(0px, 0px) scale(1) !important;
}
.MuiInputLabel-shrink {
text-align: right !important;
display: inline;
position: absolute;
right: -5px;
top: -8px;
transform: translate(0px, 0px) scale(0.75) !important;
padding-right: 15px !important;
}
label {
background-color: white;
max-width: 120px;
text-align: center;
color: #797979 !important;
letter-spacing: -1px;
}
.Mui-focused {
color: rgba(0, 0, 0, 0.54) !important;
border-color: #c4c4c5 !important;
}
h1 {
letter-spacing: -2px;
color: #6cbe44;
font-family: numeralMedium;
font-size: calc(100vw / 40);
}
p {
font-family: numeralLight;
font-size: calc(100vw / 95);
color: #6f7074;
}
button {
align-self: flex-start;
margin-top: 30px;
font-family: numeralLight;
text-decoration: none;
color: white;
background-color: #6cbe44;
border-radius: 6px;
padding: 5px 25px;
font-size: calc(100vw / 90);
max-width: 110px;
border: 0px;
&:hover {
color: white;
}
}
textarea {
// width: 350px;
font-family: numeralLight;
border-radius: 10px;
font-size: calc(100vw / 90);
margin-top: 20px;
border: 1px solid #c4c4c5;
padding: 10px 8px;
color: #6f7074;
&::placeholder {
color: #797979;
}
&:focus {
outline: 0px;
}
}
.MuiFormControl-root {
select {
font-family: numeralLight;
height: 100%;
direction: rtl;
border: 1px solid #cecece !important;
text-align: center !important;
border-radius: 10px !important;
color: #76797e !important;
&:focus {
background-color: white !important;
}
option {
padding: 5px !important;
}
}
.MuiNativeSelect-icon {
display: none;
}
.MuiNativeSelect-select {
padding: 8px 10px 8px 100px !important;
}
}
} }
&--left { &--left {
width: 45%; margin-top: 30px;
width: 48%;
height: 100%; height: 100%;
vertical-align: middle;
p { p {
font-family: numeralLight; font-family: numeralLight;
font-size: calc(100vw / 95); font-size: calc(100vw / 95);

@ -97,10 +97,12 @@ export default class Simple extends Component {
> >
<Link to={`/blogs/${data.id}`}> <Link to={`/blogs/${data.id}`}>
{data.type === "image" ? ( {data.type === "image" ? (
<img <div style={{ textAlign: "center" }}>
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} <img
alt={data.title} src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
/> alt={data.title}
/>
</div>
) : null} ) : null}
{data.type === "video" ? ( {data.type === "video" ? (
<img src={video} alt={data.title} /> <img src={video} alt={data.title} />

@ -74,9 +74,10 @@
text-decoration: none; text-decoration: none;
} }
img { img {
width: 100%; // width: 100%;
height: 150px; height: 150px;
border-radius: 10px; border-radius: 10px;
margin: 0 auto;
} }
h1 { h1 {
font-family: numeralMedium; font-family: numeralMedium;

@ -44,13 +44,15 @@ const SimpleHeader = (props) => {
<h1>{props.title}</h1> <h1>{props.title}</h1>
<span></span> <span></span>
</div> </div>
<Link {/* {props.more ? (
to={props.link} <Link
className="mobile-home-scroll__header--more d-flex align-items-center" to={props.link}
> className="mobile-home-scroll__header--more d-flex align-items-center"
<span>بیشتر</span> >
<img src={dropdown} alt="فلش" /> <span>بیشتر</span>
</Link> <img src={dropdown} alt="فلش" />
</Link>
) : null} */}
</div> </div>
) : null} ) : null}
</> </>
@ -66,13 +68,13 @@ const TabHeader = (props) => {
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1> <h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
<span></span> <span></span>
</div> </div>
<Link {/* <Link
to={props.link} to={props.link}
className="home-scroll__header--more d-flex align-items-center" className="home-scroll__header--more d-flex align-items-center"
> >
<span style={{ fontSize: fontSize.desktop.h1 }}>بیشتر</span> <span style={{ fontSize: fontSize.desktop.h1 }}>بیشتر</span>
<img src={dropdown} alt="فلش" /> <img src={dropdown} alt="فلش" />
</Link> </Link> */}
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
@ -81,10 +83,10 @@ const TabHeader = (props) => {
<h1>{props.title}</h1> <h1>{props.title}</h1>
<span></span> <span></span>
</div> </div>
<div className="mobile-home-scroll__header--more d-flex align-items-center"> {/* <div className="mobile-home-scroll__header--more d-flex align-items-center">
<span>بیشتر</span> <span>بیشتر</span>
<img src={dropdown} alt="فلش" /> <img src={dropdown} alt="فلش" />
</div> </div> */}
</div> </div>
) : null} ) : null}
</> </>

@ -162,6 +162,7 @@ export default function MobileNavbar(props) {
open={state["right"]} open={state["right"]}
onClose={toggleDrawer("right", false)} onClose={toggleDrawer("right", false)}
onOpen={toggleDrawer("right", true)} onOpen={toggleDrawer("right", true)}
swipeAreaWidth={10}
> >
{list(props, "right")} {list(props, "right")}
</SwipeableDrawer> </SwipeableDrawer>

@ -28,7 +28,7 @@
} }
.logo { .logo {
width: 85px; width: 85px;
margin-right: 10px; margin-right: 15px;
} }
} }
&__logo { &__logo {
@ -43,7 +43,7 @@
} }
} }
&__logo2 { &__logo2 {
margin: 0 10px; margin: 0 15px;
img { img {
// transform: translate(20px, 0px); // transform: translate(20px, 0px);
width: 85px; width: 85px;

@ -8,10 +8,23 @@ import Select from "../Contact/Select/index";
import Upload from "./Upload"; import Upload from "./Upload";
import "./index.scss"; import "./index.scss";
import { connect } from "react-redux"; import { connect } from "react-redux";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
const grades = [
"پیش دبستان",
"اول",
"دوم",
"سوم",
"چهارم",
"پنجم",
"ششم",
"هفتم",
"هشتم",
"نهم",
"دهم",
"یازدهم",
"دوازدهم",
];
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
@ -66,13 +79,18 @@ class Support extends Component {
//todo redirectHome //todo redirectHome
} }
render() { render() {
let { status } = this.props; let { myProductList, status } = this.props;
console.log({ myProductList });
return ( return (
<> <>
<div className="mobile-support d-flex flex-column align-items-center"> <div className="mobile-support d-flex flex-column align-items-center">
<Navbar page={"support"} /> <Navbar page={"support"} />
<div className="mobile-support__form d-flex flex-column"> <div className="mobile-support__form d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>پشتیبانی</h1> <h1 style={{ fontSize: fontSize.mobile.h1 }}>پشتیبانی</h1>
<p>
برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
</p>
{status ? null : ( {status ? null : (
<> <>
<Input <Input
@ -86,7 +104,7 @@ class Support extends Component {
<Select <Select
name="unit" name="unit"
options={ options={
status status && this.props.myProductList.length
? ["واحد مورد نظر", "واحد فروش", "واحد محتوایی", "واحد فنی"] ? ["واحد مورد نظر", "واحد فروش", "واحد محتوایی", "واحد فنی"]
: ["واحد مورد نظر", "واحد فروش", "واحد فنی"] : ["واحد مورد نظر", "واحد فروش", "واحد فنی"]
} }
@ -96,10 +114,13 @@ class Support extends Component {
<Select <Select
name="bookId" name="bookId"
options={[ options={[
"کتاب", "انتخاب کتاب",
...new Set( ...new Set(
this.props.myProductList?.map( this.props.myProductList?.map(
(item) => item.product.book.name (item) =>
`${item.product.book.name} پایه ${
grades[item.product.book.gradeId]
}`
) || [] ) || []
), ),
]} ]}
@ -127,12 +148,12 @@ class Support extends Component {
export default connect( export default connect(
(state) => ({ (state) => ({
myProductList: state.userProduct.mylist || [], myProductList: state.userProduct.myList,
status: state.user.status, status: state.user.status,
uploadFileId: state.file.supportFileId, uploadFileId: state.file.supportFileId,
}), }),
{ {
getUserProductList: userProduct.mylist, getUserProductList: userProduct.myList,
submit: comment.add, submit: comment.add,
upload: file.upload, upload: file.upload,
} }

@ -141,7 +141,7 @@
} }
.mobile-support { .mobile-support {
width: 100vw; // width: 100vw;
max-width: 550px; max-width: 550px;
margin: 0px auto; margin: 0px auto;
padding: 0px 10px; padding: 0px 10px;
@ -215,7 +215,7 @@
button { button {
align-self: flex-start; align-self: flex-start;
margin-top: 30px; margin-top: 5px;
font-family: numeralLight; font-family: numeralLight;
text-decoration: none; text-decoration: none;
color: white; color: white;

Loading…
Cancel
Save