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 {
images = [
"/events/masonry/1.png",
"/events/masonry/2.png",
"/events/masonry/3.png",
"/events/masonry/4.png",
"/events/masonry/5.png",
"/events/masonry/6.png",
"/events/masonry/7.png",
"/events/masonry/8.png",
"/events/masonry/9.png",
{ webp: "/events/masonry/1.webp", png: "/events/masonry/1.png" },
{ webp: "/events/masonry/2.webp", png: "/events/masonry/2.png" },
{ webp: "/events/masonry/3.webp", png: "/events/masonry/3.png" },
{ webp: "/events/masonry/4.webp", png: "/events/masonry/4.png" },
{ webp: "/events/masonry/5.webp", png: "/events/masonry/5.png" },
{ webp: "/events/masonry/6.webp", png: "/events/masonry/6.png" },
{ webp: "/events/masonry/7.webp", png: "/events/masonry/7.png" },
{ webp: "/events/masonry/8.webp", png: "/events/masonry/8.png" },
{ webp: "/events/masonry/9.webp", png: "/events/masonry/9.png" },
],
} = Astro.props;
---
<!-- Display gallery with webp images -->
<div
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) => (
<div class="flex-auto overflow-hidden ">
<div class="flex-auto overflow-hidden">
<img
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}`}
data-index={index}
/>
@ -39,7 +40,7 @@ const {
<div class="flex-auto overflow-hidden">
<img
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}`}
data-index={index + 4}
/>
@ -48,6 +49,7 @@ const {
}
</div>
<!-- Modal for fullscreen images -->
<div
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"
src=""
alt="Selected Image"
loading="lazy"
/>
</div>
@ -68,7 +71,7 @@ const {
images.map((image, index) => (
<img
class="w-24 h-24 object-contain cursor-pointer thumbnail-image"
src={image}
src={image.webp}
alt={`Thumbnail ${index + 1}`}
data-index={index}
/>
@ -80,15 +83,15 @@ const {
<script>
let selectedIndex = 0;
const images = [
"/events/masonry/1.png",
"/events/masonry/2.png",
"/events/masonry/3.png",
"/events/masonry/4.png",
"/events/masonry/5.png",
"/events/masonry/6.png",
"/events/masonry/7.png",
"/events/masonry/8.png",
"/events/masonry/9.png",
{ webp: "/events/masonry/1.webp", png: "/events/masonry/1.png" },
{ webp: "/events/masonry/2.webp", png: "/events/masonry/2.png" },
{ webp: "/events/masonry/3.webp", png: "/events/masonry/3.png" },
{ webp: "/events/masonry/4.webp", png: "/events/masonry/4.png" },
{ webp: "/events/masonry/5.webp", png: "/events/masonry/5.png" },
{ webp: "/events/masonry/6.webp", png: "/events/masonry/6.png" },
{ webp: "/events/masonry/7.webp", png: "/events/masonry/7.png" },
{ webp: "/events/masonry/8.webp", png: "/events/masonry/8.png" },
{ webp: "/events/masonry/9.webp", png: "/events/masonry/9.png" },
];
function openModal(index) {
@ -102,7 +105,7 @@ const {
}
function updateModalImage() {
const imageSrc = images[selectedIndex];
const imageSrc = images[selectedIndex].png;
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"
>
<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
</span>
<a class="button inverted" href={core.links.individual}
><button>BECOME A MEMBER</button></a
>
<p class="max-w-72 text-sm">
After making your donation, kindly <span class="underline">send us</span> the tx hash, your
T-shirt size, and let us know if you would like your membership
to be public or kept private.
After making your donation, kindly <span class="underline"
>send us</span
> the tx hash, your T-shirt size, and let us know if you would like
your membership to be public or kept private.
</p>
</div>
<img
src="/about/image1.png"
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>
@ -94,7 +97,10 @@ import core from "../core.json";
<li>
<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>
<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">
<span>Our membership has multiple tiers ranging from</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
</span>
@ -134,7 +140,7 @@ import core from "../core.json";
>Membership for registered non-profit organizations is
</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
</span>

View file

@ -47,9 +47,7 @@ function personLink(person) {
</a>
<div class="mt-4">
<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 && (
<p class="text-xs text-gray-500">
{person.refs.twitter && `@${person.refs.twitter}`}
@ -59,6 +57,9 @@ function personLink(person) {
{person.refs.github && ` | GitHub: ${person.refs.github}`}
{person.refs.matrix && ` | Matrix: ${person.refs.matrix}`}
{person.refs.email && ` | Email: ${person.refs.email}`}
</p>
<p class="text-xs text-gray-500">
{person.caption && person.caption}
</p>
<p class="text-xs text-gray-500">
{person.refs.designation && `${person.refs.designation}`}

View file

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

View file

@ -152,12 +152,11 @@ function genHeading(str) {
<div class="w-full flex mt-20 sm:mt-32 middle-pane-medium">
<div>
<div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" />
{/* <h1 class="glitch-text-interval text-6xl">
web3privacy summit #1
</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">
<a class="button" href="/about">
<button>
@ -192,7 +191,7 @@ function genHeading(str) {
<slot />
<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
class="flex mx-6 gap-10 text-lg items-center flex-wrap align-top"