diff --git a/src/AppRouter.js b/src/AppRouter.js
index c90b746..0cb14e9 100644
--- a/src/AppRouter.js
+++ b/src/AppRouter.js
@@ -28,6 +28,8 @@ import AR from "./views/AR/index";
import Support from "./views/Support/index";
import Callback from "./views/Callback/index";
import NewProfile from "./views/NewProfile/index";
+import Blogs from "./views/Blogs/index";
+import Blog from "./views/Blog/index";
class AppRouter extends Component {
constructor(props) {
@@ -62,7 +64,7 @@ class AppRouter extends Component {
{home}
{mobile ? (
- window.innerWiproxy.status() ? (
+ proxy.status() ? (
) : (
+
+
+
+
+
+
@@ -123,7 +131,6 @@ class AppRouter extends Component {
-
diff --git a/src/Redux/actions/public.js b/src/Redux/actions/public.js
index 3ade7e8..42b44e3 100644
--- a/src/Redux/actions/public.js
+++ b/src/Redux/actions/public.js
@@ -14,6 +14,10 @@ const publicApi = {
await proxy.get("public/contact", data, { history, dispatch }),
getArList: (data, history) => async (dispatch) =>
await proxy.get("public/ar", data, { history, dispatch }),
+ getBlogList: (data, history) => async (dispatch) =>
+ await proxy.get("public/blogList", data, { history, dispatch }),
+ getBlogInfo: (data, history) => async (dispatch) =>
+ await proxy.get("public/blogInfo", data, { history, dispatch }),
};
export default publicApi;
diff --git a/src/Redux/reducers/public.js b/src/Redux/reducers/public.js
index fdccc5a..75ed003 100644
--- a/src/Redux/reducers/public.js
+++ b/src/Redux/reducers/public.js
@@ -6,6 +6,8 @@ const initialState = {
searchResult: [],
contactData: null,
arList: [],
+ blogList: [],
+ blog: null,
};
export default function publicApi(state = initialState, action) {
let { type, data } = action;
@@ -41,6 +43,10 @@ export default function publicApi(state = initialState, action) {
return { ...state, loading: false, error: null, contactData: data };
case "public/ar":
return { ...state, loading: false, error: null, arList: data };
+ case "public/blogList":
+ return { ...state, loading: false, error: null, blogList: data };
+ case "public/blogInfo":
+ return { ...state, loading: false, error: null, blog: data };
case "loading":
return { ...state, loading: true };
case "error":
diff --git a/src/views/Blog/BreadCrumb/index.js b/src/views/Blog/BreadCrumb/index.js
new file mode 100644
index 0000000..32a062d
--- /dev/null
+++ b/src/views/Blog/BreadCrumb/index.js
@@ -0,0 +1,57 @@
+import React from "react";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from "react-router-dom";
+
+import "./index.scss";
+
+function handleClick(event) {
+ event.preventDefault();
+ console.info("You clicked a breadcrumb.");
+}
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 650;
+
+const fontSize = {
+ desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+ mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
+};
+
+export default function ActiveLastBreadcrumb(props) {
+ const { name } = props;
+ return (
+
+ 1000 ? fontSize.desktop : fontSize.mobile,
+ }}
+ to={"/"}
+ >
+ صفحه اصلی
+
+ 1000 ? fontSize.desktop : fontSize.mobile,
+ }}
+ to={"/blogs"}
+ >
+ وبلاگ
+
+ 1000 ? fontSize.desktop : fontSize.mobile,
+ color: "#00CC69",
+ }}
+ to={`/blogs/${window.location.pathname.slice(
+ window.location.pathname.lastIndexOf("/") + 1,
+ window.location.pathname.length
+ )}`}
+ >
+ {name}
+
+
+ );
+}
diff --git a/src/views/Blog/BreadCrumb/index.scss b/src/views/Blog/BreadCrumb/index.scss
new file mode 100644
index 0000000..e10f243
--- /dev/null
+++ b/src/views/Blog/BreadCrumb/index.scss
@@ -0,0 +1,8 @@
+.MuiBreadcrumbs-li{
+ a {
+ text-decoration: none;
+ font-family: numeralLight;
+ color: #6F7074;
+ letter-spacing: -1px;
+ }
+}
diff --git a/src/views/Blog/index.js b/src/views/Blog/index.js
new file mode 100644
index 0000000..2bb9171
--- /dev/null
+++ b/src/views/Blog/index.js
@@ -0,0 +1,143 @@
+import React, { Component, Fragment } from "react";
+import Loader from "~/components/Loader/index";
+import Footer from "../Home/Footer/index";
+import Navbar from "../Home/Navbar/index";
+import BreadCrumb from "./BreadCrumb/index";
+import Image from "../QR/Image/index";
+import VideoBox from "../QR/VideoBox/index";
+import VoiceBox from "../QR/VoiceBox/index";
+
+import { connect } from "react-redux";
+import { publicApi } from "~/Redux/actions";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+class Blog extends Component {
+ componentDidMount() {
+ this.props.getBlogInfo({
+ id: window.location.pathname.slice(
+ window.location.pathname.lastIndexOf("/") + 1,
+ window.location.pathname.length
+ ),
+ });
+ }
+
+ render() {
+ const fontSize = {
+ desktop: {
+ sidebar: {
+ h1: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
+ h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
+ div:
+ window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
+ },
+ content: {
+ h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
+ p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
+ h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
+ },
+ },
+ };
+ const { blog } = this.props;
+ return (
+ <>
+ {window.innerWidth > 1000 ? (
+ <>
+ {blog ? (
+
+
+
+
+
+
+
+
+ {blog.text}
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+ >
+ ) : null}
+ {window.innerWidth < 1000 ? (
+ blog ? (
+
+
+
+
+
+
{blog.title}
+
+
+
{blog.subTitle}
+
{blog.date}
+
+
+
+
+ ) : (
+
+
+
+ )
+ ) : null}
+ >
+ );
+ }
+}
+
+export default connect(
+ (state) => ({
+ blog: state.publicApi.blog,
+ }),
+ { getBlogInfo: publicApi.getBlogInfo }
+)(Blog);
+
+const Identifier = (props) => {
+ const { data } = props;
+ console.log(data);
+ return (
+ <>
+ {data.type === "audio" ? (
+
+ ) : null}
+ {data.type === "video" ? (
+
+ ) : null}
+ {data.type === "image" ? (
+
+ ) : null}
+ >
+ );
+};
diff --git a/src/views/Blog/index.scss b/src/views/Blog/index.scss
new file mode 100644
index 0000000..d9c219d
--- /dev/null
+++ b/src/views/Blog/index.scss
@@ -0,0 +1,129 @@
+.portrait-blog {
+ width: 100vw;
+ // height: 100vh;
+ padding: 0px 10px;
+ position: relative;
+ &__header {
+ direction: rtl;
+ width: 100%;
+ margin-top: 80px;
+ &--top {
+ width: 100%;
+ text-align: right;
+ align-items: center;
+ margin-top: 20px;
+ h1 {
+ font-size: 24px;
+ // color : $dusk;
+ margin-bottom: 10px;
+ letter-spacing: -2px;
+ }
+ }
+ &--bottom {
+ align-items: center;
+ direction: rtl;
+ width: 100%;
+ justify-content: space-between;
+ h2 {
+ font-size: 14px;
+ // color : $dusk;
+ margin-bottom: 5px;
+ letter-spacing: -1px;
+ }
+ & div {
+ font-size: 14px;
+ // color : $dusk;
+ margin-bottom: 0px;
+ letter-spacing: -1px;
+ font-family: IRANSansNumeral;
+ }
+ }
+ }
+ &__body {
+ width: 100%;
+ margin-top: 15px;
+ &--image {
+ width: 100%;
+ & img {
+ width: 100%;
+ height: 100%;
+ border-radius: 10px;
+ }
+ }
+ &--text {
+ margin-top: 10px;
+ width: 100%;
+ direction: rtl;
+ text-align: justify !important;
+ // color: $dusk;
+ color: #4e4e4e;
+ font-size: 14px;
+ letter-spacing: -1px;
+ font-family: numeralLight;
+ }
+ }
+}
+
+.landscape-blog {
+ width: 100vw;
+ padding: 0px 10px;
+ position: relative;
+ text-align: right;
+ max-width: 1250px;
+ margin: 0px auto;
+ &__header {
+ direction: rtl;
+ width: 100%;
+ margin-top: 100px;
+ max-width: 800px;
+ &--top {
+ width: 100%;
+ text-align: right;
+ align-items: center;
+ margin-top: 20px;
+ h1 {
+ font-size: 28px;
+ // color : $dusk;
+ margin-bottom: 10px;
+ letter-spacing: -1px;
+ }
+ }
+ &--bottom {
+ align-items: center;
+ direction: rtl;
+ width: 100%;
+ justify-content: space-between;
+ h2 {
+ font-size: 14px;
+ // color : $dusk;
+ margin-bottom: 5px;
+ letter-spacing: -1px;
+ }
+ & div {
+ font-size: 16px;
+ // color : $dusk;
+ margin-bottom: 5px;
+ letter-spacing: -1px;
+ font-family: IRANSansNumeral;
+ }
+ }
+ }
+ &__body {
+ width: 100%;
+ &--image {
+ width: 100%;
+ max-height: 300px;
+ }
+ &--text {
+ margin-top: 40px;
+ width: 100%;
+ direction: rtl;
+ text-align: justify;
+ // color: $dusk;
+ color: #4e4e4e;
+ font-size: 18px;
+ letter-spacing: -1px;
+ font-family: numeralLight;
+ }
+ }
+}
diff --git a/src/views/Blogs/BreadCrumb/index.js b/src/views/Blogs/BreadCrumb/index.js
new file mode 100644
index 0000000..89b35db
--- /dev/null
+++ b/src/views/Blogs/BreadCrumb/index.js
@@ -0,0 +1,46 @@
+import React from "react";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from "react-router-dom";
+
+import "./index.scss";
+
+function handleClick(event) {
+ event.preventDefault();
+ console.info("You clicked a breadcrumb.");
+}
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 650;
+
+const fontSize = {
+ desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+ mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
+};
+
+export default function ActiveLastBreadcrumb() {
+ return (
+
+ 1000 ? fontSize.desktop : fontSize.mobile,
+ }}
+ // onClick={handleClick}
+ >
+ صفحه اصلی
+
+ 1000 ? fontSize.desktop : fontSize.mobile,
+ color: "#00CC69",
+ }}
+ // onClick={handleClick}
+ >
+ وبلاگ
+
+
+ );
+}
diff --git a/src/views/Blogs/BreadCrumb/index.scss b/src/views/Blogs/BreadCrumb/index.scss
new file mode 100644
index 0000000..e10f243
--- /dev/null
+++ b/src/views/Blogs/BreadCrumb/index.scss
@@ -0,0 +1,8 @@
+.MuiBreadcrumbs-li{
+ a {
+ text-decoration: none;
+ font-family: numeralLight;
+ color: #6F7074;
+ letter-spacing: -1px;
+ }
+}
diff --git a/src/views/Blogs/index.js b/src/views/Blogs/index.js
index 5d61da7..c7f8c0e 100644
--- a/src/views/Blogs/index.js
+++ b/src/views/Blogs/index.js
@@ -1,40 +1,67 @@
import React, { Component } from "react";
+import { Link } from "react-router-dom";
import { connect } from "react-redux";
+import { publicApi } from "~/Redux/actions";
+
+import Navbar from "../Home/Navbar";
+import Footer from "../Home/Footer";
+import BreadCrumb from "./BreadCrumb/index";
+import Loader from "~/components/Loader/index";
import "./index.scss";
+
class Blogs extends Component {
componentDidMount() {
- // this.props.contentList(1, 100, CONTENT_LIST_3);
+ this.props.getBlogList();
}
-
render() {
- const { blogs } = this.props;
+ const { list } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
-
-
-
-
اخبار
-
-
- {blogs.map((item) => (
-
- ))}
-
-
+ <>
+ {list.length > 0 ? (
+
+
+
+
+ {list.map((item) => (
+
+ ))}
+
+
+ ) : (
+
+
+
+ )}
+
+
+ >
) : null}
{window.innerWidth < 1000 ? (
-
-
-
اخبار
-
-
- {blogs.map((item) => (
-
- ))}
-
+ {list.length > 0 ? (
+ <>
+
+
+
+ {list.map((item) => (
+
+ ))}
+
+ >
+ ) : (
+
+
+
+ )}
) : null}
>
@@ -42,9 +69,42 @@ class Blogs extends Component {
}
}
+const Item = (props) => {
+ const { item } = props;
+ return (
+ <>
+ {window.innerWidth > 1000 ? (
+
+
+
+
+
+
{item.title}
+ مطالعه کامل
+
+
+ ) : null}
+ {window.innerWidth < 1000 ? (
+
+
+ {item.title}
+ {/* {item.text}
*/}
+ مطالعه کامل
+
+ ) : null}
+ >
+ );
+};
+
export default connect(
(state) => ({
- all: state.content.all,
+ list: state.publicApi.blogList,
}),
- {}
+ { getBlogList: publicApi.getBlogList }
)(Blogs);
diff --git a/src/views/Blogs/index.scss b/src/views/Blogs/index.scss
index bc27d8c..378eb29 100644
--- a/src/views/Blogs/index.scss
+++ b/src/views/Blogs/index.scss
@@ -26,11 +26,59 @@
width: 0px;
}
}
+ &-item {
+ width: calc(100% - 8px);
+ height: 200px;
+ max-width: 800px;
+ max-height: 300px;
+ padding: 10px 10px 10px;
+ direction: rtl;
+ text-align: right;
+ box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
+ border-radius: 8px;
+ position: relative;
+ margin: 20px auto 0px;
+ transform: translateY(-10px);
+ text-decoration: none;
+ &__pic {
+ width: 300px;
+ height: 100%;
+ & img {
+ width: 100%;
+ height: 100%;
+ border-radius: 10px;
+ }
+ }
+ &__left {
+ margin-right: 20px;
+ padding-top: 20px;
+ justify-content: flex-start;
+ h1 {
+ padding-right: 2px;
+ font-size: 28px;
+ margin-bottom: 0px;
+ letter-spacing: -2px;
+ color: #4e4e4e;
+ font-family: numeralLight;
+ text-decoration: none;
+ }
+ span {
+ font-family: numeralLight;
+ position: absolute;
+ font-size: 15px;
+ bottom: 10px;
+ left: 10px;
+ margin-bottom: 0px;
+ border-radius: 10px;
+ color: #6cbe44;
+ }
+ }
+ }
}
.portrait-blogs {
width: 100vw;
- padding: 90px 10px 10px;
+ padding: 70px 10px 10px;
max-width: 680px;
margin: 0px auto;
direction: rtl;
@@ -44,7 +92,7 @@
margin-bottom: 20px;
letter-spacing: -1px;
margin-right: 10px;
- color: $bright-cerulean;
+ // color: $bright-cerulean;
}
}
&__scroll {
@@ -56,4 +104,41 @@
width: 0px;
}
}
+ &-item {
+ font-family: numeralLight;
+ text-decoration: none;
+ width: calc(100% - 8px);
+ padding: 10px 10px 10px;
+ direction: rtl;
+ text-align: right;
+ box-shadow: 0 3px 8px 0 rgb(0 0 0 / 16%);
+ border-radius: 8px;
+ position: relative;
+ margin: 20px 4px 0px;
+ transform: translateY(-10px);
+ height: 330px;
+ & img {
+ width: 100%;
+ height: 220px;
+ border-radius: 10px;
+ }
+ h1 {
+ padding-right: 2px;
+ font-size: 28px;
+ margin-bottom: 0px;
+ margin-top: 10px;
+ // color: $smalt;
+ text-decoration: none;
+ color: #4e4e4e;
+ }
+ span {
+ position: absolute;
+ font-size: 18px;
+ bottom: 5px;
+ left: 10px;
+ margin-bottom: 0px;
+ border-radius: 10px;
+ color: #6cbe44;
+ }
+ }
}
diff --git a/src/views/QR/VideoBox/React-video-js-player/index.js b/src/views/QR/VideoBox/React-video-js-player/index.js
index 3583ef8..86d09d6 100644
--- a/src/views/QR/VideoBox/React-video-js-player/index.js
+++ b/src/views/QR/VideoBox/React-video-js-player/index.js
@@ -43,18 +43,7 @@ class VideoApp extends Component {
render() {
return (
//
-
+
//
);
}
diff --git a/src/views/QR/VoiceBox/Material-audio-player/index.js b/src/views/QR/VoiceBox/Material-audio-player/index.js
index 2962d52..37e7957 100644
--- a/src/views/QR/VoiceBox/Material-audio-player/index.js
+++ b/src/views/QR/VoiceBox/Material-audio-player/index.js
@@ -3,11 +3,6 @@ import AudioPlayer from "material-ui-audio-player";
const muiTheme = createMuiTheme({});
-const src = [
- "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
- "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
-];
-
export default function MaterialAudioPlayer(props) {
return (
@@ -21,7 +16,7 @@ export default function MaterialAudioPlayer(props) {
order="standart"
preload="auto"
loop={false}
- src={src}
+ src={"https://dnvn.ir/api/v1/file/" + props.data}
/>
);
diff --git a/src/views/QR/VoiceBox/index.js b/src/views/QR/VoiceBox/index.js
index cbb3fb6..79b3f39 100644
--- a/src/views/QR/VoiceBox/index.js
+++ b/src/views/QR/VoiceBox/index.js
@@ -1,10 +1,9 @@
import React from "react";
-import MaterialAudioPlayer from './Material-audio-player/index';
+import MaterialAudioPlayer from "./Material-audio-player/index";
import "./index.scss";
-
-
export default function VoiceBox(props) {
+ const { data } = props;
return (
<>
{window.innerWidth > 1000 ? (
@@ -14,9 +13,9 @@ export default function VoiceBox(props) {
className="d-flex align-items-center"
>
- {props.data.title}
+ {data.title}
-
+
) : null}
{window.innerWidth < 1000 ? (
@@ -25,9 +24,7 @@ export default function VoiceBox(props) {
{props.data.title}
-
-
-
+
) : null}
>