Skip to content

Commit 299cb72

Browse files
DerCedDerCed
committed
Added Gallery popup
1 parent 7e6e6ea commit 299cb72

File tree

2 files changed

+138
-4
lines changed

2 files changed

+138
-4
lines changed

‎src/components/Gallery2/Gallery2.jsx‎

Lines changed: 135 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
11
'use client'
2-
import {Box} from "@mui/material";
2+
import {
3+
AppBar,
4+
Box,
5+
Button,
6+
CardActionArea,
7+
Container,
8+
Dialog,
9+
Grid,
10+
IconButton,
11+
Paper,
12+
Slide,
13+
Stack,
14+
Toolbar,
15+
Typography, useMediaQuery
16+
} from "@mui/material";
317
import React, {useState} from "react";
418
import Images2023 from "../../assets/images/event/2023/Images2023";
519
import Images2024 from "../../assets/images/event/2024/Images2024";
20+
import {Close, KeyboardArrowLeft, KeyboardArrowRight} from "@mui/icons-material";
21+
22+
const Transition = React.forwardRef(function Transition(
23+
props,
24+
ref,
25+
) {
26+
return <Slide direction="up" ref={ref} {...props} />;
27+
});
628

729
function CustomTabPanel(props) {
830
const {children, value, index, ...other} = props;
@@ -45,15 +67,32 @@ let images = [
4567
export function Gallery2() {
4668

4769
const [galleryTab, setGalleryTab] = useState(0)
70+
const [isGalleryOpen, setIsGalleryOpen] = useState(true)
71+
const [selectedImage, setSelectedImage] = useState(0)
4872

4973
const oneThird = Math.floor(images[galleryTab].items.length / 3);
50-
console.log(oneThird, oneThird * 2, images[galleryTab].items.length)
5174
const firstThird = images[galleryTab].items.slice(0, oneThird)
5275
const twoThird = images[galleryTab].items.slice(oneThird, oneThird * 2)
5376
const threeThird = images[galleryTab].items.slice(oneThird * 2, images[galleryTab].items.length)
77+
const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));
5478

5579
const baseSeconds = 10
5680

81+
function scrollImageIntoView(index) {
82+
const element = document.getElementById("img-" + index);
83+
if (!element) {
84+
console.error("could not find element", "img-" + index, element)
85+
return
86+
}
87+
element.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'})
88+
89+
}
90+
91+
function setNewImage(index) {
92+
scrollImageIntoView(index)
93+
setSelectedImage(index)
94+
}
95+
5796
return (
5897
<Box sx={{pt: 10, pb: 10}} id={"images"}>
5998
<Box sx={{position: "relative", overflow: "hidden", height: "200px"}}>
@@ -113,9 +152,7 @@ export function Gallery2() {
113152
backgroundSize: "cover",
114153
height: "100%"
115154
}}/>)}
116-
117155
</Box>
118-
119156
</Box>
120157
<Box sx={{position: "relative", overflow: "hidden", height: "200px"}}>
121158
<Box sx={{
@@ -147,6 +184,100 @@ export function Gallery2() {
147184
</Box>
148185

149186
</Box>
187+
<Container sx={{display: "flex", justifyContent: "flex-end"}}>
188+
<Button color={"inherit"} sx={{mt: 3}} onClick={() => setIsGalleryOpen(true)}>View full Gallery</Button>
189+
</Container>
190+
<Dialog
191+
fullScreen
192+
open={isGalleryOpen}
193+
onClose={() => setIsGalleryOpen(false)}
194+
TransitionComponent={Transition}
195+
>
196+
<AppBar sx={{position: 'relative'}}>
197+
<Toolbar>
198+
<Typography sx={{ml: 2, flex: 1}} variant="h6" component="div">
199+
Gallery
200+
</Typography>
201+
<IconButton
202+
edge="start"
203+
color="inherit"
204+
onClick={() => setIsGalleryOpen(false)}
205+
aria-label="close"
206+
>
207+
<Close/>
208+
</IconButton>
209+
</Toolbar>
210+
</AppBar>
211+
<Box sx={{height: "100vh", display: "flex", flexDirection: "column"}}>
212+
<Container maxWidth={false}
213+
sx={{flexGrow: 1, display: "flex", alignItems: "center"}}>
214+
<Grid container spacing={5} alignItems={"center"}>
215+
<Grid item xs={12} md={2}
216+
sx={{overflowY: "scroll", overflowX: "scroll", height: "90vh", "::-webkit-scrollbar": {display: "none"}}} order={{xs: 2, md: 1}}>
217+
<Stack spacing={2} direction={matches ? "column" : "row"} >
218+
{images[galleryTab].items.map((item, index) => <CardActionArea onClick={() => {
219+
setSelectedImage(index)
220+
scrollImageIntoView(index)
221+
}} id={"img-" + index}><Paper elevation={5} sx={{
222+
width: "100%",
223+
aspectRatio: "16/10",
224+
background: `url(${item.src})`,
225+
backgroundPosition: "center",
226+
backgroundSize: "cover",
227+
display: "flex",
228+
alignItems: "flex-end"
229+
}}>
230+
{
231+
(selectedImage === index) ? (
232+
<Box sx={{
233+
height: ".4rem",
234+
background: "linear-gradient(90deg, rgba(58,12,163,1) 0%, rgba(114,9,183,1) 100%)",
235+
width: "100%"
236+
}}/>
237+
) : undefined
238+
}
239+
240+
</Paper></CardActionArea>)}
241+
</Stack>
242+
</Grid>
243+
<Grid item xs={12} md={10} order={{xs: 1, md: 2}}>
244+
<Paper elevation={5} sx={{
245+
width: "100%",
246+
aspectRatio: "16/9",
247+
background: `url(${images[galleryTab].items[selectedImage].src})`,
248+
backgroundPosition: "center",
249+
backgroundSize: "cover",
250+
}}>
251+
<Box sx={{
252+
p: 3,
253+
display: "flex",
254+
alignItems: "center",
255+
justifyContent: "space-between",
256+
width: "100%",
257+
height: "100%",
258+
"& .MuiIconButton-root:hover": {background: "rgba(19,16,27,.8)"},
259+
}}>
260+
<IconButton sx={{
261+
background: "rgba(19,16,27,0.4)",
262+
}}
263+
onClick={() => setNewImage((((selectedImage - 1) % images[galleryTab].items.length) + images[galleryTab].items.length) % images[galleryTab].items.length)}>
264+
<KeyboardArrowLeft fontSize={"large"} sx={{color: "#fff"}}/>
265+
</IconButton>
266+
<IconButton sx={{
267+
background: "rgba(19,16,27,0.4)",
268+
}}
269+
onClick={() => setNewImage((selectedImage + 1) % images[galleryTab].items.length)}
270+
>
271+
<KeyboardArrowRight fontSize={"large"} sx={{color: "#fff"}}/>
272+
</IconButton>
273+
</Box>
274+
275+
</Paper>
276+
</Grid>
277+
</Grid>
278+
</Container>
279+
</Box>
280+
</Dialog>
150281
</Box>
151282
)
152283

‎src/components/Theme/HackHpiTheme.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,9 @@ const hackHpiTheme = responsiveFontSizes(createTheme(theme, {
9191
h5:{
9292
fontFamily: 'Neo Sans, Urbanist, Arial',
9393
},
94+
h6:{
95+
fontFamily: 'Neo Sans, Urbanist, Arial',
96+
},
9497
body1: {
9598
fontFamily: '"Open Sans Variable", Urbanist, Arial',
9699
}

0 commit comments

Comments
 (0)