Fixed the suggestions along with the event masonry fix for loading larger images.

This commit is contained in:
NoobDeveloper412 2024-09-27 18:20:26 +05:00
parent 31e290d19f
commit ff8d9b9946
15 changed files with 48 additions and 38 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View file

@ -1,28 +1,29 @@
--- ---
const { const {
images = [ images = [
"/events/masonry/1.png", { webp: "/events/masonry/1.webp", png: "/events/masonry/1.png" },
"/events/masonry/2.png", { webp: "/events/masonry/2.webp", png: "/events/masonry/2.png" },
"/events/masonry/3.png", { webp: "/events/masonry/3.webp", png: "/events/masonry/3.png" },
"/events/masonry/4.png", { webp: "/events/masonry/4.webp", png: "/events/masonry/4.png" },
"/events/masonry/5.png", { webp: "/events/masonry/5.webp", png: "/events/masonry/5.png" },
"/events/masonry/6.png", { webp: "/events/masonry/6.webp", png: "/events/masonry/6.png" },
"/events/masonry/7.png", { webp: "/events/masonry/7.webp", png: "/events/masonry/7.png" },
"/events/masonry/8.png", { webp: "/events/masonry/8.webp", png: "/events/masonry/8.png" },
"/events/masonry/9.png", { webp: "/events/masonry/9.webp", png: "/events/masonry/9.png" },
], ],
} = Astro.props; } = Astro.props;
--- ---
<!-- Display gallery with webp images -->
<div <div
class="middle-pane-big grid grid-cols-2 lg:flex lg:flex-nowrap gap-2 md:gap-[3px]" class="middle-pane-big grid grid-cols-2 lg:flex lg:flex-nowrap gap-2 md:gap-[3px]"
> >
{ {
images.slice(0, 4).map((image, index) => ( images.slice(0, 4).map((image, index) => (
<div class="flex-auto overflow-hidden "> <div class="flex-auto overflow-hidden">
<img <img
class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image" class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
src={image} src={image.webp}
alt={`Image ${index + 1}`} alt={`Image ${index + 1}`}
data-index={index} data-index={index}
/> />
@ -39,7 +40,7 @@ const {
<div class="flex-auto overflow-hidden"> <div class="flex-auto overflow-hidden">
<img <img
class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image" class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
src={image} src={image.webp}
alt={`Image ${index + 5}`} alt={`Image ${index + 5}`}
data-index={index + 4} data-index={index + 4}
/> />
@ -48,6 +49,7 @@ const {
} }
</div> </div>
<!-- Modal for fullscreen images -->
<div <div
class="image-modal hidden fixed inset-0 bg-black flex-col flex items-center justify-center z-50" class="image-modal hidden fixed inset-0 bg-black flex-col flex items-center justify-center z-50"
> >
@ -60,6 +62,7 @@ const {
class="w-full h-full object-contain modal-image" class="w-full h-full object-contain modal-image"
src="" src=""
alt="Selected Image" alt="Selected Image"
loading="lazy"
/> />
</div> </div>
@ -68,7 +71,7 @@ const {
images.map((image, index) => ( images.map((image, index) => (
<img <img
class="w-24 h-24 object-contain cursor-pointer thumbnail-image" class="w-24 h-24 object-contain cursor-pointer thumbnail-image"
src={image} src={image.webp}
alt={`Thumbnail ${index + 1}`} alt={`Thumbnail ${index + 1}`}
data-index={index} data-index={index}
/> />
@ -80,15 +83,15 @@ const {
<script> <script>
let selectedIndex = 0; let selectedIndex = 0;
const images = [ const images = [
"/events/masonry/1.png", { webp: "/events/masonry/1.webp", png: "/events/masonry/1.png" },
"/events/masonry/2.png", { webp: "/events/masonry/2.webp", png: "/events/masonry/2.png" },
"/events/masonry/3.png", { webp: "/events/masonry/3.webp", png: "/events/masonry/3.png" },
"/events/masonry/4.png", { webp: "/events/masonry/4.webp", png: "/events/masonry/4.png" },
"/events/masonry/5.png", { webp: "/events/masonry/5.webp", png: "/events/masonry/5.png" },
"/events/masonry/6.png", { webp: "/events/masonry/6.webp", png: "/events/masonry/6.png" },
"/events/masonry/7.png", { webp: "/events/masonry/7.webp", png: "/events/masonry/7.png" },
"/events/masonry/8.png", { webp: "/events/masonry/8.webp", png: "/events/masonry/8.png" },
"/events/masonry/9.png", { webp: "/events/masonry/9.webp", png: "/events/masonry/9.png" },
]; ];
function openModal(index) { function openModal(index) {
@ -102,7 +105,7 @@ const {
} }
function updateModalImage() { function updateModalImage() {
const imageSrc = images[selectedIndex]; const imageSrc = images[selectedIndex].png;
document.querySelector(".modal-image").src = imageSrc; document.querySelector(".modal-image").src = imageSrc;
} }

View file

@ -38,22 +38,25 @@ import core from "../core.json";
class="flex flex-col justify-end h-full gap-4 mb-4 md:mb-8 z-50" class="flex flex-col justify-end h-full gap-4 mb-4 md:mb-8 z-50"
> >
<span>Price</span> <span>Price</span>
<span class="text-white font-bold text-[24px] leading-[1.4rem]"> <span
class="text-white font-bold text-lg md:text-[24px] leading-[1.4rem]"
>
€100 / Year €100 / Year
</span> </span>
<a class="button inverted" href={core.links.individual} <a class="button inverted" href={core.links.individual}
><button>BECOME A MEMBER</button></a ><button>BECOME A MEMBER</button></a
> >
<p class="max-w-72 text-sm"> <p class="max-w-72 text-sm">
After making your donation, kindly <span class="underline">send us</span> the tx hash, your After making your donation, kindly <span class="underline"
T-shirt size, and let us know if you would like your membership >send us</span
to be public or kept private. > the tx hash, your T-shirt size, and let us know if you would like
your membership to be public or kept private.
</p> </p>
</div> </div>
<img <img
src="/about/image1.png" src="/about/image1.png"
alt="" alt=""
class="absolute hidden md:block right-0 bottom-0 md:w-[280px] md:h-auto" class="absolute hidden md:block right-0 bottom-0 md:w-[280px] md:h-auto opacity-30"
/> />
</div> </div>
</div> </div>
@ -94,7 +97,10 @@ import core from "../core.json";
<li> <li>
<span class="font-bold leading-wide"> Access to Talent </span> <span class="font-bold leading-wide"> Access to Talent </span>
<p>Connect with the right builders to test or develop your beta projects or services.</p> <p>
Connect with the right builders to test or develop your beta
projects or services.
</p>
</li> </li>
<li> <li>
<span class="font-bold leading-wide"> Targeted Outreach </span> <span class="font-bold leading-wide"> Targeted Outreach </span>
@ -126,7 +132,7 @@ import core from "../core.json";
<div class="flex flex-col justify-end h-full gap-2"> <div class="flex flex-col justify-end h-full gap-2">
<span>Our membership has multiple tiers ranging from</span> <span>Our membership has multiple tiers ranging from</span>
<span <span
class="text-white font-bold text-[24px] leading-[1.4rem]" class="text-white font-bold text-lg md:text-[24px] leading-[1.4rem]"
> >
7,000 to 70,000 € / year 7,000 to 70,000 € / year
</span> </span>
@ -134,7 +140,7 @@ import core from "../core.json";
>Membership for registered non-profit organizations is >Membership for registered non-profit organizations is
</span> </span>
<span <span
class="text-white font-bold text-[24px] leading-[1.4rem]" class="text-white font-bold text-lg md:text-[24px] leading-[1.4rem]"
> >
3,000 € / year 3,000 € / year
</span> </span>

View file

@ -47,9 +47,7 @@ function personLink(person) {
</a> </a>
<div class="mt-4"> <div class="mt-4">
<h3 class="text-xs md:text-[16px] font-bold leading-9">{person.name}</h3> <h3 class="text-xs md:text-[16px] font-bold leading-9">{person.name}</h3>
<p class="text-xs text-gray-500">
{person.caption}
</p>
{person.refs && ( {person.refs && (
<p class="text-xs text-gray-500"> <p class="text-xs text-gray-500">
{person.refs.twitter && `@${person.refs.twitter}`} {person.refs.twitter && `@${person.refs.twitter}`}
@ -59,6 +57,9 @@ function personLink(person) {
{person.refs.github && ` | GitHub: ${person.refs.github}`} {person.refs.github && ` | GitHub: ${person.refs.github}`}
{person.refs.matrix && ` | Matrix: ${person.refs.matrix}`} {person.refs.matrix && ` | Matrix: ${person.refs.matrix}`}
{person.refs.email && ` | Email: ${person.refs.email}`} {person.refs.email && ` | Email: ${person.refs.email}`}
</p>
<p class="text-xs text-gray-500">
{person.caption && person.caption}
</p> </p>
<p class="text-xs text-gray-500"> <p class="text-xs text-gray-500">
{person.refs.designation && `${person.refs.designation}`} {person.refs.designation && `${person.refs.designation}`}

View file

@ -227,6 +227,7 @@
"kurt-opsahl", "kurt-opsahl",
"guy-zyskind" "guy-zyskind"
], ],
"core-contributors": [ "core-contributors": [
{ {
"id": "mykola-siusko", "id": "mykola-siusko",
@ -261,7 +262,7 @@
"name": "Robert De Groot", "name": "Robert De Groot",
"caption": "Partnership & Volunteers", "caption": "Partnership & Volunteers",
"imageUrl": "https://data.web3privacy.info/img/people/coinmandeer.png" "imageUrl": "/core-contributors/robert.png"
}, },
{ {
"id": "cat", "id": "cat",

View file

@ -153,11 +153,10 @@ function genHeading(str) {
<div> <div>
<div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" /> <div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" />
{/* <h1 class="glitch-text-interval text-6xl"> {/* <h1 class="glitch-text-interval text-6xl">
web3privacy summit #1 web3privacy summit #1
</h1> */} </h1> */}
<div class="text-left mt-10" set:html={config.hero.text}></div> <div class="text-left mt-10" set:html={config.hero.text} />
<div class="mt-6"> <div class="mt-6">
<a class="button" href="/about"> <a class="button" href="/about">
<button> <button>
@ -192,7 +191,7 @@ function genHeading(str) {
<slot /> <slot />
<div <div
class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10" class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10 middle-pane-medium"
> >
<div <div
class="flex mx-6 gap-10 text-lg items-center flex-wrap align-top" class="flex mx-6 gap-10 text-lg items-center flex-wrap align-top"