aboutsummaryrefslogtreecommitdiffstats
path: root/web/components/EventDetail.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2025-08-14 18:07:12 +0100
committerLeonardo Bishop <me@leonardobishop.com>2025-08-14 18:07:12 +0100
commit4697556cac819c47d068819b9fc9c3b4ea84e279 (patch)
treeb832d8fc6b643a8b9d0eeca35c1268e1649da731 /web/components/EventDetail.vue
parentdd49c9205bb04844b686b9c3396c40eb49d25826 (diff)
Merge confplanner-web and replace fiber with native net/http
Diffstat (limited to 'web/components/EventDetail.vue')
-rw-r--r--web/components/EventDetail.vue113
1 files changed, 113 insertions, 0 deletions
diff --git a/web/components/EventDetail.vue b/web/components/EventDetail.vue
new file mode 100644
index 0000000..b4f7bd9
--- /dev/null
+++ b/web/components/EventDetail.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { format } from 'date-fns';
+import { type Event as ScheduledEvent } from '~/stores/schedule';
+
+const { event } = defineProps<{
+ event: ScheduledEvent;
+}>();
+
+const getHostname = (url: string) => new URL(url).hostname;
+
+</script>
+
+<template>
+ <div class="event">
+ <div class="event-details">
+ <span class="event-info">
+ {{ format(event.start, "eeee kk:mm") }} - {{ format(event.end, "kk:mm") }}, {{ event.room }}
+ </span>
+ <span class="event-title">{{ event.title }}</span>
+ <span class="event-speaker">{{ event.persons.map(p => p.name).join(", ") }}</span>
+ </div>
+
+ <div class="event-abstract" v-html="event.abstract" />
+
+ <div v-if="event.links.length > 0 || event.attachments.length > 0" class="event-supplementary">
+ <div class="event-links" v-if="event.links.length > 0">
+ <span class="event-links-header">Links</span>
+ <ul>
+ <li v-for="link in event.links" :key="link.href" class="event-link">
+ <a :href="link.href" target="_blank">{{ link.name }}</a>
+ </li>
+ </ul>
+ </div>
+
+ <div class="event-attachments" v-if="event.attachments.length > 0">
+ <span class="event-attachments-header">Attachments</span>
+ <ul>
+ <li v-for="attachment in event.attachments" :key="attachment.href" class="event-attachment">
+ <a :href="attachment.href" target="_blank">{{ attachment.name }}</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div>
+ <span class="event-track"><NuxtLink :to="'/tracks/' + event.track.slug">{{ event.track.name }}</NuxtLink> &bull;</span> <a v-if="event.url" class="event-url" :href="event.url" target="_blank">view on {{ getHostname(event.url)}}</a>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.event {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.event-details {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ flex-direction: column;
+ line-height: 1.3;
+}
+
+.event-info {
+ font-size: var(--text-normal);
+ color: var(--color-text);
+ margin: 0;
+}
+
+.event-title {
+ font-size: var(--text-larger);
+ font-weight: 600;
+ margin: 0;
+}
+
+.event-supplementary {
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+}
+
+.event-links-header, .event-attachments-header, .event-track-header {
+ font-weight: 600;
+}
+
+.event-speaker {
+ font-size: var(--text-small);
+ color: var(--color-text-muted);
+}
+
+.event-track, .event-url {
+ font-size: var(--text-small);
+}
+
+.event-button {
+ background: none;
+ border: none;
+ color: var(--color-primary);
+ cursor: pointer;
+ outline: none;
+}
+
+.event-button:hover {
+ color: var(--color-primary-dark);
+}
+
+.event-icon {
+ height: 1.5rem;
+ width: 1.5rem;
+}
+</style> \ No newline at end of file