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

@ -32,14 +32,14 @@ export default function Gallery(props) {
{
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} />
<Item active={selectedMedia === props.gallery[0]} item={props.gallery[0]} key={props.gallery[0].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 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) => (
<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, more, setSelectedMedia, setModal} = props;
const {item, more, setSelectedMedia, setModal, active} = props;
return(
<>
{
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' ?
<img src={item.value} alt={'عکس'} /> : null

Loading…
Cancel
Save