From 5d507ecf6951da7a91e3506038e76ac36d077c71 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 31 Oct 2022 18:05:59 +0100
Subject: [PATCH] Event view improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Address/AddressInfo.vue     |  4 -
 .../components/Event/EventActionSection.vue   | 31 +-------
 js/src/views/Event/EventView.vue              | 78 ++++++++++++++++---
 3 files changed, 67 insertions(+), 46 deletions(-)

diff --git a/js/src/components/Address/AddressInfo.vue b/js/src/components/Address/AddressInfo.vue
index 7d6456d3e..392560df6 100644
--- a/js/src/components/Address/AddressInfo.vue
+++ b/js/src/components/Address/AddressInfo.vue
@@ -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;
   }
 
diff --git a/js/src/components/Event/EventActionSection.vue b/js/src/components/Event/EventActionSection.vue
index fbf21628b..d7599b89c 100644
--- a/js/src/components/Event/EventActionSection.vue
+++ b/js/src/components/Event/EventActionSection.vue
@@ -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";
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index be93315df..b233ef9d0 100755
--- a/js/src/views/Event/EventView.vue
+++ b/js/src/views/Event/EventView.vue
@@ -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 }],