parent
948de6f627
commit
e399caa05b
11 changed files with 323 additions and 35 deletions
@ -0,0 +1,27 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
import './index.scss'; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
const maxMobileSize = 550; |
||||
|
||||
const fontSize = { |
||||
desktop : { |
||||
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, |
||||
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85, |
||||
} |
||||
} |
||||
const Replay = (props) => { |
||||
return( |
||||
<> |
||||
{window.innerWidth > 1000 ? |
||||
<div className="reply d-flex flex-column justify-content-center"> |
||||
<strong style={{ fontSize: fontSize.desktop.strong }}>پاسخ مدیریت سایت</strong> |
||||
<p style={{ fontSize: fontSize.desktop.p }}>{props.reply}</p> |
||||
</div> : null |
||||
} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default Replay; |
||||
@ -0,0 +1,15 @@ |
||||
.reply{ |
||||
width: 100%; |
||||
padding-right: 10px; |
||||
border-right: 4px solid #02733c; |
||||
strong{ |
||||
font-family: numeralMedium; |
||||
color: #02733C; |
||||
} |
||||
p{ |
||||
font-family: numeralLight; |
||||
color: #02733C; |
||||
margin: 0px; |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
@ -0,0 +1,68 @@ |
||||
import React, {useState} from 'react'; |
||||
import Carousel from 'react-elastic-carousel'; |
||||
import Video from '../../../QR/VideoBox/React-video-js-player/index'; |
||||
import exit from '../../../../assets/icons/exit.svg'; |
||||
|
||||
import './index.scss'; |
||||
const Modal = (props) => { |
||||
const [displayed, setDisplayed] = useState(props.first ? props.first : props.gallery[0]) |
||||
const {gallery, setModal} = props; |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ? |
||||
<section className="modal d-flex flex-column align-items-center justify-content-center"> |
||||
<img className="modal__exit" src={exit} alt="خروح" onClick={() => setModal(null)} /> |
||||
<div className="modal__display"> |
||||
{ |
||||
displayed.type === 'image' ? |
||||
<img src={displayed.value} alt="عکس" /> : null |
||||
} |
||||
{ |
||||
displayed.type === 'film' ? |
||||
<Video /> : null |
||||
} |
||||
</div> |
||||
<footer className="modal__footer d-flex"> |
||||
<Carousel |
||||
itemsToShow={4} |
||||
isRTL={true} |
||||
enableTilt={false} |
||||
showArrows={true} |
||||
pagination={false} |
||||
> |
||||
{gallery.map((item, i) => ( |
||||
<Item |
||||
data={item} |
||||
key={i} |
||||
setDisplayed={setDisplayed} |
||||
active={item === displayed} |
||||
/> |
||||
))} |
||||
</Carousel> |
||||
</footer> |
||||
</section> : null |
||||
} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default Modal; |
||||
|
||||
const Item = (props) => { |
||||
return( |
||||
<div className="modal-carousel-item"> |
||||
{ |
||||
props.data.type === 'image' ? |
||||
<img src={props.data.value} alt="عکس" /> : null |
||||
} |
||||
{ |
||||
props.data.type === 'film' ? |
||||
<Video /> : null |
||||
} |
||||
<div style={{ border: props.active ? '4px solid #1BBC6E' : '' }} className="modal-carousel-item__cover" onClick={() => props.setDisplayed(props.data)}> |
||||
|
||||
</div> |
||||
</div> |
||||
); |
||||
}
|
||||
@ -0,0 +1,67 @@ |
||||
.modal{ |
||||
width: 100vw; |
||||
height : 100vh; |
||||
position: fixed; |
||||
top: 0px; |
||||
left: 0px; |
||||
background-color: rgba(0, 0, 0, 0.89); |
||||
&__exit{ |
||||
position: fixed; |
||||
right: 30px; |
||||
top: 30px; |
||||
z-index: 400; |
||||
cursor: pointer; |
||||
} |
||||
&__display{ |
||||
width: 100%; |
||||
max-width: 900px; |
||||
height: 70vh; |
||||
max-height: 600px; |
||||
min-height: 500px; |
||||
& img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: contain; |
||||
} |
||||
} |
||||
&__footer{ |
||||
width: 100%; |
||||
max-width: 650px; |
||||
margin-top: 40px; |
||||
position: relative; |
||||
.rec-arrow-left{ |
||||
position: absolute; |
||||
right: -30px; |
||||
} |
||||
.rec-arrow-right{ |
||||
position: absolute; |
||||
left: -30px; |
||||
} |
||||
.modal-carousel-item{ |
||||
width: 100px; |
||||
height: 100px; |
||||
position: relative; |
||||
border-radius: 20px; |
||||
z-index: 100; |
||||
|
||||
.video-js{ |
||||
z-index: 100; |
||||
} |
||||
& img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 20px; |
||||
} |
||||
&__cover{ |
||||
position: absolute; |
||||
left: 0px; |
||||
top: 0px; |
||||
z-index: 800; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 20px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -1,22 +1,87 @@ |
||||
import React, { Component } from 'react'; |
||||
import React, { Component, useState } from 'react'; |
||||
import MoreHorizIcon from '@material-ui/icons/MoreHoriz'; |
||||
import Video from '../../QR/VideoBox/React-video-js-player/index'; |
||||
import Modal from './Modal/index'; |
||||
|
||||
import './index.scss'; |
||||
export default function Gallery(props) { |
||||
const [selectedMedia,setSelectedMedia] = useState(props.gallery[1]); |
||||
const [modal, setModal] = useState(null); |
||||
|
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ?
|
||||
<section className="product-gallery d-flex flex-column"> |
||||
<div className="product-gallery__top"> |
||||
|
||||
{ |
||||
selectedMedia ?
|
||||
<> |
||||
{ |
||||
selectedMedia.type === 'image' ? |
||||
<img src={selectedMedia.value} alt={'عکس'} /> : null |
||||
} |
||||
{ |
||||
selectedMedia.type === 'film' ? |
||||
<Video /> : null |
||||
} |
||||
</> : null |
||||
} |
||||
</div> |
||||
<div className="product-gallery__list d-flex"> |
||||
<div></div> |
||||
<div></div> |
||||
<div></div> |
||||
{ |
||||
props.gallery.length > 3 ? |
||||
<> |
||||
<Item item={props.gallery[0]} key={props.gallery[0].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} /> |
||||
<Item item={props.gallery[1]} key={props.gallery[1].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} /> |
||||
<Item item={props.gallery[2]} key={props.gallery[2].id} more={true} setSelectedMedia={setSelectedMedia} setModal={setModal} /> |
||||
</> : |
||||
<> |
||||
{ |
||||
props.gallery.map((item, i) => ( |
||||
<Item item={item} key={item.id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} /> |
||||
)) |
||||
} |
||||
</> |
||||
} |
||||
</div> |
||||
{ |
||||
modal ? |
||||
<Modal first={modal} gallery={props.gallery} setModal={setModal} /> : null |
||||
} |
||||
</section> : null |
||||
} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
const {item, more, setSelectedMedia, setModal} = props; |
||||
return( |
||||
<> |
||||
{ |
||||
window.innerWidth > 1000 ? |
||||
<div className="product-gallery-item d-flex"> |
||||
{ |
||||
item.type === 'image' ? |
||||
<img src={item.value} alt={'عکس'} /> : null |
||||
} |
||||
{ |
||||
item.type === 'film' ? |
||||
<Video /> : null |
||||
} |
||||
{ |
||||
!more ? |
||||
<div className="product-gallery-item__cover" onClick={() => setSelectedMedia(item)}> |
||||
|
||||
</div> : |
||||
<div className="product-gallery-item__cover product-gallery-item__more d-flex justify-content-center align-items-center" onClick={() => setModal(item)}> |
||||
<MoreHorizIcon style={{ fontSize: 60, color: 'white'}} /> |
||||
</div> |
||||
} |
||||
</div> : null |
||||
} |
||||
</> |
||||
|
||||
); |
||||
} |
||||
Loading…
Reference in new issue