master
amir hosein gorji 3 years ago
parent d542c25603
commit 0671058b76
  1. 2
      src/Redux/reducers/userProduct.js
  2. 31
      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. 2
      src/views/Home/HomeSlider/Blog/index.js
  8. 3
      src/views/Home/HomeSlider/Blog/index.scss
  9. 10
      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,
checkEmpty: false,
hasPhysical: false,
myList: [],
myList: null,
};
export default function userProduct(state = initialState, action) {
let { type, data } = action;

@ -1,20 +1,5 @@
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 = [
"پیش دبستان",
"اول",
@ -36,28 +21,24 @@ export default class Item extends Component {
console.log({ data });
return (
<>
{window.innerWidth < 1000 ? (
{/* {window.innerWidth < 1000 ? ( */}
<a
href={`https://ar.dnvn.ir/lunch?id=${data.product?.ARId}`}
target="_blank"
rel="noreferrer"
className="mobile-products-product d-flex flex-column"
className="ar_item d-flex flex-column"
>
<img
src={`https://dnvn.ir/api/v1/file/${data.product?.book?.fileIds}`}
alt={data.title}
/>
<div className="mobile-products-product__info d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
{data.product?.book?.name}{" "}
{grades[+data.product?.book?.gradeId]}
<div className="ar_item__info d-flex flex-column">
<h1 style={{ fontSize: 17 }}>
{data.product?.book?.name} {grades[+data.product?.book?.gradeId]}
</h1>
</div>
</a>
) : null}
{window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items"></article>
) : null}
{/* ) : null} */}
</>
);
}

@ -72,7 +72,11 @@ class AR extends Component {
<div className="ar d-flex flex-column">
<Navbar />
<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>
<Footer />
</>

@ -18,3 +18,43 @@
overflow-x: hidden;
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 Location from "./Location/Location";
import Loader from "~/components/Loader/index";
import Support from "../Support";
import "./index.scss";
const maxDesktopSize = 1250;
@ -56,25 +56,7 @@ class Contact extends Component {
<Navbar page={"contact"} />
<div className="contact__forms d-flex">
<div className="contact__forms--right d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>پشتیبانی</h1>
<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>
<Support />
</div>
<div className="contact__forms--left d-flex flex-column">
<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">
<img src={location} alt="آدرس" className="m-1" />
<p style={{ fontSize: fontSize.mobile.p }}>
تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
تهران، میدان فردوسی، خیابان موسوی، پلاک ۳۰
</p>
</div>
<div
@ -176,7 +158,7 @@ class Contact extends Component {
>
<div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.mobile.span }}>
02163462405
۸۸۸۱۴۶۳۷
</span>
<img src={contact} alt="تماس" className="m-1" />
</div>

@ -14,123 +14,12 @@
margin-bottom: 80px;
&--right {
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 {
width: 45%;
margin-top: 30px;
width: 48%;
height: 100%;
vertical-align: middle;
p {
font-family: numeralLight;
font-size: calc(100vw / 95);

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

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

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

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

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

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

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

Loading…
Cancel
Save