parent
ed1bd15f99
commit
d481fdd9da
14 changed files with 589 additions and 55 deletions
@ -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 ( |
||||
<Breadcrumbs aria-label="breadcrumb"> |
||||
<Link |
||||
style={{ |
||||
fontSize: |
||||
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||
}} |
||||
to={"/"} |
||||
> |
||||
صفحه اصلی |
||||
</Link> |
||||
<Link |
||||
style={{ |
||||
fontSize: |
||||
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||
}} |
||||
to={"/blogs"} |
||||
> |
||||
وبلاگ |
||||
</Link> |
||||
<Link |
||||
style={{ |
||||
fontSize: |
||||
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||
color: "#00CC69", |
||||
}} |
||||
to={`/blogs/${window.location.pathname.slice( |
||||
window.location.pathname.lastIndexOf("/") + 1, |
||||
window.location.pathname.length |
||||
)}`}
|
||||
> |
||||
{name} |
||||
</Link> |
||||
</Breadcrumbs> |
||||
); |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
.MuiBreadcrumbs-li{ |
||||
a { |
||||
text-decoration: none; |
||||
font-family: numeralLight; |
||||
color: #6F7074; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
@ -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 ? ( |
||||
<div className="landscape-blog d-flex flex-column"> |
||||
<Navbar /> |
||||
<div className="landscape-blog__header d-flex flex-column"> |
||||
<BreadCrumb name={blog.title} /> |
||||
<div className="landscape-blog__header--top d-flex"> |
||||
<h1>{blog.title}</h1> |
||||
</div> |
||||
<div className="landscape-blog__header--bottom d-flex"> |
||||
<h2></h2> |
||||
<div>{blog.date}</div> |
||||
</div> |
||||
</div> |
||||
<div className="landscape-blog__body d-flex flex-column"> |
||||
<div className="landscape-blog__body--image d-flex"> |
||||
<Identifier data={blog} fontSize={fontSize} /> |
||||
</div> |
||||
<p className="landscape-blog__body--text d-flex"> |
||||
{blog.text} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
) : ( |
||||
<div |
||||
className="d-flex justify-content-center align-items-center" |
||||
style={{ height: "100vh", width: "100vw" }} |
||||
> |
||||
<Loader /> |
||||
</div> |
||||
)} |
||||
|
||||
<Footer /> |
||||
</> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
blog ? ( |
||||
<div className="portrait-blog d-flex flex-column"> |
||||
<Navbar /> |
||||
<div className="portrait-blog__header d-flex flex-column"> |
||||
<BreadCrumb name={blog.title} /> |
||||
<div className="portrait-blog__header--top d-flex"> |
||||
<h1>{blog.title}</h1> |
||||
</div> |
||||
<div className="portrait-blog__header--bottom d-flex"> |
||||
<h2>{blog.subTitle}</h2> |
||||
<div>{blog.date}</div> |
||||
</div> |
||||
</div> |
||||
<div className="portrait-blog__body d-flex flex-column"> |
||||
<div className="portrait-blog__body--image d-flex"> |
||||
<Identifier data={blog} /> |
||||
</div> |
||||
<p className="portrait-blog__body--text d-flex">{blog.text}</p> |
||||
</div> |
||||
</div> |
||||
) : ( |
||||
<div |
||||
className="d-flex justify-content-center align-items-center" |
||||
style={{ height: "100vh", width: "100vw" }} |
||||
> |
||||
<Loader /> |
||||
</div> |
||||
) |
||||
) : 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" ? ( |
||||
<VoiceBox fontSize={props.fontSize} data={data} /> |
||||
) : null} |
||||
{data.type === "video" ? ( |
||||
<VideoBox fontSize={props.fontSize} data={data} /> |
||||
) : null} |
||||
{data.type === "image" ? ( |
||||
<img |
||||
src={"https://dnvn.ir/api/v1/file/" + data.fileIds} |
||||
alt={data.fileIds} |
||||
/> |
||||
) : null} |
||||
</> |
||||
); |
||||
}; |
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
@ -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 ( |
||||
<Breadcrumbs aria-label="breadcrumb"> |
||||
<Link |
||||
to={"/"} |
||||
style={{ |
||||
fontSize: |
||||
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||
}} |
||||
// onClick={handleClick}
|
||||
> |
||||
صفحه اصلی |
||||
</Link> |
||||
<Link |
||||
to={"/blogs"} |
||||
style={{ |
||||
fontSize: |
||||
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||
color: "#00CC69", |
||||
}} |
||||
// onClick={handleClick}
|
||||
> |
||||
وبلاگ |
||||
</Link> |
||||
</Breadcrumbs> |
||||
); |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
.MuiBreadcrumbs-li{ |
||||
a { |
||||
text-decoration: none; |
||||
font-family: numeralLight; |
||||
color: #6F7074; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue