diff --git a/src/components/CountdownItem.ts b/src/components/CountdownItem.ts index 0317dbe..a609272 100644 --- a/src/components/CountdownItem.ts +++ b/src/components/CountdownItem.ts @@ -2,6 +2,11 @@ import { div, h3, p, reusable, span, strong } from '@dolanske/cascade' import type { FormattedEvent } from '../types' export const CountdownItem = reusable('li', (ctx, props: FormattedEvent) => { + // We're in minus + if (props.untilDate.includes('-')) { + ctx.class('minus') + } + ctx.nest([ h3(props.title), p(props.description).if(props.description), diff --git a/src/components/Sidebar.ts b/src/components/Sidebar.ts index e84114e..ffa3623 100644 --- a/src/components/Sidebar.ts +++ b/src/components/Sidebar.ts @@ -9,14 +9,14 @@ interface Props { // I don't feel like fixing my libraries rn so I'll do it the old fashioned way function setActiveHash(e: any) { const upcoming = document.querySelector('#upcoming') - const past = document.querySelector('#previous') + const past = document.querySelector('#past') const id = e.target?.id if (id === 'upcoming') { upcoming?.classList.add('active') past?.classList.remove('active') } - else if (id === 'previous') { + else if (id === 'past') { upcoming?.classList.remove('active') past?.classList.add('active') } @@ -35,9 +35,9 @@ export const Sidebar = div().setup((ctx, props: Props) => { .class({ active: ['#upcoming', ''].includes(window.location.hash) }) .id('upcoming') .click(setActiveHash), - button('Previous') - .class({ active: window.location.hash === '#previous' }) - .id('previous') + button('Past') + .class({ active: window.location.hash === '#past' }) + .id('past') .click(setActiveHash), div().style('flex', 1), p().html(`Collection of upcoming events in the hivecom community. If you want your event added, please create an issue.

Designed and implemented by dolanske on Wednesday, in 2024.`), diff --git a/src/main.ts b/src/main.ts index 5a74102..7b52839 100644 --- a/src/main.ts +++ b/src/main.ts @@ -28,7 +28,7 @@ const formattedEvents = ref([]) // ---------------------------------------------------------------------------- function sortAndFormatDataset() { switch (window.location.hash) { - case '#previous': { + case '#past': { formattedEvents.value = formatEventData( events .filter(item => dayjs().isAfter(dayjs(item.date, INPUT_FORMAT))) diff --git a/src/style/index.css b/src/style/index.css index c2c0ed8..5bb61b6 100644 --- a/src/style/index.css +++ b/src/style/index.css @@ -154,6 +154,13 @@ html { height: 33.33333333vh; min-height: 292px; + &.minus { + .countdown span { + visibility: hidden; + /* display: none !important; */ + } + } + &:first-child { h3 { &:after {