diff --git a/components/CardEvent.vue b/components/CardEvent.vue index 4082abc..baca351 100644 --- a/components/CardEvent.vue +++ b/components/CardEvent.vue @@ -8,6 +8,14 @@

Host: {{ event.host }}

+
+
+ ⚠️ +
+

+ {{ 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 baa2e3a..3544be2 100644 --- a/components/CardEventSlot.vue +++ b/components/CardEventSlot.vue @@ -13,6 +13,14 @@

Host: {{ event.host }}

+
+
+ ⚠️ +
+

+ {{ 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/TableScheduleEvents.vue b/components/TableScheduleEvents.vue index 7555bf3..ab66e81 100644 --- a/components/TableScheduleEvents.vue +++ b/components/TableScheduleEvents.vue @@ -10,6 +10,7 @@ id name host + notice description p s @@ -38,6 +39,13 @@ v-model="event.host" > + +