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;