reza added some thing

master
RezaAshrafi77 3 years ago
parent 4be4ab6cdb
commit 3d391f7497
  1. 46
      public/index.html
  2. 4
      public/manifest.json
  3. 8
      src/AppRouter.js
  4. 26
      src/Redux/actions/activation.js
  5. 1
      src/Redux/actions/index.js
  6. 8
      src/Redux/actions/transport.js
  7. 27
      src/Redux/reducers/activation.js
  8. 1
      src/Redux/reducers/index.js
  9. 4
      src/Redux/reducers/transport.js
  10. BIN
      src/assets/images/film.jpg
  11. BIN
      src/assets/images/music.jpg
  12. 23
      src/views/Activation/index.js
  13. 6
      src/views/Auth/Login/Cellphone/index.scss
  14. 1
      src/views/Auth/Login/Code/index.scss
  15. 4
      src/views/Auth/Login/index.js
  16. 2
      src/views/Blogs/BreadCrumb/index.js
  17. 4
      src/views/Blogs/BreadCrumb/index.scss
  18. 28
      src/views/Blogs/index.js
  19. 22
      src/views/Blogs/index.scss
  20. 111
      src/views/Cart/DeliveryMethod/index.js
  21. 1
      src/views/Cart/Discount/index.js
  22. 3
      src/views/Cart/Table/index.js
  23. 16
      src/views/Cart/index.js
  24. 9
      src/views/Home/HomeScroll/index.scss
  25. 76
      src/views/Home/HomeSlider/Blog/index.js
  26. 40
      src/views/Home/HomeSlider/index.js
  27. 2
      src/views/Home/Membership/Input/index.js
  28. 5
      src/views/Home/Membership/index.scss
  29. 20
      src/views/Home/SingleBlog/index.scss
  30. 35
      src/views/Home/index.js

@ -3,35 +3,43 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" /> <meta
name="viewport"
content="width=device-width, initial-scale=1"
user-scalable="false"
/>
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="فروشگاه کتاب دانوین" /> <meta name="description" content="فروشگاه کتاب دانوین" />
<link <link
href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
rel="stylesheet" rel="stylesheet"
/> />
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Danovin</title> <title>دانوین</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script> <script>
if ('serviceWorker' in navigator) { if ("serviceWorker" in navigator) {
window.addEventListener('load', function () { window.addEventListener("load", function () {
navigator.serviceWorker.register('./serviceworker.js') navigator.serviceWorker
.then((registration) => { .register("./serviceworker.js")
// Registration was successful .then((registration) => {
console.log('ServiceWorker registration successful with scope: ', registration.scope); // Registration was successful
}) console.log(
.catch((err) => { "ServiceWorker registration successful with scope: ",
console.log(err) registration.scope
}); );
}); })
} .catch((err) => {
</script> console.log(err);
});
});
}
</script>
</body> </body>
</html> </html>

@ -1,6 +1,6 @@
{ {
"short_name": "React App", "short_name": "دانوین",
"name": "Create React App Sample", "name": "فروشگاه کتاب دانوین",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",

@ -43,12 +43,12 @@ class AppRouter extends Component {
const mobile = window.innerWidth < 1000 ? true : false; const mobile = window.innerWidth < 1000 ? true : false;
let home = mobile ? ( let home = mobile ? (
<Route exact path={"/"}> <Route exact path={"/"}>
{proxy.status ? ( {proxy.status() ? (
this.props.profile ? ( this.props.profile.status ? (
<Home /> <Home />
) : ( ) : (
<Auth /> // <Auth />
// <Auth page={"profile"} /> <Auth page={"profile"} />
) )
) : ( ) : (
<Auth /> <Auth />

@ -0,0 +1,26 @@
import proxy from "../proxy";
const activation = {
list:
(data = {}) =>
async (dispatch) =>
await proxy.get("activation/list", data, { dispatch }),
update:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.put("activation/update", data);
await proxy.get("activation/list", data2, { dispatch });
},
add:
(data = {}) =>
async (dispatch) => {
await proxy.post("activation/add", data);
},
del:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.delete("activation/delete", data);
await proxy.get("activation/list", data2, { dispatch });
},
};
export default activation;

@ -10,3 +10,4 @@ export { default as userProduct } from "./userProduct.js";
export { default as userFactor } from "./userFactor.js"; export { default as userFactor } from "./userFactor.js";
export { default as transport } from "./transport.js"; export { default as transport } from "./transport.js";
export { default as comment } from "./comment.js"; export { default as comment } from "./comment.js";
export { default as activation } from "./activation.js";

@ -20,6 +20,14 @@ const transport = {
await proxy.post("transport/add", data); await proxy.post("transport/add", data);
await proxy.get("transport/list", data2, { dispatch }); await proxy.get("transport/list", data2, { dispatch });
}, },
setTransport:
(data = {}, data2 = {}, data3 = {}) =>
async (dispatch) => {
await proxy.post("transport/setTransport", data);
await proxy.get("userFactor/info", data3, { dispatch });
await proxy.get("transport/list", data2, { dispatch });
console.log(data);
},
del: del:
(data = {}, data2 = {}) => (data = {}, data2 = {}) =>
async (dispatch) => { async (dispatch) => {

@ -0,0 +1,27 @@
import { toast } from "react-toastify";
const initialState = {
loading: false,
error: null,
list: [],
};
export default function activation(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "activation/list":
return { ...state, loading: false, list: data, error: null };
case "activation/update":
return { ...state, loading: false, error: null };
case "activation/add":
toast.sucess("کتاب شما با موفقیت فعال گردید.");
return { ...state, loading: false, error: null };
case "activation/delete":
return { ...state, loading: false, error: null };
case "loading":
return { ...state, loading: true };
case "error":
return { ...state, loading: false, error: data.message };
default:
return state;
}
}

@ -10,3 +10,4 @@ export { default as userProduct } from "./userProduct.js";
export { default as userFactor } from "./userFactor.js"; export { default as userFactor } from "./userFactor.js";
export { default as transport } from "./transport.js"; export { default as transport } from "./transport.js";
export { default as comment } from "./comment.js"; export { default as comment } from "./comment.js";
export { default as activation } from "./activation.js";

@ -1,3 +1,4 @@
import { toast } from "react-toastify";
const initialState = { const initialState = {
loading: true, loading: true,
error: null, error: null,
@ -15,6 +16,9 @@ export default function transport(state = initialState, action) {
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "transport/add": case "transport/add":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "transport/setTransport":
toast.success("روش ارسال با موفقیت تغییر یافت!");
return { ...state, loading: false, error: null };
case "transport/delete": case "transport/delete":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "loading": case "loading":

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

@ -1,12 +1,11 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux";
import { activation } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import History from "./History/index";
import sciense_6 from "../../assets/images/sciense-6.png";
import analytics from "../../assets/icons/analytics.svg"; import analytics from "../../assets/icons/analytics.svg";
import danger from "../../assets/icons/danger.svg";
import "./index.scss"; import "./index.scss";
@ -29,10 +28,15 @@ const fontSize = {
}, },
}; };
export default class Activation extends Component { class Activation extends Component {
state = { state = {
value: null, value: null,
}; };
componentDidMount() {
this.props.add({});
}
render() { render() {
const { data } = this.props; const { data } = this.props;
return ( return (
@ -154,13 +158,4 @@ export default class Activation extends Component {
} }
} }
Activation.defaultProps = { export default connect((state) => ({}), { add: activation.add })(Activation);
data: [
{
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "پایه هفتم ابتدایی",
status: "انجام شد",
image: sciense_6,
},
],
};

@ -21,6 +21,7 @@
width: 100%; width: 100%;
position: relative; position: relative;
padding: 10px 40px; padding: 10px 40px;
height: 130px;
img { img {
position: absolute; position: absolute;
left: 50px; left: 50px;
@ -31,7 +32,7 @@
text-align: right; text-align: right;
position: absolute; position: absolute;
left: 108px; left: 108px;
top: 18px; top: 22px;
direction: ltr; direction: ltr;
color: #a5a5a5; color: #a5a5a5;
font-family: numeralLight; font-family: numeralLight;
@ -46,7 +47,7 @@
text-align: left; text-align: left;
background-color: #f2f2f2; background-color: #f2f2f2;
border: none; border: none;
padding: 8px 5px 8px 85px; padding: 8px 5px 8px 80px;
border-radius: 5px; border-radius: 5px;
&:focus { &:focus {
outline: 0px; outline: 0px;
@ -94,6 +95,7 @@
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
bottom: 40px; bottom: 40px;
width: 250px;
} }
h1 { h1 {
font-family: numeralBold; font-family: numeralBold;

@ -70,6 +70,7 @@
img { img {
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
width: 250px;
} }
h1 { h1 {
width: 100%; width: 100%;

@ -23,8 +23,8 @@ class Login extends Component {
this.props.otp_login({ this.props.otp_login({
cellphone, cellphone,
otp, otp,
userToken: "1", userToken: "2",
applicationToken: "11", applicationToken: "22",
}); });
} }

@ -19,7 +19,7 @@ const fontSize = {
export default function ActiveLastBreadcrumb() { export default function ActiveLastBreadcrumb() {
return ( return (
<Breadcrumbs aria-label="breadcrumb"> <Breadcrumbs aria-label="breadcrumb" style={{ marginBottom: 10 }}>
<Link <Link
to={"/"} to={"/"}
style={{ style={{

@ -1,8 +1,8 @@
.MuiBreadcrumbs-li{ .MuiBreadcrumbs-li {
a { a {
text-decoration: none; text-decoration: none;
font-family: numeralLight; font-family: numeralLight;
color: #6F7074; color: #6f7074;
letter-spacing: -1px; letter-spacing: -1px;
} }
} }

@ -8,6 +8,9 @@ import Footer from "../Home/Footer";
import BreadCrumb from "./BreadCrumb/index"; import BreadCrumb from "./BreadCrumb/index";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import music from "~/assets/images/music.jpg";
import video from "~/assets/images/film.jpg";
import "./index.scss"; import "./index.scss";
class Blogs extends Component { class Blogs extends Component {
@ -76,7 +79,18 @@ const Item = (props) => {
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<Link to={"/blogs/" + item.id} className="landscape-blogs-item d-flex"> <Link to={"/blogs/" + item.id} className="landscape-blogs-item d-flex">
<div className="landscape-blogs-item__pic"> <div className="landscape-blogs-item__pic">
<img src={`https://dnvn.ir/api/v1/file/${item.id}`} alt={item.id} /> {item.type === "image" ? (
<img
src={`https://dnvn.ir/api/v1/file/${item.fileIds}`}
alt={item.title}
/>
) : null}
{item.type === "video" ? (
<img src={video} alt={item.title} />
) : null}
{item.type === "audio" ? (
<img src={music} alt={item.title} />
) : null}
</div> </div>
<div className="landscape-blogs-item__left d-flex flex-column"> <div className="landscape-blogs-item__left d-flex flex-column">
<h1>{item.title}</h1> <h1>{item.title}</h1>
@ -89,10 +103,14 @@ const Item = (props) => {
to={"/blogs/" + item.id} to={"/blogs/" + item.id}
className="portrait-blogs-item d-flex flex-column" className="portrait-blogs-item d-flex flex-column"
> >
<img {item.type === "image" ? (
src={`https://dnvn.ir/api/v1/file/${item.id}`} <img
alt={item.title} src={`https://dnvn.ir/api/v1/file/${item.fileIds}`}
/> alt={item.title}
/>
) : null}
{item.type === "video" ? <img src={video} alt={item.title} /> : null}
{item.type === "audio" ? <img src={music} alt={item.title} /> : null}
<h1>{item.title}</h1> <h1>{item.title}</h1>
{/* <p>{item.text}</p> */} {/* <p>{item.text}</p> */}
<span>مطالعه کامل</span> <span>مطالعه کامل</span>

@ -117,29 +117,33 @@
position: relative; position: relative;
margin: 20px 4px 0px; margin: 20px 4px 0px;
transform: translateY(-10px); transform: translateY(-10px);
height: 330px; // height: 330px;
& img { & img {
width: 100%; width: 100%;
height: 220px; height: 220px;
border-radius: 10px; border-radius: 10px;
max-width: 300px;
margin: 0px auto;
} }
h1 { h1 {
width: 100%;
padding-right: 2px; padding-right: 2px;
font-size: 28px; font-size: 24px;
margin-bottom: 0px;
margin-top: 10px;
// color: $smalt; // color: $smalt;
text-decoration: none; text-decoration: none;
color: #4e4e4e; color: #4e4e4e;
max-width: 300px;
text-align: right;
margin: 10px auto 0px;
} }
span { span {
position: absolute; width: 100%;
font-size: 18px; max-width: 300px;
bottom: 5px; font-size: 14px;
left: 10px; margin: 10px auto 0px;
margin-bottom: 0px;
border-radius: 10px; border-radius: 10px;
color: #6cbe44; color: #6cbe44;
text-align: left;
} }
} }
} }

@ -1,4 +1,7 @@
import React, { Component } from "react";
import "./index.scss"; import "./index.scss";
import { connect } from "react-redux";
import { transport } from "~/Redux/actions";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
@ -22,54 +25,66 @@ const fontSize = {
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
}, },
}; };
const DeliveryMethod = (props) => { class DeliveryMethod extends Component {
return ( render() {
<> const { data, setTransport, factorInfo, parent, transportId, list } =
{window.innerWidth > 1000 ? ( this.props;
<div return (
className="delivery-methods d-flex justify-content-between align-items-center" <>
style={{ {window.innerWidth > 1000 ? (
background: props.data.isDe ? "#ccffcc" : "white", <div
}} className="delivery-methods d-flex justify-content-between align-items-center"
onClick={() => style={{
props.parent.setState({ selectedDelivery: props.data }) background: data.isDe ? "#ccffcc" : "white",
} }}
> onClick={() => parent.setState({ selectedDelivery: data })}
<strong style={{ fontSize: fontSize.desktop.strong }}> >
{props.data.name} <strong style={{ fontSize: fontSize.desktop.strong }}>
</strong> {data.name}
<div className="d-flex flex-column align-items-center"> </strong>
<h3 style={{ fontSize: fontSize.desktop.h3 }}> <div className="d-flex flex-column align-items-center">
{props.data.price} <h3 style={{ fontSize: fontSize.desktop.h3 }}>{data.price}</h3>
</h3> <span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
<span style={{ fontSize: fontSize.desktop.span }}>تومان</span> </div>
</div> </div>
</div> ) : null}
) : null} {window.innerWidth < 1000 ? (
{window.innerWidth < 1000 ? ( <div
<div className="mobile-delivery-methods d-flex justify-content-between align-items-center"
className="mobile-delivery-methods d-flex justify-content-between align-items-center" style={{
style={{ background: data.id === transportId ? "#ccffcc" : "white",
background: }}
props.parent.state.selectedDelivery === props.data onClick={() =>
? "#ccffcc" setTransport(
: "white", {
}} factorId: factorInfo.id,
onClick={() => transportId: data.id,
props.parent.setState({ selectedDelivery: props.data }) },
} {},
> { id: list[0].factorId }
<strong style={{ fontSize: fontSize.mobile.strong }}> )
{props.data.name} }
</strong> >
<div className="d-flex flex-column align-items-center"> <strong style={{ fontSize: fontSize.mobile.strong }}>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3> {data.name}
<span style={{ fontSize: fontSize.mobile.span }}>تومان</span> </strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>{data.price}</h3>
<span style={{ fontSize: fontSize.mobile.span }}>تومان</span>
</div>
</div> </div>
</div> ) : null}
) : null} </>
</> );
); }
}; }
export default DeliveryMethod; export default connect(
(state) => ({
factorInfo: state.userFactor.info,
list: state.userProduct.list,
}),
{
setTransport: transport.setTransport,
}
)(DeliveryMethod);

@ -38,6 +38,7 @@ const DiscoutCode = ({ codeId, setCodeId }) => {
<input <input
style={{ fontSize: fontSize.desktop.input }} style={{ fontSize: fontSize.desktop.input }}
type="text" type="text"
defaultValue={codeId}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
/> />
<button <button

@ -63,7 +63,6 @@ function BasicTable(props) {
const classes = useStyles(); const classes = useStyles();
const { list, handleCounter, handleDelete, route } = props; const { list, handleCounter, handleDelete, route } = props;
const sum = () => { const sum = () => {
console.log(list);
let total = 0; let total = 0;
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
total += list[i].count * 1; total += list[i].count * 1;
@ -380,5 +379,5 @@ export default connect(
info: state.book.info, info: state.book.info,
id: state.user.status.id, id: state.user.status.id,
}), }),
{ pushToCart: userProduct.update } { pushToCart: userProduct.add }
)(BasicTable); )(BasicTable);

@ -1,6 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userProduct, transport } from "~/Redux/actions"; import { userProduct, transport, userFactor } from "~/Redux/actions";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
@ -48,6 +48,9 @@ class Cart extends Component {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (this.props.list.length > 0) { if (this.props.list.length > 0) {
if (this.props.factorInfo === null) {
this.props.getFactorInfo({ id: this.props.list[0].factorId });
}
let wantedId; //should be zero let wantedId; //should be zero
for (let item of this.props.list) { for (let item of this.props.list) {
if (item.condition) { if (item.condition) {
@ -96,7 +99,7 @@ class Cart extends Component {
}; };
render() { render() {
const { list, payPrice, payMethods } = this.props; const { list, payPrice, payMethods, factorInfo } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
@ -200,7 +203,12 @@ class Cart extends Component {
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => ( {this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} /> <DeliveryMethod
data={item}
key={i}
parent={this}
transportId={factorInfo ? factorInfo.transportId : null}
/>
))} ))}
</div> </div>
</div> </div>
@ -263,10 +271,12 @@ export default connect(
list: state.userProduct.list, list: state.userProduct.list,
payPrice: state.userProduct.sum, payPrice: state.userProduct.sum,
payMethods: state.transport.list, payMethods: state.transport.list,
factorInfo: state.userFactor.info,
}), }),
{ {
getList: userProduct.list, getList: userProduct.list,
getInfo: userProduct.info, getInfo: userProduct.info,
getTransportList: transport.list, getTransportList: transport.list,
getFactorInfo: userFactor.info,
} }
)(Cart); )(Cart);

@ -15,7 +15,7 @@
} }
span { span {
position: absolute; position: absolute;
width: 40%; width: 100%;
height: 3px; height: 3px;
border-radius: 10px; border-radius: 10px;
background-color: #7dc241; background-color: #7dc241;
@ -26,12 +26,15 @@
&--more { &--more {
cursor: pointer; cursor: pointer;
text-decoration: none;
padding-left: 20px;
span { span {
color: #7dc241; color: #7dc241;
font-family: numeralMedium; font-family: numeralMedium;
padding-left: 3px;
} }
img { img {
width: 15px; width: 12px;
height: 12px; height: 12px;
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -78,10 +81,12 @@
} }
&--more { &--more {
text-decoration: none;
span { span {
font-size: calc(100vw / 35); font-size: calc(100vw / 35);
color: #7dc241; color: #7dc241;
font-family: numeralMedium; font-family: numeralMedium;
padding-left: 3px;
} }
img { img {
width: 15px; width: 15px;

@ -1,5 +1,8 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import music from "~/assets/images/music.jpg";
import video from "~/assets/images/film.jpg";
import moment from "jalali-moment";
import "./index.scss"; import "./index.scss";
@ -13,6 +16,13 @@ const fontSize = {
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90, a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90,
}, },
}; };
const colors = [
{ name: "علمی تخیلی", color: "red" },
{ name: "سیاسی", color: "blue" },
{ name: "تاریخی", color: "orange" },
{ name: "ورزشی", color: "yellow" },
];
export default class Simple extends Component { export default class Simple extends Component {
render() { render() {
const { height, data } = this.props; const { height, data } = this.props;
@ -26,36 +36,51 @@ export default class Simple extends Component {
}} }}
> >
<Link to={`/blogs/${data.id}`}> <Link to={`/blogs/${data.id}`}>
<img {data.type === "image" ? (
src={`https://dnvn.ir/api/v1/file/${data.fileId}`} <img
alt={data.title} src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
/> alt={data.title}
/>
) : null}
{data.type === "video" ? (
<img src={video} alt={data.title} />
) : null}
{data.type === "audio" ? (
<img src={music} alt={data.title} />
) : null}
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1> <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2> <h2 style={{ fontSize: fontSize.desktop.h2 }}>
{data.text.slice(0, 100)} ...
</h2>
<div className="slider-blog__footer d-flex mt-3"> <div className="slider-blog__footer d-flex mt-3">
<div className="d-flex"> <div className="d-flex">
{/* <img src={} /> */} {/* <img src={} /> */}
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<span style={{ fontSize: fontSize.desktop.span }}> <span style={{ fontSize: fontSize.desktop.span }}>
مطالعه کامل در {data.duration} مطالعه کامل در {data.duration} دقیقه
</span> </span>
<span style={{ fontSize: fontSize.desktop.span }}> <span style={{ fontSize: fontSize.desktop.span }}>
تاریخ انتشار {data.data} تاریخ انتشار {moment(data.createdAt).format("YYYY/MM/DD")}
</span> </span>
</div> </div>
</div> </div>
<Link style={{ fontSize: fontSize.desktop.a }} to={data.link}> <Link
{data.buttonText} style={{ fontSize: fontSize.desktop.a }}
to={`/blogs/${data.id}`}
>
ادامه مطلب
</Link> </Link>
</div> </div>
<span <span
className="slider-blog__category" className="slider-blog__category"
style={{ style={{
backgroundColor: data.category.color, backgroundColor: colors.filter(
(item) => item.name === data.tag
)[0].color,
fontSize: fontSize.desktop.span, fontSize: fontSize.desktop.span,
}} }}
> >
{data.category.name} {data.tag}
</span> </span>
</Link> </Link>
</article> </article>
@ -67,25 +92,38 @@ export default class Simple extends Component {
height: height, height: height,
}} }}
> >
<Link to={data.link}> <Link to={`/blogs/${data.id}`}>
<img src={data.image} alt={data.title} /> {data.type === "image" ? (
<img
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
alt={data.title}
/>
) : null}
{data.type === "video" ? (
<img src={video} alt={data.title} />
) : null}
{data.type === "audio" ? (
<img src={music} alt={data.title} />
) : null}
<h1>{data.title}</h1> <h1>{data.title}</h1>
<h2>{data.subTitle}</h2> <h2>{data.text.slice(0, 100)}...</h2>
<div className="mobile-slider-blog__footer d-flex mt-3"> <div className="mobile-slider-blog__footer d-flex mt-3">
<div className="d-flex"> <div className="d-flex">
{/* <img src={} /> */} {/* <img src={} /> */}
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<span>مطالعه کامل در {data.duration}</span> <span>مطالعه کامل در {data.duration} دقیقه</span>
<span>تاریخ انتشار {data.data}</span> <span>
تاریخ انتشار {moment(data.createdAt).format("YYYY/MM/DD")}
</span>
</div> </div>
</div> </div>
<Link to={data.link}>{data.buttonText}</Link> <Link to={`/blogs/${data.id}`}>{data.buttonText}</Link>
</div> </div>
<span <span
className="mobile-slider-blog__category" className="mobile-slider-blog__category"
style={{ backgroundColor: data.category.color }} // style={{ backgroundColor: data.category.color }}
> >
{data.category.name} {data.tag}
</span> </span>
</Link> </Link>
</article> </article>

@ -1,4 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom";
import Carousel from "react-elastic-carousel"; import Carousel from "react-elastic-carousel";
import Simple from "./Simple/index"; import Simple from "./Simple/index";
import Header from "./Header/index"; import Header from "./Header/index";
@ -12,7 +13,7 @@ const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75, span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
}, },
}; };
@ -26,10 +27,13 @@ const SimpleHeader = (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>
<div className="home-scroll__header--more d-flex"> <Link
<span style={{ fontSize: fontSize.desktop.h1 }}>ادامه لیست</span> to={props.link}
className="home-scroll__header--more d-flex align-items-center"
>
<span style={{ fontSize: fontSize.desktop.h1 }}>بیشتر</span>
<img src={dropdown} alt="فلش" /> <img src={dropdown} alt="فلش" />
</div> </Link>
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
@ -38,10 +42,13 @@ const SimpleHeader = (props) => {
<h1>{props.title}</h1> <h1>{props.title}</h1>
<span></span> <span></span>
</div> </div>
<div className="mobile-home-scroll__header--more d-flex"> <Link
<span>ادامه لیست</span> to={props.link}
className="mobile-home-scroll__header--more d-flex align-items-center"
>
<span>بیشتر</span>
<img src={dropdown} alt="فلش" /> <img src={dropdown} alt="فلش" />
</div> </Link>
</div> </div>
) : null} ) : null}
</> </>
@ -57,10 +64,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>
<div className="home-scroll__header--more d-flex"> <Link
<span style={{ fontSize: fontSize.desktop.h1 }}>ادامه لیست</span> to={props.link}
className="home-scroll__header--more d-flex align-items-center"
>
<span style={{ fontSize: fontSize.desktop.h1 }}>بیشتر</span>
<img src={dropdown} alt="فلش" /> <img src={dropdown} alt="فلش" />
</div> </Link>
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
@ -69,8 +79,8 @@ 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"> <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>
@ -81,13 +91,13 @@ const TabHeader = (props) => {
export default class HomeSlider extends Component { export default class HomeSlider extends Component {
render() { render() {
const { data, title, height, designType, number } = this.props; const { data, title, height, designType, number, link } = this.props;
let header; let header;
if (title) { if (title) {
if (designType === "simple" || designType === "blog") { if (designType === "simple" || designType === "blog") {
header = <SimpleHeader title={title} />; header = <SimpleHeader title={title} link={link} />;
} else if (designType === "tab") { } else if (designType === "tab") {
header = <TabHeader title={title} />; header = <TabHeader title={title} link={link} />;
} }
} }
return ( return (

@ -8,9 +8,11 @@ const useStyles = makeStyles((theme) => ({
width: "200px", width: "200px",
position: "relative", position: "relative",
marginRight: 30, marginRight: 30,
fontFamily: "numeralLight",
}, },
input: { input: {
border: "0px", border: "0px",
fontFamily: "numeralLight",
}, },
}, },
})); }));

@ -33,6 +33,11 @@
.MuiOutlinedInput-input { .MuiOutlinedInput-input {
padding: 20px 14px !important; padding: 20px 14px !important;
font-family: numeralLight !important;
color: #4e4e4e !important;
&:focus {
outline: none !important;
}
} }
.MuiInputLabel-outlined { .MuiInputLabel-outlined {
font-family: numeralLight !important; font-family: numeralLight !important;

@ -1,23 +1,23 @@
.single-blog{ .single-blog {
width: 100%; width: 100%;
margin: 75px 0px; margin: 75px 0px;
&__right{ &__right {
width: 50%; width: 50%;
height: 100%; height: 100%;
align-items: flex-start; align-items: flex-start;
padding-left: 15%; padding-left: 40px;
h1{ h1 {
font-family: numeralBold; font-family: numeralBold;
color: #1bbc6e; color: #1bbc6e;
text-align: justify; text-align: justify;
} }
p{ p {
font-family: numeralLight; font-family: numeralLight;
text-align: justify; text-align: justify;
margin-top: 15px; margin-top: 15px;
color: #a5a5a5; color: #a5a5a5;
} }
a{ a {
font-family: numeralMedium; font-family: numeralMedium;
align-self: flex-end; align-self: flex-end;
padding: 8px 12px; padding: 8px 12px;
@ -26,18 +26,18 @@
border-radius: 5px; border-radius: 5px;
border: 1px solid #1bbc6e; border: 1px solid #1bbc6e;
margin-top: 20px; margin-top: 20px;
&:hover{ &:hover {
color: #1bbc6e; color: #1bbc6e;
} }
} }
} }
&__left{ &__left {
width: 50%; width: 50%;
height: 100%; height: 100%;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 20px; border-radius: 20px;
} }
} }
} }

@ -120,23 +120,28 @@ const Identifier = (props) => {
/> />
) : null} ) : null}
{props.item.type === "scroll" ? ( {props.item.type === "scroll" ? (
<HomeScroll props.item.data.length > 0 ? (
number={props.item.number} <HomeScroll
height={props.item.height} number={props.item.number}
title={props.item.title} height={props.item.height}
data={props.item.data} title={props.item.title}
designType={props.item.design} data={props.item.data}
moreText={props.item.moreText} designType={props.item.design}
/> moreText={props.item.moreText}
/>
) : null
) : null} ) : null}
{props.item.type === "slider" ? ( {props.item.type === "slider" ? (
<HomeSlider props.item.data.length > 0 ? (
designType={props.item.design} <HomeSlider
number={props.item.number} designType={props.item.design}
height={props.item.height} number={props.item.number}
title={props.item.title} height={props.item.height}
data={props.item.data} title={props.item.title}
/> data={props.item.data}
link={props.item.link}
/>
) : null
) : null} ) : null}
{props.item.type === "search" && window.innerWidth > 1000 ? ( {props.item.type === "search" && window.innerWidth > 1000 ? (
<HomeSearch height={props.item.height} data={props.item.data} /> <HomeSearch height={props.item.height} data={props.item.data} />

Loading…
Cancel
Save