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

reza added some thing

Browse Source
master
RezaAshrafi77 3 years ago
parent 4be4ab6cdb
commit 3d391f7497
30 changed files with 359 additions and 174 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      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. 18
      src/views/Home/SingleBlog/index.scss
  30. 35
      src/views/Home/index.js

44
public/index.html
Unescape View File

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

4
public/manifest.json
Unescape View File

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

8
src/AppRouter.js
Unescape View File

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

26
src/Redux/actions/activation.js
Unescape View File

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

1
src/Redux/actions/index.js
Unescape View File

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

8
src/Redux/actions/transport.js
Unescape View File

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

27
src/Redux/reducers/activation.js
Unescape View File

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

1
src/Redux/reducers/index.js
Unescape View File

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

4
src/Redux/reducers/transport.js
Unescape View File

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

BIN
src/assets/images/film.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
src/assets/images/music.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

23
src/views/Activation/index.js
Unescape View File

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

6
src/views/Auth/Login/Cellphone/index.scss
Unescape View File

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

1
src/views/Auth/Login/Code/index.scss
Unescape View File

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

4
src/views/Auth/Login/index.js
Unescape View File

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

2
src/views/Blogs/BreadCrumb/index.js
Unescape View File

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

4
src/views/Blogs/BreadCrumb/index.scss
Unescape View File

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

28
src/views/Blogs/index.js
Unescape View File

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

22
src/views/Blogs/index.scss
Unescape View File

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

111
src/views/Cart/DeliveryMethod/index.js
Unescape View File

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

1
src/views/Cart/Discount/index.js
Unescape View File

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

3
src/views/Cart/Table/index.js
Unescape View File

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

16
src/views/Cart/index.js
Unescape View File

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

9
src/views/Home/HomeScroll/index.scss
Unescape View File

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

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

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

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

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

2
src/views/Home/Membership/Input/index.js
Unescape View File

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

5
src/views/Home/Membership/index.scss
Unescape View File

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

18
src/views/Home/SingleBlog/index.scss
Unescape View File

@ -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,15 +26,15 @@
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;

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

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

Write Preview
Loading…
Cancel
Save