web3privacy/web
1
0
Fork 0
mirror of https://github.com/web3privacy/web synced 2024-10-15 18:26:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

update

Browse source
This commit is contained in:
tree🌴 2023-11-24 12:39:36 +01:00
parent 97f57406bf
commit ba84d9ac5b
3 changed files with 39 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/EventItem.astro
View file

@ -46,26 +46,34 @@ function dateEnd(str, days) {
---
<div class="w3pn-event-item">
<div class="event-header flex gap-4">
<div class="w-28 text-right leading-normal">
<div>{dateFormat(item.date)}</div>
{item.days && item.days > 1 &&
<div>{dateFormat(dateEnd(item.date, item.days))}</div>
}
</div>
<div>
<div class="text-lg text-white">{nameRenderer(item)}</div>
<div class="flex gap-2">
<img src={`/flags/${item.country}.svg`} class="w-4" />
<div>
{item.city}, {item.country.toUpperCase()}
{item.coincidence &&
<span>&nbsp; - {ccRenderer(item)}</span>
}
<div class="event-header flex">
<div class="header-base sm:flex gap-4 grow px-3 py-2.5 sm:px-4 sm:py-3 cursor-pointer">
<div class="w-full sm:w-28 flex sm:block sm:text-right leading-normal">
<div class="">{dateFormat(item.date)}</div>
{item.days && item.days > 1 &&
<div class="ml-1.5"> <span class="inline-block sm:hidden">- </span>{dateFormat(dateEnd(item.date, item.days))}</div>
}
</div>
<div>
<div class="text-lg text-white">{nameRenderer(item)}</div>
<div class="flex gap-2">
<img src={`/flags/${item.country}.svg`} class="w-4" />
<div>
{item.city}, {item.country.toUpperCase()}
{item.coincidence &&
<span>&nbsp; - {ccRenderer(item)}</span>
}
</div>
</div>
</div>
{item.links?.rsvp &&
<div class="py-1 grow text-right">
<a href={item.links?.rsvp} class="button inverted"><button>Join</button></a>
</div>
}
</div>
<div class="grow"></div>
</div>
<div class="detail hidden flex sm:gap-4">
<div class="w-0 sm:w-28"></div>
@ -75,7 +83,7 @@ function dateEnd(str, days) {
<div class="mt-4 mb-2">
{item.links?.rsvp &&
<a href={item.links.rsvp} class="button inverted"><button>More details & pre-registration</button></a>
<a href={item.links.rsvp} class="button inverted"><button>More details & RSVP</button></a>
}
{item.links?.web &&
<a href={item.links.web} class="button inverted"><button>Website</button></a>

9
src/pages/events.astro
View file

@ -60,9 +60,12 @@ for (const year of pastYears.reverse()) {
</div>
<script>
document.querySelectorAll('.event-header').forEach((el) => {
el.addEventListener('click', () => {
const detail = el.parentElement.querySelector('.detail')
document.querySelectorAll('.event-header .header-base').forEach((el) => {
el.addEventListener('click', (ev) => {
if (ev.target.tagName === "BUTTON") {
return false;
}
const detail = el.parentElement.parentElement.querySelector('.detail')
document.querySelectorAll('.detail:not(.hidden)').forEach(e => (detail !== e ? e.classList.add('hidden') : null));
detail.classList.toggle('hidden');
});

10
src/styles/base.css
View file

@ -91,13 +91,17 @@
}
.w3pn-event-item {
@apply w-full border border-[#202020] mb-3 hover:bg-[#0f0f0f]/30;
@apply w-full border border-[#202020] mb-3;
}
.w3pn-event-item .event-header {
@apply px-4 py-3 cursor-pointer;
.w3pn-event-item .header-base:hover {
@apply bg-[#0f0f0f]/30;
}
/*.w3pn-event-item .event-header {
@apply ;
}*/
.w3pn-event-item .detail {
@apply bg-[#0f0f0f] px-4 py-3;
}