diff --git a/Dockerfile b/Dockerfile index 525f25b..5630331 100644 --- a/Dockerfile +++ b/Dockerfile @@ -2,7 +2,7 @@ # SPDX-FileCopyrightText: © 2025 Hornwitser # SPDX-License-Identifier: AGPL-3.0-or-later # Based on Next.js's docker image example -FROM node:22 AS base +FROM node:22-slim AS base # Install dependencies only when needed FROM base AS deps diff --git a/assets/global.css b/assets/global.css index 5ac8620..3d4e0c0 100644 --- a/assets/global.css +++ b/assets/global.css @@ -83,3 +83,7 @@ label>* { label + label { margin-block-start: 0.5rem; } + +.preWrap { + white-space: pre-wrap; +} diff --git a/components/CardEvent.vue b/components/CardEvent.vue index 6a4d5a0..baca351 100644 --- a/components/CardEvent.vue +++ b/components/CardEvent.vue @@ -8,7 +8,15 @@

Host: {{ event.host }}

-

{{ event.description ?? "No description provided" }}

+
+
+ ⚠️ +
+

+ {{ event.notice }} +

+
+

{{ event.description ?? "No description provided" }}

{{ event.interested }} interested

@@ -79,6 +87,22 @@ async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) { margin-block-start: 0.5rem; } +.notice { + display: flex; + width: fit-content; + gap: 0.5rem; + padding: 0.5rem; + margin-block: 0.5rem; + border-radius: 0.25rem; + border: 1px solid color-mix(in oklab, CanvasText, orange 50%); + background-color: color-mix(in oklab, Canvas, orange 40%); +} +.noticeIcon { + flex: 0 0 auto; + align-self: center; + font-size: 1rem; +} + button { padding-inline: 0.2em; } diff --git a/components/CardEventSlot.vue b/components/CardEventSlot.vue index 7a15a5e..3544be2 100644 --- a/components/CardEventSlot.vue +++ b/components/CardEventSlot.vue @@ -13,7 +13,15 @@

Host: {{ event.host }}

-

{{ event?.description ?? "No description provided" }}

+
+
+ ⚠️ +
+

+ {{ event.notice }} +

+
+

{{ event?.description ?? "No description provided" }}

At {{ locations.map(location => location?.name ?? "unknown").join(" + ") }}

@@ -62,6 +70,22 @@ function formatTime(time: DateTime) { margin-block-start: 0.5rem; } +.notice { + display: flex; + width: fit-content; + gap: 0.5rem; + padding: 0.5rem; + margin-block: 0.5rem; + border-radius: 0.25rem; + border: 1px solid color-mix(in oklab, CanvasText, orange 50%); + background-color: color-mix(in oklab, Canvas, orange 40%); +} +.noticeIcon { + flex: 0 0 auto; + align-self: center; + font-size: 1rem; +} + button { padding-inline: 0.2em; } diff --git a/components/CardShift.vue b/components/CardShift.vue index ac5c4e9..333be36 100644 --- a/components/CardShift.vue +++ b/components/CardShift.vue @@ -5,7 +5,7 @@ @@ -33,20 +38,23 @@ defineProps<{ grid-template-columns: 5rem 1fr; column-gap: 1rem; } -.removed { +:is(.removed, .added) { + display: flex; grid-column: 2 / 2; + white-space: pre-wrap; +} +:is(.removed, .added) .symbol { + display: block; + font-family: monospace; + flex: 0 0 auto; +} +.removed { color: color-mix(in srgb, CanvasText, red 40%); } -.removed::before { - content: "- "; - font-family: monospace; +.removed .content{ + text-decoration-line: line-through; } .added { - grid-column: 2 / 2; color: color-mix(in srgb, CanvasText, green 40%); } -.added::before { - content: "+ "; - font-family: monospace; -} diff --git a/components/TableScheduleEventSlots.vue b/components/TableScheduleEventSlots.vue index 5661865..9699f79 100644 --- a/components/TableScheduleEventSlots.vue +++ b/components/TableScheduleEventSlots.vue @@ -318,6 +318,7 @@ function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) { start, end, new Set(newEventLocationIds.value), + false, new Set(), 0, ); diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue index 84871a9..ab66e81 100644 --- a/components/TableScheduleEvents.vue +++ b/components/TableScheduleEvents.vue @@ -10,6 +10,7 @@ id name host + notice description p s @@ -39,11 +40,18 @@ > - + + +