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 {