Add UI to edit and display event notices

Add a warning like display of event notices to the event card and the
event slot card and indicate in the timesheet that an event has a
notice.  Also includes the input controls needed to edit the notice.
This commit is contained in:
Hornwitser 2025-09-06 19:25:20 +02:00
parent adeef4f629
commit 5898a46a1b
5 changed files with 70 additions and 2 deletions

View file

@ -8,6 +8,14 @@
<p v-if=event.host>
Host: {{ event.host }}
</p>
<div v-if="event.notice" class="notice preWrap">
<div class="noticeIcon">
</div>
<p>
{{ event.notice }}
</p>
</div>
<p class="preWrap">{{ event.description ?? "No description provided" }}</p>
<p v-if="event.interested">
{{ 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;
}