diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/public/EngagmentSession_06.23.2024-131.jpg (renamed from client/public/full/engagement1.jpg) | bin | 2188838 -> 2188838 bytes | |||
-rw-r--r-- | client/public/EngagmentSession_06.23.2024-161.jpg (renamed from client/public/full/engagement2.jpg) | bin | 3150499 -> 3150499 bytes | |||
-rw-r--r-- | client/public/EngagmentSession_06.23.2024-164.jpg (renamed from client/public/full/engagement3.jpg) | bin | 3437736 -> 3437736 bytes | |||
-rw-r--r-- | client/public/EngagmentSession_06.23.2024-259.jpg (renamed from client/public/full/engagement4.jpg) | bin | 1643595 -> 1643595 bytes | |||
-rw-r--r-- | client/public/EngagmentSession_06.23.2024-267.jpg (renamed from client/public/full/engagement5.jpg) | bin | 1699370 -> 1699370 bytes | |||
-rw-r--r-- | client/public/EngagmentSession_06.23.2024-284.jpg (renamed from client/public/full/engagement6.jpg) | bin | 3429096 -> 3429096 bytes | |||
-rw-r--r-- | client/public/divine-shepherd.jpg (renamed from client/public/full/divine-shepherd.jpg) | bin | 202918 -> 202918 bytes | |||
-rw-r--r-- | client/public/small/divine-shepherd.webp | bin | 87202 -> 0 bytes | |||
-rw-r--r-- | client/public/small/engagement1.webp | bin | 443490 -> 0 bytes | |||
-rw-r--r-- | client/public/small/engagement2.webp | bin | 988522 -> 0 bytes | |||
-rw-r--r-- | client/public/small/engagement3.webp | bin | 1035762 -> 0 bytes | |||
-rw-r--r-- | client/public/small/engagement4.webp | bin | 400510 -> 0 bytes | |||
-rw-r--r-- | client/public/small/engagement5.webp | bin | 423440 -> 0 bytes | |||
-rw-r--r-- | client/public/small/engagement6.webp | bin | 1047326 -> 0 bytes | |||
-rw-r--r-- | client/src/blurry-load.css | 8 | ||||
-rw-r--r-- | client/src/components/AdminLogin.tsx | 2 | ||||
-rw-r--r-- | client/src/components/BlurryLoadImg.tsx | 15 | ||||
-rw-r--r-- | client/src/components/Home.tsx | 28 | ||||
-rw-r--r-- | client/src/components/Schedule.tsx | 6 | ||||
-rw-r--r-- | client/src/useBlurryLoad.ts | 38 |
20 files changed, 14 insertions, 83 deletions
diff --git a/client/public/full/engagement1.jpg b/client/public/EngagmentSession_06.23.2024-131.jpg Binary files differindex 0657a40..0657a40 100644 --- a/client/public/full/engagement1.jpg +++ b/client/public/EngagmentSession_06.23.2024-131.jpg diff --git a/client/public/full/engagement2.jpg b/client/public/EngagmentSession_06.23.2024-161.jpg Binary files differindex 92b5be5..92b5be5 100644 --- a/client/public/full/engagement2.jpg +++ b/client/public/EngagmentSession_06.23.2024-161.jpg diff --git a/client/public/full/engagement3.jpg b/client/public/EngagmentSession_06.23.2024-164.jpg Binary files differindex 529a324..529a324 100644 --- a/client/public/full/engagement3.jpg +++ b/client/public/EngagmentSession_06.23.2024-164.jpg diff --git a/client/public/full/engagement4.jpg b/client/public/EngagmentSession_06.23.2024-259.jpg Binary files differindex 075480c..075480c 100644 --- a/client/public/full/engagement4.jpg +++ b/client/public/EngagmentSession_06.23.2024-259.jpg diff --git a/client/public/full/engagement5.jpg b/client/public/EngagmentSession_06.23.2024-267.jpg Binary files differindex 7222c16..7222c16 100644 --- a/client/public/full/engagement5.jpg +++ b/client/public/EngagmentSession_06.23.2024-267.jpg diff --git a/client/public/full/engagement6.jpg b/client/public/EngagmentSession_06.23.2024-284.jpg Binary files differindex 2f06a42..2f06a42 100644 --- a/client/public/full/engagement6.jpg +++ b/client/public/EngagmentSession_06.23.2024-284.jpg diff --git a/client/public/full/divine-shepherd.jpg b/client/public/divine-shepherd.jpg Binary files differindex c89749e..c89749e 100644 --- a/client/public/full/divine-shepherd.jpg +++ b/client/public/divine-shepherd.jpg diff --git a/client/public/small/divine-shepherd.webp b/client/public/small/divine-shepherd.webp Binary files differdeleted file mode 100644 index 14a82df..0000000 --- a/client/public/small/divine-shepherd.webp +++ /dev/null diff --git a/client/public/small/engagement1.webp b/client/public/small/engagement1.webp Binary files differdeleted file mode 100644 index b8ce0f1..0000000 --- a/client/public/small/engagement1.webp +++ /dev/null diff --git a/client/public/small/engagement2.webp b/client/public/small/engagement2.webp Binary files differdeleted file mode 100644 index 2c8b01a..0000000 --- a/client/public/small/engagement2.webp +++ /dev/null diff --git a/client/public/small/engagement3.webp b/client/public/small/engagement3.webp Binary files differdeleted file mode 100644 index 84e8adc..0000000 --- a/client/public/small/engagement3.webp +++ /dev/null diff --git a/client/public/small/engagement4.webp b/client/public/small/engagement4.webp Binary files differdeleted file mode 100644 index 6098083..0000000 --- a/client/public/small/engagement4.webp +++ /dev/null diff --git a/client/public/small/engagement5.webp b/client/public/small/engagement5.webp Binary files differdeleted file mode 100644 index b9faf7e..0000000 --- a/client/public/small/engagement5.webp +++ /dev/null diff --git a/client/public/small/engagement6.webp b/client/public/small/engagement6.webp Binary files differdeleted file mode 100644 index 3e85e1f..0000000 --- a/client/public/small/engagement6.webp +++ /dev/null diff --git a/client/src/blurry-load.css b/client/src/blurry-load.css deleted file mode 100644 index df1dd09..0000000 --- a/client/src/blurry-load.css +++ /dev/null @@ -1,8 +0,0 @@ -.blurry-load { - filter: blur(6px); - transition: all .6s ease-in; -} - -.blur-out { - filter: none!important -}
\ No newline at end of file diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx index 4d722e8..f1f676f 100644 --- a/client/src/components/AdminLogin.tsx +++ b/client/src/components/AdminLogin.tsx @@ -107,7 +107,7 @@ function GuestLogin() { endAdornment: ( <InputAdornment position="end"> <IconButton onClick={handleClickShowPassword}> - {showPassword ? <Visibility /> : <VisibilityOff />} + {showPassword ? <VisibilityOff /> : <Visibility />} </IconButton> </InputAdornment> ), diff --git a/client/src/components/BlurryLoadImg.tsx b/client/src/components/BlurryLoadImg.tsx deleted file mode 100644 index c28aa45..0000000 --- a/client/src/components/BlurryLoadImg.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { ClassAttributes, ImgHTMLAttributes } from 'react'; -import { JSX } from 'react/jsx-runtime'; -import { useBlurryLoad } from '../useBlurryLoad.ts'; - -export const BlurryLoadImg = ( - props: JSX.IntrinsicAttributes & - ClassAttributes<HTMLImageElement> & - ImgHTMLAttributes<HTMLImageElement> & { 'data-large': string } -) => { - useBlurryLoad(); - return ( - <img alt="" {...props} className={`blurry-load ${props.className}`}></img> - ); -}; diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index 79743a5..f735195 100644 --- a/client/src/components/Home.tsx +++ b/client/src/components/Home.tsx @@ -1,33 +1,30 @@ import React from 'react'; import { useEffect, useState } from 'react'; import './Carousel.css'; -import { BlurryLoadImg } from './BlurryLoadImg'; - -const images = [ - { small: '/small/engagement1.webp', full: '/full/engagement1.jpg' }, - { small: '/small/engagement2.webp', full: '/full/engagement2.jpg' }, - { small: '/small/engagement3.webp', full: '/full/engagement3.jpg' }, - { small: '/small/engagement4.webp', full: '/full/engagement4.jpg' }, - { small: '/small/engagement5.webp', full: '/full/engagement5.jpg' }, - { small: '/small/engagement6.webp', full: '/full/engagement6.jpg' }, -]; +import p0 from '/EngagmentSession_06.23.2024-131.jpg'; +import p1 from '/EngagmentSession_06.23.2024-161.jpg'; +import p2 from '/EngagmentSession_06.23.2024-164.jpg'; +import p3 from '/EngagmentSession_06.23.2024-259.jpg'; +import p4 from '/EngagmentSession_06.23.2024-267.jpg'; +import p5 from '/EngagmentSession_06.23.2024-284.jpg'; function Home() { const [currentIndex, setIndex] = useState<number>(0); + const photos = [p0, p1, p2, p3, p4, p5]; useEffect(() => { const interval = setInterval(() => { setIndex((prevIndex) => - prevIndex === images.length - 1 ? 0 : prevIndex + 1 + prevIndex === photos.length - 1 ? 0 : prevIndex + 1 ); }, 3000); return () => clearInterval(interval); - }, [images.length]); + }, [photos.length]); return ( <div className="carousel-container"> <div className="carousel"> - {images.map((image, index) => ( + {photos.map((photo, index) => ( <div key={index} className={ @@ -36,10 +33,7 @@ function Home() { : 'carousel-slide' } > - <BlurryLoadImg - src={image.small} - data-large={`${image.full}`} - ></BlurryLoadImg> + <img src={photo}></img> </div> ))} </div> diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx index fc1fb64..64140e4 100644 --- a/client/src/components/Schedule.tsx +++ b/client/src/components/Schedule.tsx @@ -6,6 +6,7 @@ import { useMediaQuery, useTheme, } from '@mui/material'; +import divineShepherd from '/divine-shepherd.jpg'; import InsertInvitationIcon from '@mui/icons-material/InsertInvitation'; import { useAppDispatch } from '../hooks'; import { showDialog } from '../slices/uiSlice'; @@ -26,12 +27,9 @@ function Schedule() { display: 'flex', justifyContent: 'center', alignItems: 'center', - backgroundImage: `url(${ - isMobile ? 'none' : '/small/divine-shepherd.webp' - })`, + backgroundImage: `url(${isMobile ? 'none' : divineShepherd})`, backgroundSize: 'cover', }} - data-large="/full/divine-shepherd.jpg" > <Paper elevation={3} diff --git a/client/src/useBlurryLoad.ts b/client/src/useBlurryLoad.ts deleted file mode 100644 index 59069d2..0000000 --- a/client/src/useBlurryLoad.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { useEffect } from 'react'; -import './blurry-load.css'; - -export interface UseBlurryLoadProps { - toBlurImages?: Element[]; -} - -export const useBlurryLoad = (props?: UseBlurryLoadProps) => { - const { toBlurImages = [] } = props ?? {}; - - useEffect(() => { - const images: Element[] = [...toBlurImages]; - if (toBlurImages.length === 0) { - images.push(...document.querySelectorAll('.blurry-load')); - } - - const lazyImageObserver = new IntersectionObserver(function (entries) { - entries.forEach(function (entry) { - if (!entry.isIntersecting) return; - - const image = entry.target; - const currentImage = new Image(); - currentImage.setAttribute( - 'src', - image.getAttribute('data-large') ?? '' - ); - - currentImage.onload = () => { - image.setAttribute('src', currentImage.src); - image.classList.add('blur-out'); - }; - lazyImageObserver.unobserve(image); - }); - }); - - images.forEach((img) => lazyImageObserver.observe(img)); - }, [toBlurImages]); -}; |