master
ravino 3 years ago
commit 183a97e0ad
  1. 7
      src/views/Product/Gallery/Modal/index.scss
  2. 12
      src/views/Product/Gallery/index.js

@ -4,7 +4,7 @@
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
background-color: rgba(0, 0, 0, 0.89); background-color: rgba(0, 0, 0, 0.973);
&__exit{ &__exit{
position: fixed; position: fixed;
right: 30px; right: 30px;
@ -17,7 +17,10 @@
max-width: 900px; max-width: 900px;
height: 70vh; height: 70vh;
max-height: 600px; max-height: 600px;
min-height: 500px; min-height: 300px;
border: 1px solid white;
margin-bottom: 10px;
border-radius: 20px;
& img{ & img{
width: 100%; width: 100%;
height: 100%; height: 100%;

@ -32,14 +32,14 @@ export default function Gallery(props) {
{ {
props.gallery.length > 3 ? props.gallery.length > 3 ?
<> <>
<Item item={props.gallery[0]} key={props.gallery[0].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} /> <Item active={selectedMedia === props.gallery[0]} 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 active={selectedMedia === props.gallery[1]} 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} /> <Item active={selectedMedia === props.gallery[2]} item={props.gallery[2]} key={props.gallery[2].id} more={true} setSelectedMedia={setSelectedMedia} setModal={setModal} />
</> : </> :
<> <>
{ {
props.gallery.map((item, i) => ( props.gallery.map((item, i) => (
<Item item={item} key={item.id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} /> <Item active={selectedMedia === item} item={item} key={item.id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
)) ))
} }
</> </>
@ -56,12 +56,12 @@ export default function Gallery(props) {
} }
const Item = (props) => { const Item = (props) => {
const {item, more, setSelectedMedia, setModal} = props; const {item, more, setSelectedMedia, setModal, active} = props;
return( return(
<> <>
{ {
window.innerWidth > 1000 ? window.innerWidth > 1000 ?
<div className="product-gallery-item d-flex"> <div style={{ border: active ? '4px solid #1BBC6E' : ''}} className="product-gallery-item d-flex">
{ {
item.type === 'image' ? item.type === 'image' ?
<img src={item.value} alt={'عکس'} /> : null <img src={item.value} alt={'عکس'} /> : null

Loading…
Cancel
Save