Event view improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-31 18:05:59 +01:00
parent 1592ae8fe9
commit 5d507ecf69
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 67 additions and 46 deletions

View file

@ -113,10 +113,6 @@ address {
span.addressDescription {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 0 auto;
min-width: 100%;
max-width: 4rem;
overflow: hidden;
}

View file

@ -15,27 +15,6 @@
@cancel-anonymous-participation="cancelAnonymousParticipation"
/>
<div class="flex flex-col">
<template v-if="!event?.draft">
<p
v-if="event?.visibility === EventVisibility.PUBLIC"
class="inline-flex gap-1"
>
<Earth />
{{ t("Public event") }}
</p>
<p
v-if="event?.visibility === EventVisibility.UNLISTED"
class="inline-flex gap-1"
>
<Link />
{{ t("Private event") }}
</p>
</template>
<template v-if="!event?.local && organizer?.domain">
<a :href="event?.url">
<tag>{{ organizer?.domain }}</tag>
</a>
</template>
<p class="inline-flex gap-1">
<TicketConfirmationOutline />
<router-link
@ -327,18 +306,10 @@ import { IEvent } from "@/types/event.model";
import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
import ReportModal from "@/components/Report/ReportModal.vue";
import IdentityPicker from "@/views/Account/IdentityPicker.vue";
import {
EventVisibility,
EventJoinOptions,
ParticipantRole,
MemberRole,
} from "@/types/enums";
import { EventJoinOptions, ParticipantRole, MemberRole } from "@/types/enums";
import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
import { computed, defineAsyncComponent, inject, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import Tag from "@/components/TagElement.vue";
import Earth from "vue-material-design-icons/Earth.vue";
import Link from "vue-material-design-icons/Link.vue";
import Flag from "vue-material-design-icons/Flag.vue";
import CalendarPlus from "vue-material-design-icons/CalendarPlus.vue";
import ContentDuplicate from "vue-material-design-icons/ContentDuplicate.vue";

View file

@ -3,14 +3,19 @@
<o-loading v-model:active="eventLoading" />
<div class="flex flex-col mb-3">
<event-banner :picture="event?.picture" />
<div class="intro-wrapper flex flex-col relative px-2 pb-2">
<div class="date-calendar-icon-wrapper" v-if="event?.beginsOn">
<date-calendar-icon :date="event.beginsOn.toString()" />
<div
class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-2 rounded"
>
<div class="date-calendar-icon-wrapper relative" v-if="event?.beginsOn">
<date-calendar-icon
:date="event.beginsOn.toString()"
class="absolute left-3 -top-16"
/>
</div>
<section class="intro" dir="auto">
<section class="intro px-2 pt-4" dir="auto">
<div class="flex flex-wrap gap-2">
<div class="flex-1">
<div class="flex-1 min-w-[300px]">
<h1
class="text-4xl font-bold m-0"
dir="auto"
@ -65,7 +70,7 @@
</popover-actor-card>
</span>
</div>
<div class="inline-flex items-center gap-1">
<div class="flex flex-wrap items-center gap-2 gap-y-4 mt-2 my-3">
<p v-if="event?.status !== EventStatus.CONFIRMED">
<tag
variant="warning"
@ -78,7 +83,28 @@
>{{ t("Event cancelled") }}</tag
>
</p>
<p class="flex gap-1 items-center" dir="auto">
<template v-if="!event?.draft">
<p
v-if="event?.visibility === EventVisibility.PUBLIC"
class="inline-flex gap-1"
>
<Earth />
{{ t("Public event") }}
</p>
<p
v-if="event?.visibility === EventVisibility.UNLISTED"
class="inline-flex gap-1"
>
<Link />
{{ t("Private event") }}
</p>
</template>
<template v-if="!event?.local && organizerDomain">
<a :href="event?.url">
<tag variant="info">{{ organizerDomain }}</tag>
</a>
</template>
<p class="flex flex-wrap gap-1 items-center" dir="auto">
<tag v-if="eventCategory" class="category" capitalize>{{
eventCategory
}}</tag>
@ -110,7 +136,9 @@
<div
class="rounded-lg dark:border-violet-title flex flex-wrap flex-col md:flex-row-reverse gap-4"
>
<aside class="rounded bg-white dark:bg-gray-600 shadow-md h-min">
<aside
class="rounded bg-white dark:bg-zinc-700 shadow-md h-min max-w-screen-sm"
>
<div class="sticky p-4">
<event-metadata-sidebar
v-if="event"
@ -132,7 +160,7 @@
<div
:lang="event?.language"
dir="auto"
class="description-content"
class="mt-4 prose md:prose-lg lg:prose-xl dark:prose-invert prose-h1:text-xl prose-h1:font-semibold prose-h2:text-lg prose-h3:text-base md:prose-h1:text-2xl md:prose-h1:font-semibold md:prose-h2:text-xl md:prose-h3:text-lg lg:prose-h1:text-2xl lg:prose-h1:font-semibold lg:prose-h2:text-xl lg:prose-h3:text-lg"
ref="eventDescriptionElement"
v-html="event.description"
/>
@ -151,7 +179,7 @@
ref="commentsObserver"
>
<a href="#comments">
<h2 class="text-xl" id="comments">{{ t("Comments") }}</h2>
<h2 class="text-2xl" id="comments">{{ t("Comments") }}</h2>
</a>
<comment-tree v-if="event && loadComments" :event="event" />
</section>
@ -189,13 +217,25 @@
</template>
<script lang="ts" setup>
import { EventStatus, ParticipantRole, RoutingType } from "@/types/enums";
import {
EventStatus,
ParticipantRole,
RoutingType,
EventVisibility,
} from "@/types/enums";
import {
EVENT_PERSON_PARTICIPATION,
// EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
} from "@/graphql/event";
import { displayName, IPerson, usernameWithDomain } from "@/types/actor";
import {
displayName,
IActor,
IPerson,
usernameWithDomain,
} from "@/types/actor";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import Earth from "vue-material-design-icons/Earth.vue";
import Link from "vue-material-design-icons/Link.vue";
import MultiCard from "@/components/Event/MultiCard.vue";
import RouteName from "@/router/name";
import CommentTree from "@/components/Comment/CommentTree.vue";
@ -493,6 +533,20 @@ const eventCategory = computed((): string | undefined => {
})?.label as string;
});
const organizer = computed((): IActor | null => {
if (event.value?.attributedTo?.id) {
return event.value.attributedTo;
}
if (event.value?.organizerActor) {
return event.value.organizerActor;
}
return null;
});
const organizerDomain = computed((): string | undefined => {
return organizer.value?.domain ?? undefined;
});
useHead({
title: computed(() => eventTitle.value ?? ""),
meta: [{ name: "description", content: eventDescription.value }],