Improve post & events cards, homepage and my events page

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Post/MultiPostListItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="posts-wrapper">
+    <post-list-item
+      v-for="post in posts"
+      :key="post.id"
+      :post="post"
+      :isCurrentActorMember="isCurrentActorMember"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { IPost } from "@/types/post.model";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import PostListItem from "./PostListItem.vue";
+
+@Component({
+  components: {
+    PostListItem,
+  },
+})
+export default class MultiPostListItem extends Vue {
+  @Prop({ type: Array as PropType<IPost[]>, required: true }) posts!: IPost[];
+  @Prop({ required: false, type: Boolean, default: false })
+  isCurrentActorMember!: boolean;
+}
+</script>
+<style lang="scss" scoped>
+.posts-wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template: 1fr;
+}
+</style>

js/src/components/Post/PostElementItem.vue

@@ -1,134 +0,0 @@
-<template>
-  <router-link
-    class="post-minimalist-card-wrapper"
-    :to="{ name: RouteName.POST, params: { slug: post.slug } }"
-  >
-    <div class="title-info-wrapper">
-      <div class="media">
-        <div class="media-left">
-          <figure class="image is-96x96" v-if="post.picture">
-            <img :src="post.picture.url" alt="" />
-          </figure>
-          <b-icon v-else size="is-large" icon="post" />
-        </div>
-        <div class="media-content">
-          <p class="post-minimalist-title">{{ post.title }}</p>
-          <div class="metadata">
-            <b-tag type="is-warning" size="is-small" v-if="post.draft">{{
-              $t("Draft")
-            }}</b-tag>
-            <small
-              v-if="
-                post.visibility === PostVisibility.PUBLIC &&
-                isCurrentActorMember
-              "
-              class="has-text-grey-dark"
-            >
-              <b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small
-            >
-            <small
-              v-else-if="post.visibility === PostVisibility.UNLISTED"
-              class="has-text-grey-dark"
-            >
-              <b-icon icon="link" size="is-small" />{{
-                $t("Accessible through link")
-              }}</small
-            >
-            <small
-              v-else-if="post.visibility === PostVisibility.PRIVATE"
-              class="has-text-grey-dark"
-            >
-              <b-icon icon="lock" size="is-small" />{{
-                $t("Accessible only to members", {
-                  group: post.attributedTo.name,
-                })
-              }}</small
-            >
-            <small class="has-text-grey-dark">{{
-              $options.filters.formatDateTimeString(
-                new Date(post.insertedAt),
-                undefined,
-                false
-              )
-            }}</small>
-            <small class="has-text-grey-dark" v-if="isCurrentActorMember">{{
-              $t("Created by {username}", {
-                username: `@${usernameWithDomain(post.author)}`,
-              })
-            }}</small>
-          </div>
-        </div>
-      </div>
-    </div>
-  </router-link>
-</template>
-<script lang="ts">
-import { usernameWithDomain } from "@/types/actor";
-import { PostVisibility } from "@/types/enums";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import { IPost } from "../../types/post.model";
-
-@Component
-export default class PostElementItem extends Vue {
-  @Prop({ required: true, type: Object }) post!: IPost;
-
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  PostVisibility = PostVisibility;
-}
-</script>
-<style lang="scss" scoped>
-.post-minimalist-card-wrapper {
-  text-decoration: none;
-  display: flex;
-  width: 100%;
-  color: initial;
-  border-bottom: 1px solid #e9e9e9;
-  align-items: center;
-
-  .title-info-wrapper {
-    flex: 2;
-
-    .post-minimalist-title {
-      color: #3c376e;
-      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-        serif;
-      font-size: 1rem;
-      font-weight: 700;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-    }
-
-    .media .media-left {
-      & > span.icon {
-        height: 96px;
-        width: 96px;
-      }
-      & > figure.image > img {
-        object-fit: cover;
-        height: 100%;
-        object-position: center;
-        width: 100%;
-      }
-    }
-
-    .metadata {
-      & > span.tag {
-        margin-right: 5px;
-      }
-      & > small:not(:last-child):after {
-        content: "·";
-        padding: 0 5px;
-      }
-    }
-  }
-}
-</style>

js/src/components/Post/PostListItem.vue

@@ -3,53 +3,116 @@
     class="post-minimalist-card-wrapper"
     :to="{ name: RouteName.POST, params: { slug: post.slug } }"
   >
-    <div class="title-info-wrapper">
+    <lazy-image-wrapper
+      :picture="post.picture"
+      :rounded="true"
+      style="height: 120px"
+    />
+    <div class="title-info-wrapper has-text-grey-dark">
       <p class="post-minimalist-title">{{ post.title }}</p>
-      <small class="has-text-grey-dark">{{
-        formatDistanceToNow(new Date(post.publishAt || post.insertedAt), {
-          locale: $dateFnsLocale,
-          addSuffix: true,
-        })
-      }}</small>
+      <p class="post-publication-date">
+        <b-icon icon="clock" />
+        <span class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
+          publishedAt | formatDateTimeString(undefined, false, "short")
+        }}</span>
+        <span v-else>{{
+          formatDistanceToNow(publishedAt, {
+            locale: $dateFnsLocale,
+            addSuffix: true,
+          })
+        }}</span>
+      </p>
+      <b-taglist v-if="post.tags.length > 0" style="display: inline">
+        <b-icon icon="tag" />
+        <b-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</b-tag>
+      </b-taglist>
+      <p class="post-publisher has-text-grey-dark" v-if="isCurrentActorMember">
+        <b-icon icon="account-edit" />
+        <i18n path="Published by {name}">
+          <b class="has-text-weight-medium" slot="name">{{
+            displayName(post.author)
+          }}</b>
+        </i18n>
+      </p>
     </div>
   </router-link>
 </template>
 <script lang="ts">
-import { formatDistanceToNow } from "date-fns";
+import { formatDistanceToNow, subWeeks, isBefore } from "date-fns";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import RouteName from "../../router/name";
 import { IPost } from "../../types/post.model";
+import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
+import { displayName } from "@/types/actor";
 
-@Component
+@Component({
+  components: {
+    LazyImageWrapper,
+  },
+})
 export default class PostListItem extends Vue {
   @Prop({ required: true, type: Object }) post!: IPost;
+  @Prop({ required: false, type: Boolean, default: false })
+  isCurrentActorMember!: boolean;
 
   RouteName = RouteName;
 
   formatDistanceToNow = formatDistanceToNow;
+
+  displayName = displayName;
+
+  get publishedAt(): Date {
+    return new Date((this.post.publishAt || this.post.insertedAt) as Date);
+  }
+
+  get isBeforeLastWeek(): boolean {
+    return isBefore(this.publishedAt, subWeeks(new Date(), 1));
+  }
 }
 </script>
 <style lang="scss" scoped>
+@import "~bulma/sass/utilities/mixins.sass";
+
 .post-minimalist-card-wrapper {
+  display: grid;
+  grid-gap: 5px 10px;
+  grid-template-areas: "preview" "body";
   text-decoration: none;
-  display: flex;
   width: 100%;
   color: initial;
-  border-bottom: 1px solid #e9e9e9;
-  align-items: center;
+
+  @include desktop {
+    grid-template-columns: 200px 3fr;
+    grid-template-areas: "preview body";
+  }
 
   .title-info-wrapper {
-    flex: 2;
-
     .post-minimalist-title {
       color: #3c376e;
-      font-family: Roboto, Helvetica, Arial, serif;
-      font-size: 16px;
-      font-weight: 500;
+      font-size: 18px;
+      line-height: 24px;
+      font-weight: 700;
       overflow: hidden;
       display: -webkit-box;
       -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
+      -webkit-line-clamp: 3;
+    }
+  }
+  ::v-deep .icon {
+    vertical-align: middle;
+    margin-right: 5px;
+  }
+
+  ::v-deep .tags {
+    display: inline;
+
+    span.tag {
+      max-width: 200px;
+
+      & > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }

js/src/components/Post/SharePostModal.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">{{ $t("Share this post") }}</p>
+    </header>
+
+    <section class="modal-card-body is-flex" v-if="post">
+      <div class="container has-text-centered">
+        <b-notification
+          type="is-warning"
+          v-if="post.visibility !== PostVisibility.PUBLIC"
+          :closable="false"
+        >
+          {{
+            $t(
+              "This post is accessible only through it's link. Be careful where you post this link."
+            )
+          }}
+        </b-notification>
+        <b-field :label="$t('Post URL')" label-for="post-url-text">
+          <b-input
+            id="post-url-text"
+            ref="postURLInput"
+            :value="postURL"
+            expanded
+          />
+          <p class="control">
+            <b-tooltip
+              :label="$t('URL copied to clipboard')"
+              :active="showCopiedTooltip"
+              always
+              type="is-success"
+              position="is-left"
+            >
+              <b-button
+                type="is-primary"
+                icon-right="content-paste"
+                native-type="button"
+                @click="copyURL"
+                @keyup.enter="copyURL"
+                :title="$t('Copy URL to clipboard')"
+              />
+            </b-tooltip>
+          </p>
+        </b-field>
+        <div>
+          <a
+            :href="twitterShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Twitter"
+            ><b-icon icon="twitter" size="is-large" type="is-primary"
+          /></a>
+          <a
+            :href="mastodonShareUrl"
+            class="mastodon"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Mastodon"
+          >
+            <mastodon-logo />
+          </a>
+          <a
+            :href="facebookShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Facebook"
+            ><b-icon icon="facebook" size="is-large" type="is-primary"
+          /></a>
+          <a
+            :href="whatsAppShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="WhatsApp"
+            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
+          /></a>
+          <a
+            :href="telegramShareUrl"
+            class="telegram"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Telegram"
+          >
+            <telegram-logo />
+          </a>
+          <a
+            :href="linkedInShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="LinkedIn"
+            ><b-icon icon="linkedin" size="is-large" type="is-primary"
+          /></a>
+          <a
+            :href="diasporaShareUrl"
+            class="diaspora"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Diaspora"
+          >
+            <diaspora-logo />
+          </a>
+          <a
+            :href="emailShareUrl"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Email"
+            ><b-icon icon="email" size="is-large" type="is-primary"
+          /></a>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Ref } from "vue-property-decorator";
+import { PostVisibility } from "@/types/enums";
+import { IPost } from "../../types/post.model";
+import DiasporaLogo from "../Share/DiasporaLogo.vue";
+import MastodonLogo from "../Share/MastodonLogo.vue";
+import TelegramLogo from "../Share/TelegramLogo.vue";
+import { PropType } from "vue";
+import RouteName from "@/router/name";
+
+@Component({
+  components: {
+    DiasporaLogo,
+    MastodonLogo,
+    TelegramLogo,
+  },
+})
+export default class SharePostModal extends Vue {
+  @Prop({ type: Object as PropType<IPost>, required: true }) post!: IPost;
+
+  @Ref("postURLInput") readonly postURLInput!: any;
+
+  PostVisibility = PostVisibility;
+
+  RouteName = RouteName;
+
+  showCopiedTooltip = false;
+
+  get twitterShareUrl(): string {
+    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
+      this.postURL
+    )}&text=${this.post.title}`;
+  }
+
+  get facebookShareUrl(): string {
+    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+      this.postURL
+    )}`;
+  }
+
+  get linkedInShareUrl(): string {
+    return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
+      this.postURL
+    )}&title=${this.post.title}`;
+  }
+
+  get whatsAppShareUrl(): string {
+    return `https://wa.me/?text=${encodeURIComponent(this.basicTextToEncode)}`;
+  }
+
+  get telegramShareUrl(): string {
+    return `https://t.me/share/url?url=${encodeURIComponent(
+      this.postURL
+    )}&text=${encodeURIComponent(this.post.title)}`;
+  }
+
+  get emailShareUrl(): string {
+    return `mailto:?to=&body=${this.postURL}&subject=${this.post.title}`;
+  }
+
+  get diasporaShareUrl(): string {
+    return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
+      this.post.title
+    )}&url=${encodeURIComponent(this.postURL)}`;
+  }
+
+  get mastodonShareUrl(): string {
+    return `https://toot.karamoff.dev/?text=${encodeURIComponent(
+      this.basicTextToEncode
+    )}`;
+  }
+
+  get basicTextToEncode(): string {
+    return `${this.post.title}\r\n${this.postURL}`;
+  }
+
+  get postURL(): string {
+    if (this.post.id) {
+      return this.$router.resolve({
+        name: RouteName.POST,
+        params: { id: this.post.id },
+      }).href;
+    }
+    return "";
+  }
+
+  copyURL(): void {
+    this.postURLInput.$refs.input.select();
+    document.execCommand("copy");
+    this.showCopiedTooltip = true;
+    setTimeout(() => {
+      this.showCopiedTooltip = false;
+    }, 2000);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.diaspora,
+.mastodon,
+.telegram {
+  ::v-deep span svg {
+    width: 2.25rem;
+  }
+}
+</style>