From 3707fade72c556aa0578781dc59eeb07780eed7b Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Thu, 1 Feb 2024 10:03:41 +0100
Subject: [PATCH 1/4] [feature] redesigned post teaser date info

---
 .../DateTimeRange/DateTimeRange.vue           | 19 +++++-----
 webapp/components/PostTeaser/PostTeaser.vue   | 38 ++++++++++++++-----
 webapp/components/UserTeaser/UserTeaser.vue   |  7 ++--
 3 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/webapp/components/DateTimeRange/DateTimeRange.vue b/webapp/components/DateTimeRange/DateTimeRange.vue
index de9b442c5..726eb1823 100644
--- a/webapp/components/DateTimeRange/DateTimeRange.vue
+++ b/webapp/components/DateTimeRange/DateTimeRange.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-text class="date-time-range" align="left" color="soft" :size="size">
-    <div>
+    <div class="date-time-row">
       <div>
         <base-icon name="calendar" data-test="calendar" />
         {{ getStartDateString }}
@@ -14,8 +14,8 @@
       </div>
     </div>
     <template v-if="!isSameDayLocal">
-      &nbsp;&mdash;&nbsp;
-      <div>
+      <base-icon name="arrow-down" />
+      <div class="ds-flex date-time-row">
         <div>
           <base-icon name="calendar" data-test="calendar" />
           {{ getEndDateString }}
@@ -69,11 +69,7 @@ export default {
       return !this.endDateAsDate || isSameYear(this.endDateAsDate, this.startDateAsDate)
     },
     getStartDateString() {
-      let startDateFormat = this.$t('components.dateTimeRange.yearMonthDay')
-      if (!this.isSameDayLocal && this.isSameYearLocal) {
-        startDateFormat = this.$t('components.dateTimeRange.monthDay')
-      }
-      return format(this.startDateAsDate, startDateFormat)
+      return format(this.startDateAsDate, this.$t('components.dateTimeRange.yearMonthDay'))
     },
     getStartTimeString() {
       return format(new Date(this.startDate), this.$t('components.dateTimeRange.hourMinute'))
@@ -95,7 +91,12 @@ export default {
 <style lang="scss">
 .date-time-range {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 2px;
+
+  .date-time-row {
+    display: flex;
+    gap: 10px;
+  }
 }
 </style>
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index d852d9e23..7a8fe8c35 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -16,7 +16,8 @@
       </template>
       <client-only>
         <div class="post-user-row">
-          <user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" />
+          <!-- <user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" /> -->
+          <user-teaser :user="post.author" :group="post.group" />
           <hc-ribbon
             :class="[isPinned ? '--pinned' : '', post.image ? 'post-ribbon-w-img' : 'post-ribbon']"
             :text="ribbonText"
@@ -32,14 +33,14 @@
       >
         <location-teaser
           class="event-info"
-          size="small"
+          size="base"
           :venue="post.eventVenue"
           :locationName="post.eventLocationName"
           :isOnline="post.eventIsOnline"
         />
         <date-time-range
           class="event-info"
-          size="small"
+          size="base"
           :startDate="post.eventStart"
           :endDate="post.eventEnd"
         />
@@ -98,6 +99,12 @@
           />
         </client-only>
       </footer>
+      <div class="date-row">
+        <span class="text">
+          <relative-date-time :date-time="post.createdAt" />
+          <slot name="dateTime"></slot>
+        </span>
+      </div>
     </base-card>
   </nuxt-link>
 </template>
@@ -109,6 +116,7 @@ import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import DateTimeRange from '~/components/DateTimeRange/DateTimeRange'
 import HcRibbon from '~/components/Ribbon'
 import LocationTeaser from '~/components/LocationTeaser/LocationTeaser'
+import RelativeDateTime from '~/components/RelativeDateTime'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import { mapGetters } from 'vuex'
 import PostMutations from '~/graphql/PostMutations'
@@ -123,6 +131,7 @@ export default {
     DateTimeRange,
     HcRibbon,
     LocationTeaser,
+    RelativeDateTime,
     UserTeaser,
   },
   props: {
@@ -251,6 +260,7 @@ export default {
   flex-direction: column;
   overflow: visible;
   height: 100%;
+  padding-bottom: $space-x-small;
 
   > .hero-image {
     border-top-left-radius: 5px;
@@ -266,12 +276,6 @@ export default {
     margin-bottom: $space-small;
   }
 
-  & .event-info {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
   > .footer {
     display: flex;
     justify-content: space-between;
@@ -301,5 +305,21 @@ export default {
   .user-teaser {
     margin-bottom: $space-small;
   }
+  > .date-row {
+    display: flex;
+    justify-content: end;
+    margin-top: $space-small;
+    > .text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: $text-color-soft;
+      font-size: $font-size-small;
+
+      > .ds-text {
+        display: inline;
+      }
+    }
+  }
 }
 </style>
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index a82b91039..d4e70b653 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -14,12 +14,12 @@
           <nuxt-link v-if="linkToProfile" :to="userLink">
             <span class="text">
               <span class="slug">{{ userSlug }}</span>
-              <span v-if="!userOnly" class="name">{{ userName }}</span>
+              <span class="name">{{ userName }}</span>
             </span>
           </nuxt-link>
           <span v-else class="text">
             <span class="slug">{{ userSlug }}</span>
-            <span v-if="!userOnly" class="name">{{ userName }}</span>
+            <span class="name">{{ userName }}</span>
           </span>
           <span v-if="wide">&nbsp;</span>
           <span v-if="group">
@@ -34,12 +34,11 @@
             </nuxt-link>
           </span>
         </div>
-        <span v-if="!userOnly" class="text">
+        <span v-if="!userOnly && dateTime" class="text">
           <base-icon name="clock" />
           <relative-date-time :date-time="dateTime" />
           <slot name="dateTime"></slot>
         </span>
-        <span v-else class="text">{{ userName }}</span>
       </div>
     </div>
   </div>

From 15786d48d1d80aba26c3b98336f2afe83bae219d Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Thu, 1 Feb 2024 11:56:55 +0100
Subject: [PATCH 2/4] fixed css warning

---
 webapp/components/PostTeaser/PostTeaser.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 7a8fe8c35..7c5989841 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -307,7 +307,7 @@ export default {
   }
   > .date-row {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     margin-top: $space-small;
     > .text {
       overflow: hidden;

From d70fd979fb52f29dd6b1030d259512e96c5b941c Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Thu, 1 Feb 2024 11:57:13 +0100
Subject: [PATCH 3/4] fixed event info layout

---
 webapp/pages/post/_id/_slug/index.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 884ddb6c2..1e9622c13 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -405,12 +405,6 @@ export default {
     filter: blur($blur-radius);
   }
 
-  & .event-info {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
   .blur-toggle {
     position: absolute;
     bottom: 0;

From d8ceca17da9d93c19b8a57640a2ce986931593c2 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Thu, 1 Feb 2024 15:48:42 +0100
Subject: [PATCH 4/4] fixed issue in postteaser

---
 webapp/components/PostTeaser/PostTeaser.vue | 55 +++++++++++----------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 7c5989841..68e3dae19 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -16,7 +16,6 @@
       </template>
       <client-only>
         <div class="post-user-row">
-          <!-- <user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" /> -->
           <user-teaser :user="post.author" :group="post.group" />
           <hc-ribbon
             :class="[isPinned ? '--pinned' : '', post.image ? 'post-ribbon-w-img' : 'post-ribbon']"
@@ -26,25 +25,27 @@
         </div>
       </client-only>
       <h2 class="title hyphenate-text">{{ post.title }}</h2>
-      <ds-space
-        v-if="post && post.postType[0] === 'Event'"
-        margin-bottom="small"
-        style="padding: 5px"
-      >
-        <location-teaser
-          class="event-info"
-          size="base"
-          :venue="post.eventVenue"
-          :locationName="post.eventLocationName"
-          :isOnline="post.eventIsOnline"
-        />
-        <date-time-range
-          class="event-info"
-          size="base"
-          :startDate="post.eventStart"
-          :endDate="post.eventEnd"
-        />
-      </ds-space>
+      <client-only>
+        <ds-space
+          v-if="post && post.postType[0] === 'Event'"
+          margin-bottom="small"
+          style="padding: 5px"
+        >
+          <location-teaser
+            class="event-info"
+            size="base"
+            :venue="post.eventVenue"
+            :locationName="post.eventLocationName"
+            :isOnline="post.eventIsOnline"
+          />
+          <date-time-range
+            class="event-info"
+            size="base"
+            :startDate="post.eventStart"
+            :endDate="post.eventEnd"
+          />
+        </ds-space>
+      </client-only>
       <!-- TODO: replace editor content with tiptap render view -->
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="content hyphenate-text" v-html="excerpt" />
@@ -99,12 +100,14 @@
           />
         </client-only>
       </footer>
-      <div class="date-row">
-        <span class="text">
-          <relative-date-time :date-time="post.createdAt" />
-          <slot name="dateTime"></slot>
-        </span>
-      </div>
+      <client-only>
+        <div class="date-row" v-if="post.createdAt">
+          <span class="text">
+            <relative-date-time :date-time="post.createdAt" />
+            <slot name="dateTime"></slot>
+          </span>
+        </div>
+      </client-only>
     </base-card>
   </nuxt-link>
 </template>