Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Events update #24

Merged
merged 5 commits into from
Mar 28, 2024
Merged

Events update #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
69ecdf8
events json update
barnilsarma Mar 27, 2024
9511021
Merge branch 'dev' of https://github.com/POSUA-NITS/Posua-2024 into e…
barnilsarma Mar 27, 2024
67bab06
compress img
hereisadi Mar 28, 2024
0a983ed
lazy load
hereisadi Mar 28, 2024
b7c5fa2
lazy load
hereisadi Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 75 additions & 25 deletions src/Components/Borhomthuri/Borhomthuri.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,64 @@
/* eslint-disable func-names */
/* eslint-disable no-param-reassign */
/* eslint-disable prefer-arrow-callback */

import { useState, useEffect } from "react";
import styles from "./Borhomthuri.module.scss";
// import Film from "./Filmy";
// import Card from "./Card";
import data from "../../assets/Edition.json";
import LottieHeading from "../LottieHeading/LottieHeading";
// import ScrolBar from "./ScrolBar";
// import FrontCover from "./FrontCover";

const Borhomthuri = () => {
/* implementing lazy load via ioa */
const config = {
rootMargin: "0px 0px 0px 0px",
threshold: 0.2,
};

const [loaded, setIsLoaded] = useState(false);
useEffect(() => {
const observer = new window.IntersectionObserver(function (entries, self) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadImages(entry.target);
self.unobserve(entry.target);
}
});
}, config);
const imgs = document.querySelectorAll("[data-src]");
imgs.forEach((img) => {
observer.observe(img);
});
return () => {
imgs.forEach((img) => {
observer.unobserve(img);
});
};
});

const loadImages = (image) => {
image.src = image.dataset.src;
};

return (
<div className={styles.superParent}>
<div className={styles.ParentClass}>
{/* <Pepa /> */}
<div id={styles.leftrangoliholder_borhom}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/leftrangoli_jp6whi.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607934/leftrangoli_jp6whi-min_eicyyv.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>

<div id={styles.rightrangoliholder_borhom}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/rightrangoli_jvpnus.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711608053/rightrangoli_jvpnus-min_h2l42o.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand All @@ -46,9 +85,18 @@ const Borhomthuri = () => {
target="_blank"
style={{ margin: "1.2rem" }}
>
<img src={item.src} alt="magazine" />
<img
src={item.edition_num}
src=""
data-src={item.src}
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt="magazine"
/>
<img
src=""
data-src={item.edition_num}
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt="Edition"
style={{
margin: "0 auto",
Expand All @@ -64,13 +112,19 @@ const Borhomthuri = () => {
<div className={styles.cameraImg}>
<img
alt="Camera"
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711559065/camera_posua24_l7ndyp.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607582/camera_posua24_l7ndyp-min_o41997.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
/>
</div>

<div id={styles.camerafoucs}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711559384/camera_focus_posua24_orhnta.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607671/camera_focus_posua24_orhnta-min_o0quzy.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand All @@ -95,9 +149,18 @@ const Borhomthuri = () => {
target="_blank"
style={{ margin: "1.2rem" }}
>
<img src={item.src} alt="magazine" />
<img
src={item.edition_num}
src=""
data-src={item.src}
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt="magazine"
/>
<img
src=""
data-src={item.edition_num}
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt="Edition"
style={{
margin: "0 auto",
Expand All @@ -107,19 +170,6 @@ const Borhomthuri = () => {
</a>
))}
</div>
{/* <ScrolBar /> */}
{/* <div className={styles.movingCards}>
{
data.map((item)=>(
<Card imgSrc={item.src} srcMag={item.link} />
))
}
</div> */}

{/* <div id={styles.random}>
<img src="https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1711056519/Group_2608667_reshtk.jpg?_s=public-apps" alt="" />
</div> */}
{/* Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ratione, perspiciatis vitae sit asperiores quia sunt quasi maxime. Nihil, officia qui fuga reprehenderit obcaecati ipsam alias vel hic laudantium pariatur aliquam mollitia reiciendis explicabo? */}
</div>
</div>
</div>
Expand Down
41 changes: 39 additions & 2 deletions src/Components/Shared/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,52 @@
import React from "react";
/* eslint-disable func-names */
/* eslint-disable no-param-reassign */
/* eslint-disable prefer-arrow-callback */

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import styles from "./Footer.module.scss";
import fontStyles from "./fontStyles.module.scss"; // Import font styles
const Footer = () => {
/* implementing lazy load via ioa */
const config = {
rootMargin: "0px 0px 0px 0px",
threshold: 0.2,
};

const [loaded, setIsLoaded] = useState(false);
useEffect(() => {
const observer = new window.IntersectionObserver(function (entries, self) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadImages(entry.target);
self.unobserve(entry.target);
}
});
}, config);
const imgs = document.querySelectorAll("[data-src]");
imgs.forEach((img) => {
observer.observe(img);
});
return () => {
imgs.forEach((img) => {
observer.unobserve(img);
});
};
});

const loadImages = (image) => {
image.src = image.dataset.src;
};
return (
<footer className={`${styles.Container} ${fontStyles.PhilosopherFont}`}>
<div className={styles.posua}>
<Link to="/">
<img
src="https://res.cloudinary.com/dclhahfvz/image/upload/v1710953023/New_Posua_logo_kyknan.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607487/New_Posua_logo_kyknan-min_bbxthz.webp"
alt="Posua Logo"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
/>
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Shared/Footer/Footer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.Container {
background-color: beige;
background-image: url(https://res.cloudinary.com/dp92qug2f/image/upload/v1711374389/footerbg_posua24_zhs2zn.webp);
background-image: url(https://res.cloudinary.com/dp92qug2f/image/upload/v1711607805/footerbg_posua24_zhs2zn_1_dzjf5u.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
Expand Down
52 changes: 48 additions & 4 deletions src/Pages/About/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,61 @@
// import AboutPepa from "./AboutPepa";
/* eslint-disable func-names */
/* eslint-disable no-param-reassign */
/* eslint-disable prefer-arrow-callback */

import { useState, useEffect } from "react";
import LottieHeading from "../../Components/LottieHeading/LottieHeading";
import styles from "./About.module.scss";
const About = () => {
/* implementing lazy load via ioa */
const config = {
rootMargin: "0px 0px 0px 0px",
threshold: 0.2,
};

const [loaded, setIsLoaded] = useState(false);
useEffect(() => {
const observer = new window.IntersectionObserver(function (entries, self) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadImages(entry.target);
self.unobserve(entry.target);
}
});
}, config);
const imgs = document.querySelectorAll("[data-src]");
imgs.forEach((img) => {
observer.observe(img);
});
return () => {
imgs.forEach((img) => {
observer.unobserve(img);
});
};
});

const loadImages = (image) => {
image.src = image.dataset.src;
};

return (
<div>
<div className={styles.AboutClass}>
<div id={styles.leftrangoliholder}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/leftrangoli_jp6whi.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607934/leftrangoli_jp6whi-min_eicyyv.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>

<div id={styles.rightrangoliholder}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/rightrangoli_jvpnus.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711608053/rightrangoli_jvpnus-min_h2l42o.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand Down Expand Up @@ -44,7 +85,10 @@ const About = () => {

<div id={styles.cicularrangoliholder}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711288702/rangoli_404_posua_d0je3u.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711288702/rangoli_404_posua_d0je3u.png"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand Down
52 changes: 48 additions & 4 deletions src/Pages/Invitation/Invitation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,63 @@
/* eslint-disable func-names */
/* eslint-disable no-param-reassign */
/* eslint-disable prefer-arrow-callback */
import { useState, useEffect } from "react";

import LottieHeading from "../../Components/LottieHeading/LottieHeading";
import styles from "./Invitation.module.scss";
// import InvitationPepa from "./InvitationPepa";
import ScrollerJapi from "./ScrollerJapi";
const Invitation = () => {
/* implementing lazy load via ioa */
const config = {
rootMargin: "0px 0px 0px 0px",
threshold: 0.2,
};

const [loaded, setIsLoaded] = useState(false);
useEffect(() => {
const observer = new window.IntersectionObserver(function (entries, self) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadImages(entry.target);
self.unobserve(entry.target);
}
});
}, config);
const imgs = document.querySelectorAll("[data-src]");
imgs.forEach((img) => {
observer.observe(img);
});
return () => {
imgs.forEach((img) => {
observer.unobserve(img);
});
};
});

const loadImages = (image) => {
image.src = image.dataset.src;
};

return (
<div className={styles.superParent}>
<div className={styles.InvitationClass}>
<div id={styles.leftrangoliholderinvi}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/leftrangoli_jp6whi.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607934/leftrangoli_jp6whi-min_eicyyv.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>

<div id={styles.rightrangoliholderinvi}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/rightrangoli_jvpnus.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711608053/rightrangoli_jvpnus-min_h2l42o.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand All @@ -24,8 +66,10 @@ const Invitation = () => {
<div className={styles.InvitationImage}>
<img
alt=""
src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711283239/Invitation_2024_1_1_vg3kjj.png"
className={styles.img}
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711608213/Invitation_2024_1_1_vg3kjj-min_frj2qy.webp"
className={`${loaded ? "loadedClass" : "loadingClass"} ${styles.img}`}
onLoad={() => setIsLoaded(true)}
/>
</div>
<ScrollerJapi />
Expand Down
2 changes: 1 addition & 1 deletion src/Pages/Invitation/ScrollerJapi.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const ScrollerJapi = () => {
/>
<img
alt="Circle"
src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711315135/Group_julcxm.png"
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711609115/Group_julcxm-min_lxhrhu.webp"
className={styles.ImgCircle}
/>
</div>
Expand Down
Loading
Loading