Update language, improve past styling

Mavulp · Jul 29, 2024 · 82ec095 · 82ec095
1 parent 1398b10
commit 82ec095
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git 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
@@ -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 <a href="https://github.com/Mavulp/countdown/issues/new?assignees=dolanske&labels=&projects=&template=new-event.md&title=%5BRequest%5D+New+event" tarrget="_blank">create an issue</a>. <br /><br /> Designed and implemented by dolanske on Wednesday, in 2024.`),

diff --git a/src/main.ts b/src/main.ts
@@ -28,7 +28,7 @@ const formattedEvents = ref<FormattedEvent[]>([])
 // ----------------------------------------------------------------------------
 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
@@ -154,6 +154,13 @@ html {
       height: 33.33333333vh;
       min-height: 292px;
 
+      &.minus {
+        .countdown span {
+          visibility: hidden;
+          /* display: none !important; */
+        }
+      }
+
       &:first-child {
         h3 {
           &:after {