Merge pull request #6978 from Ocelot-Social-Community/6976-optimize-post-teaser-date

feat(webapp): redesign post teaser date

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>

webapp/components/PostTeaser/PostTeaser.vue

@@ -16,7 +16,7 @@
       </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']"
             :text="ribbonText"
@@ -25,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="small"
-          :venue="post.eventVenue"
-          :locationName="post.eventLocationName"
-          :isOnline="post.eventIsOnline"
-        />
-        <date-time-range
-          class="event-info"
-          size="small"
-          :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" />
@@ -98,6 +100,14 @@
           />
         </client-only>
       </footer>
+      <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>
@@ -109,6 +119,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 +134,7 @@ export default {
     DateTimeRange,
     HcRibbon,
     LocationTeaser,
+    RelativeDateTime,
     UserTeaser,
   },
   props: {
@@ -251,6 +263,7 @@ export default {
   flex-direction: column;
   overflow: visible;
   height: 100%;
+  padding-bottom: $space-x-small;
 
   > .hero-image {
     border-top-left-radius: 5px;
@@ -266,12 +279,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 +308,21 @@ export default {
   .user-teaser {
     margin-bottom: $space-small;
   }
+  > .date-row {
+    display: flex;
+    justify-content: flex-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>

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>

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;