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="w3pn-event-item">
<div class="event-header flex gap-4"> <div class="event-header flex">
<div class="w-28 text-right leading-normal"> <div class="header-base sm:flex gap-4 grow px-3 py-2.5 sm:px-4 sm:py-3 cursor-pointer">
<div>{dateFormat(item.date)}</div> <div class="w-full sm:w-28 flex sm:block sm:text-right leading-normal">
{item.days && item.days > 1 && <div class="">{dateFormat(item.date)}</div>
<div>{dateFormat(dateEnd(item.date, item.days))}</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>
<div class="text-lg text-white">{nameRenderer(item)}</div> <div>
<div class="flex gap-2"> <div class="text-lg text-white">{nameRenderer(item)}</div>
<img src={`/flags/${item.country}.svg`} class="w-4" /> <div class="flex gap-2">
<div> <img src={`/flags/${item.country}.svg`} class="w-4" />
{item.city}, {item.country.toUpperCase()} <div>
{item.coincidence && {item.city}, {item.country.toUpperCase()}
<span>&nbsp; - {ccRenderer(item)}</span> {item.coincidence &&
} <span>&nbsp; - {ccRenderer(item)}</span>
}
</div>
</div> </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>
<div class="grow"></div>
</div> </div>
<div class="detail hidden flex sm:gap-4"> <div class="detail hidden flex sm:gap-4">
<div class="w-0 sm:w-28"></div> <div class="w-0 sm:w-28"></div>
@ -75,7 +83,7 @@ function dateEnd(str, days) {
<div class="mt-4 mb-2"> <div class="mt-4 mb-2">
{item.links?.rsvp && {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 && {item.links?.web &&
<a href={item.links.web} class="button inverted"><button>Website</button></a> <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> </div>
<script> <script>
document.querySelectorAll('.event-header').forEach((el) => { document.querySelectorAll('.event-header .header-base').forEach((el) => {
el.addEventListener('click', () => { el.addEventListener('click', (ev) => {
const detail = el.parentElement.querySelector('.detail') 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)); document.querySelectorAll('.detail:not(.hidden)').forEach(e => (detail !== e ? e.classList.add('hidden') : null));
detail.classList.toggle('hidden'); detail.classList.toggle('hidden');
}); });

10
src/styles/base.css
View file

@ -91,13 +91,17 @@
} }
.w3pn-event-item { .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 { .w3pn-event-item .header-base:hover {
@apply px-4 py-3 cursor-pointer; @apply bg-[#0f0f0f]/30;
} }
/*.w3pn-event-item .event-header {
@apply ;
}*/
.w3pn-event-item .detail { .w3pn-event-item .detail {
@apply bg-[#0f0f0f] px-4 py-3; @apply bg-[#0f0f0f] px-4 py-3;
} }