Improve post & events cards, homepage and my events page

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-11-02 19:47:54 +01:00
parent 39f40a86f7
commit 4923c52f3b
51 changed files with 2057 additions and 1092 deletions
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@@ -12,18 +12,17 @@
 </docs>

 <template>
-  <time
+  <div
    class="datetime-container"
    :class="{ small }"
-    :datetime="dateObj.getUTCSeconds()"
    :style="`--small: ${smallStyle}`"
  >
    <div class="datetime-container-header" />
    <div class="datetime-container-content">
-      <span class="day">{{ day }}</span>
-      <span class="month">{{ month }}</span>
+      <time :datetime="dateObj.toISOString()" class="day">{{ day }}</time>
+      <time :datetime="dateObj.toISOString()" class="month">{{ month }}</time>
    </div>
-  </time>
+  </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
@@ -54,7 +53,7 @@ export default class DateCalendarIcon extends Vue {
 </script>

 <style lang="scss" scoped>
-time.datetime-container {
+div.datetime-container {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
@@ -76,7 +75,7 @@ time.datetime-container {
    height: calc(30px * var(--small));
  }

-  span {
+  time {
    display: block;
    font-weight: 600;
    color: $violet-3;
--- a/js/src/components/Event/EventAddress.vue
+++ b/js/src/components/Event/EventAddress.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    :title="
+      isDescriptionDifferentFromLocality
+        ? `${physicalAddress.description}, ${physicalAddress.locality}`
+        : physicalAddress.description
+    "
+  >
+    <b-icon icon="map-marker" />
+    <span v-if="isDescriptionDifferentFromLocality">
+      {{ physicalAddress.description }},
+      {{ physicalAddress.locality }}
+    </span>
+    <span v-else>
+      {{ physicalAddress.description }}
+    </span>
+  </div>
+</template>
+<script lang="ts">
+import { IAddress } from "@/types/address.model";
+import { PropType } from "vue";
+import { Prop, Vue, Component } from "vue-property-decorator";
+
+@Component
+export default class EventAddress extends Vue {
+  @Prop({ required: true, type: Object as PropType<IAddress> })
+  physicalAddress!: IAddress;
+
+  get isDescriptionDifferentFromLocality(): boolean {
+    return (
+      this.physicalAddress?.description !== this.physicalAddress?.locality &&
+      this.physicalAddress?.description !== undefined
+    );
+  }
+}
+</script>
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -56,24 +56,11 @@
              {{ organizerDisplayName(event) }}
            </span>
          </div>
-          <div
-            class="event-subtitle"
+          <event-address
            v-if="event.physicalAddress"
-            :title="
-              isDescriptionDifferentFromLocality
-                ? `${event.physicalAddress.description}, ${event.physicalAddress.locality}`
-                : event.physicalAddress.description
-            "
-          >
-            <b-icon icon="map-marker" />
-            <span v-if="isDescriptionDifferentFromLocality">
-              {{ event.physicalAddress.description }},
-              {{ event.physicalAddress.locality }}
-            </span>
-            <span v-else>
-              {{ event.physicalAddress.description }}
-            </span>
-          </div>
+            class="event-subtitle"
+            :physical-address="event.physicalAddress"
+          />
          <div
            class="event-subtitle"
            v-else-if="event.options && event.options.isOnline"
@@ -84,41 +71,6 @@
        </div>
      </div>
    </div>
-    <!--    <div class="date-and-title">-->
-    <!--      <div class="date-component">-->
-    <!--        <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
-    <!--      </div>-->
-    <!--      <div class="title-wrapper">-->
-    <!--        <h4>{{ event.title }}</h4>-->
-    <!--        <div class="organizer-place-wrapper has-text-grey">-->
-    <!--          <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
-    <!--           ·-->
-    <!--          <span v-if="event.physicalAddress">-->
-    <!--            {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
-    <!--          </span>-->
-    <!--        </div>-->
-    <!--      </div>-->
-    <!--    </div>-->
-    <!--    <div v-if="!mergedOptions.hideDetails" class="details">-->
-    <!--      <div v-if="event.participants.length > 0 &&-->
-    <!--      mergedOptions.loggedPerson &&-->
-    <!--      event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
-    <!--        <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
-    <!--      </div>-->
-    <!--      <div v-else-if="event.participants.length === 1">-->
-    <!--        <translate-->
-    <!--                :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
-    <!--        >{name} organizes this event</translate>-->
-    <!--      </div>-->
-    <!--      <div v-else>-->
-    <!--        <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
-    <!--          {{ participant.actor.preferredUsername }}-->
-    <!--          <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
-    <!--          &lt;!&ndash; <translate-->
-    <!--            :translate-params="{name: participant.actor.preferredUsername}"-->
-    <!--          >&nbsp;{name} is in,</translate>&ndash;&gt;-->
-    <!--        </span>-->
-    <!--      </div>-->
  </router-link>
 </template>

@@ -135,11 +87,13 @@ import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import { Actor, Person } from "@/types/actor";
 import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
+import EventAddress from "@/components/Event/EventAddress.vue";

@Component({
  components: {
    DateCalendarIcon,
    LazyImageWrapper,
+    EventAddress,
  },
 })
 export default class EventCard extends Vue {
@@ -175,18 +129,12 @@ export default class EventCard extends Vue {
      this.event.organizerActor || this.mergedOptions.organizerActor
    );
  }
-
-  get isDescriptionDifferentFromLocality(): boolean {
-    return (
-      this.event?.physicalAddress?.description !==
-        this.event?.physicalAddress?.locality &&
-      this.event?.physicalAddress?.description !== undefined
-    );
-  }
 }
 </script>

 <style lang="scss" scoped>
+@use "@/styles/_event-card";
+
 a.card {
  display: block;
  background: $secondary;
@@ -283,43 +231,16 @@ a.card {
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
-      // min-height: 2.4rem;
+      padding-bottom: 8px;
      font-weight: bold;
    }

-    .event-organizer {
-      display: flex;
-      align-items: center;
-      padding-top: 8px;
-
-      .organizer-name {
-        font-size: 14px;
-        padding-left: 5px;
-        font-weight: 600;
-      }
-    }
-
    .event-subtitle {
      font-size: 0.85rem;
-      display: flex;
-      align-items: center;
-      // flex-wrap: wrap;
-      color: #3c376e;
+    }

-      span:not(.icon) {
-        padding-left: 5px;
-      }
-
-      // span {
-      //   width: 14rem;
-      //   display: block;
-      //   overflow: hidden;
-
-      //   flex-grow: 1;
-
-      //   text-overflow: ellipsis;
-      //   white-space: nowrap;
-      // }
+    .organizer-name {
+      font-size: 14px;
    }
  }
 }
--- a/js/src/components/Event/EventMetadataBlock.vue
+++ b/js/src/components/Event/EventMetadataBlock.vue
@@ -14,9 +14,9 @@
        />
      </span>
      <b-icon v-else-if="icon" :icon="icon" size="is-medium" />
-      <p :class="{ 'padding-left': icon }">
+      <div class="content-wrapper" :class="{ 'padding-left': icon }">
        <slot></slot>
-      </p>
+      </div>
    </div>
  </div>
 </template>
@@ -42,7 +42,7 @@ div.eventMetadataBlock {
  align-items: center;
  margin-bottom: 1.75rem;

-  p {
+  .content-wrapper {
    overflow: hidden;

    &.padding-left {
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -3,17 +3,55 @@
    class="event-minimalist-card-wrapper"
    :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
  >
-    <date-calendar-icon
-      class="calendar-icon"
-      :date="event.beginsOn"
-      :small="true"
-    />
-    <div class="title-info-wrapper">
-      <p class="event-minimalist-title">{{ event.title }}</p>
-      <p v-if="event.physicalAddress" class="has-text-grey">
-        {{ event.physicalAddress.description }}
-      </p>
-      <p v-else>
+    <div class="event-preview mr-0 ml-0">
+      <div>
+        <div class="date-component">
+          <date-calendar-icon :date="event.beginsOn" :small="true" />
+        </div>
+        <lazy-image-wrapper
+          :picture="event.picture"
+          :rounded="true"
+          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
+        />
+      </div>
+    </div>
+    <div class="title-info-wrapper has-text-grey-dark">
+      <h3 class="event-minimalist-title">
+        <b-tag
+          class="mr-2"
+          type="is-warning"
+          size="is-medium"
+          v-if="event.draft"
+          >{{ $t("Draft") }}</b-tag
+        >
+        {{ event.title }}
+      </h3>
+      <event-address
+        v-if="event.physicalAddress"
+        class="event-subtitle"
+        :physical-address="event.physicalAddress"
+      />
+      <div
+        class="event-subtitle"
+        v-else-if="event.options && event.options.isOnline"
+      >
+        <b-icon icon="video" />
+        <span>{{ $t("Online") }}</span>
+      </div>
+      <div class="event-subtitle event-organizer" v-if="showOrganizer">
+        <figure
+          class="image is-24x24"
+          v-if="organizer(event) && organizer(event).avatar"
+        >
+          <img class="is-rounded" :src="organizer(event).avatar.url" alt="" />
+        </figure>
+        <b-icon v-else icon="account-circle" />
+        <span class="organizer-name">
+          {{ organizerDisplayName(event) }}
+        </span>
+      </div>
+      <p class="participant-metadata">
+        <b-icon icon="account-multiple" />
        <span v-if="event.options.maximumAttendeeCapacity !== 0">
          {{
            $tc(
@@ -64,30 +102,65 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IEvent } from "@/types/event.model";
+import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
+import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
+import EventAddress from "@/components/Event/EventAddress.vue";

@Component({
  components: {
    DateCalendarIcon,
+    LazyImageWrapper,
+    EventAddress,
  },
 })
 export default class EventMinimalistCard extends Vue {
  @Prop({ required: true, type: Object }) event!: IEvent;
+  @Prop({ required: false, type: Boolean, default: false })
+  showOrganizer!: boolean;

  RouteName = RouteName;

  ParticipantRole = ParticipantRole;
+
+  organizerDisplayName = organizerDisplayName;
+
+  organizer = organizer;
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_event-card";
+@import "~bulma/sass/utilities/mixins.sass";
+@import "@/variables.scss";
+
 .event-minimalist-card-wrapper {
-  display: flex;
-  width: 100%;
+  display: grid;
+  grid-gap: 5px 10px;
+  grid-template-areas: "preview" "body";
  color: initial;
-  align-items: flex-start;
+
+  @include desktop {
+    grid-template-columns: 200px 3fr;
+    grid-template-areas: "preview body";
+  }
+
+  .event-preview {
+    & > div {
+      position: relative;
+      height: 120px;
+      width: 100%;
+
+      div.date-component {
+        display: flex;
+        position: absolute;
+        bottom: 5px;
+        left: 5px;
+        z-index: 1;
+      }
+    }
+  }

  .calendar-icon {
    margin-right: 1rem;
@@ -97,11 +170,19 @@ export default class EventMinimalistCard extends Vue {
    flex: 2;

    .event-minimalist-title {
-      color: #3c376e;
-      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-        serif;
-      font-size: 1.25rem;
-      font-weight: 700;
+      padding-bottom: 5px;
+      font-size: 18px;
+      line-height: 24px;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-weight: bold;
+      color: $title-color;
+    }
+
+    ::v-deep .icon {
+      vertical-align: middle;
    }
  }
 }
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="box">
+  <article class="box mb-5 mt-4">
    <div class="identity-header">
      <figure class="image is-24x24" v-if="participation.actor.avatar">
        <img
@@ -10,16 +10,39 @@
          width="24"
        />
      </figure>
+      <b-icon v-else icon="account-circle" />
      {{ displayNameAndUsername(participation.actor) }}
    </div>
    <div class="list-card">
-      <div class="date-component">
-        <date-calendar-icon
-          :date="participation.event.beginsOn"
-          :small="true"
-        />
-      </div>
      <div class="content-and-actions">
+        <div class="event-preview mr-0 ml-0">
+          <div>
+            <div class="date-component">
+              <date-calendar-icon
+                :date="participation.event.beginsOn"
+                :small="true"
+              />
+            </div>
+            <router-link
+              :to="{
+                name: RouteName.EVENT,
+                params: { uuid: participation.event.uuid },
+              }"
+            >
+              <lazy-image-wrapper
+                :rounded="true"
+                :picture="participation.event.picture"
+                style="
+                  height: 100%;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 100%;
+                "
+              />
+            </router-link>
+          </div>
+        </div>
        <div class="list-card-content">
          <div class="title-wrapper">
            <router-link
@@ -31,59 +54,61 @@
              <h3 class="title">{{ participation.event.title }}</h3>
            </router-link>
          </div>
-          <div class="participation-actor">
-            <span>
-              <b-icon
-                icon="earth"
-                v-if="participation.event.visibility === EventVisibility.PUBLIC"
-              />
-              <b-icon
-                icon="link"
-                v-else-if="
-                  participation.event.visibility === EventVisibility.UNLISTED
-                "
-              />
-              <b-icon
-                icon="lock"
-                v-else-if="
-                  participation.event.visibility === EventVisibility.PRIVATE
-                "
-              />
-            </span>
-            <span
-              v-if="
-                participation.event.physicalAddress &&
-                participation.event.physicalAddress.locality
-              "
-              >{{ participation.event.physicalAddress.locality }} -</span
-            >
-            <i18n
-              tag="span"
-              path="Organized by {name}"
-              v-if="organizerActor.id !== currentActor.id"
-            >
-              <popover-actor-card
-                slot="name"
-                :actor="organizerActor"
-                :inline="true"
-              >
-                {{ organizerActor.displayName() }}
-              </popover-actor-card>
-            </i18n>
-            <span v-else>{{ $t("Organized by you") }}</span>
+          <event-address
+            v-if="participation.event.physicalAddress"
+            class="event-subtitle"
+            :physical-address="participation.event.physicalAddress"
+          />
+          <div
+            class="event-subtitle"
+            v-else-if="
+              participation.event.options &&
+              participation.event.options.isOnline
+            "
+          >
+            <b-icon icon="video" />
+            <span>{{ $t("Online") }}</span>
          </div>
-          <div>
+          <div class="event-subtitle event-organizer">
+            <figure
+              class="image is-24x24"
+              v-if="
+                organizer(participation.event) &&
+                organizer(participation.event).avatar
+              "
+            >
+              <img
+                class="is-rounded"
+                :src="organizer(participation.event).avatar.url"
+                alt=""
+              />
+            </figure>
+            <b-icon v-else icon="account-circle" />
+            <span class="organizer-name">
+              {{ organizerDisplayName(participation.event) }}
+            </span>
+          </div>
+          <div class="event-subtitle event-participants">
+            <b-icon
+              :class="{ 'has-text-danger': lastSeatsLeft }"
+              icon="account-group"
+            />
            <span
              class="participant-stats"
-              v-if="
-                ![
-                  ParticipantRole.PARTICIPANT,
-                  ParticipantRole.NOT_APPROVED,
-                ].includes(participation.role)
-              "
+              v-if="participation.role !== ParticipantRole.NOT_APPROVED"
            >
+              <!-- Less than 10 seats left -->
+              <span class="has-text-danger" v-if="lastSeatsLeft">
+                {{
+                  $t("{number} seats left", {
+                    number: seatsLeft,
+                  })
+                }}
+              </span>
              <span
-                v-if="participation.event.options.maximumAttendeeCapacity !== 0"
+                v-else-if="
+                  participation.event.options.maximumAttendeeCapacity !== 0
+                "
              >
                {{
                  $tc(
@@ -111,28 +136,27 @@
                  )
                }}
              </span>
-              <span v-if="participation.event.participantStats.notApproved > 0">
-                <b-button
-                  type="is-text"
-                  @click="
-                    gotToWithCheck(participation, {
-                      name: RouteName.PARTICIPATIONS,
-                      query: { role: ParticipantRole.NOT_APPROVED },
-                      params: { eventId: participation.event.uuid },
-                    })
-                  "
-                >
-                  {{
-                    $tc(
-                      "{count} requests waiting",
-                      participation.event.participantStats.notApproved,
-                      {
-                        count: participation.event.participantStats.notApproved,
-                      }
-                    )
-                  }}
-                </b-button>
-              </span>
+              <b-button
+                v-if="participation.event.participantStats.notApproved > 0"
+                type="is-text"
+                @click="
+                  gotToWithCheck(participation, {
+                    name: RouteName.PARTICIPATIONS,
+                    query: { role: ParticipantRole.NOT_APPROVED },
+                    params: { eventId: participation.event.uuid },
+                  })
+                "
+              >
+                {{
+                  $tc(
+                    "{count} requests waiting",
+                    participation.event.participantStats.notApproved,
+                    {
+                      count: participation.event.participantStats.notApproved,
+                    }
+                  )
+                }}
+              </b-button>
            </span>
          </div>
        </div>
@@ -233,7 +257,11 @@ import { mixins } from "vue-class-component";
 import { RawLocation, Route } from "vue-router";
 import { EventVisibility, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
-import { IEventCardOptions } from "../../types/event.model";
+import {
+  IEventCardOptions,
+  organizer,
+  organizerDisplayName,
+} from "../../types/event.model";
 import { displayNameAndUsername, IActor, IPerson } from "../../types/actor";
 import ActorMixin from "../../mixins/actor";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
@@ -241,6 +269,9 @@ import EventMixin from "../../mixins/event";
 import RouteName from "../../router/name";
 import { changeIdentity } from "../../utils/auth";
 import PopoverActorCard from "../Account/PopoverActorCard.vue";
+import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
+import EventAddress from "@/components/Event/EventAddress.vue";
+import { PropType } from "vue";

 const defaultOptions: IEventCardOptions = {
  hideDate: true,
@@ -254,6 +285,8 @@ const defaultOptions: IEventCardOptions = {
  components: {
    DateCalendarIcon,
    PopoverActorCard,
+    LazyImageWrapper,
+    EventAddress,
  },
  apollo: {
    currentActor: {
@@ -261,11 +294,15 @@ const defaultOptions: IEventCardOptions = {
    },
  },
 })
-export default class EventListCard extends mixins(ActorMixin, EventMixin) {
+export default class EventParticipationCard extends mixins(
+  ActorMixin,
+  EventMixin
+) {
  /**
   * The participation associated
   */
-  @Prop({ required: true }) participation!: IParticipant;
+  @Prop({ required: true, type: Object as PropType<IParticipant> })
+  participation!: IParticipant;

  /**
   * Options are merged with default options
@@ -281,6 +318,10 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {

  displayNameAndUsername = displayNameAndUsername;

+  organizerDisplayName = organizerDisplayName;
+
+  organizer = organizer;
+
  RouteName = RouteName;

  get mergedOptions(): IEventCardOptions {
@@ -304,13 +345,13 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
      participation.actor.id !== this.currentActor.id &&
      participation.event.organizerActor
    ) {
-      const organizer = participation.event.organizerActor as IPerson;
-      await changeIdentity(this.$apollo.provider.defaultClient, organizer);
+      const organizerActor = participation.event.organizerActor as IPerson;
+      await changeIdentity(this.$apollo.provider.defaultClient, organizerActor);
      this.$buefy.notification.open({
        message: this.$t(
          "Current identity has been changed to {identityName} in order to manage this event.",
          {
-            identityName: organizer.preferredUsername,
+            identityName: organizerActor.preferredUsername,
          }
        ) as string,
        type: "is-info",
@@ -330,10 +371,30 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
    }
    return this.participation.event.organizerActor;
  }
+
+  get seatsLeft(): number | null {
+    if (this.participation.event.options.maximumAttendeeCapacity > 0) {
+      return (
+        this.participation.event.options.maximumAttendeeCapacity -
+        this.participation.event.participantStats.participant
+      );
+    }
+    return null;
+  }
+
+  get lastSeatsLeft(): boolean {
+    if (this.seatsLeft) {
+      return this.seatsLeft < 10;
+    }
+    return false;
+  }
 }
 </script>

 <style lang="scss" scoped>
+@use "@/styles/_event-card";
+@import "~bulma/sass/utilities/mixins.sass";
+
 article.box {
  div.tag-container {
    position: absolute;
@@ -359,49 +420,67 @@ article.box {

  .list-card {
    display: flex;
-    padding: 0 6px;
+    padding: 0 6px 0 0;
    position: relative;
    flex-direction: column;

-    div.date-component {
-      align-self: flex-start;
-      padding: 5px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      margin-top: 1px;
-      height: 0;
-      display: flex;
-      align-items: flex-end;
-      margin-bottom: 15px;
-      margin-left: 0rem;
-    }
-
    .content-and-actions {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      padding-bottom: 1rem;
+      display: grid;
+      grid-gap: 5px 10px;
+      grid-template-areas: "preview" "body" "actions";
+
+      @include tablet {
+        grid-template-columns: 1fr 3fr;
+        grid-template-areas: "preview body" "actions actions";
+      }
+
+      @include desktop {
+        grid-template-columns: 1fr 3fr 1fr;
+        grid-template-areas: "preview body actions";
+      }
+
+      .event-preview {
+        grid-area: preview;
+
+        & > div {
+          height: 128px;
+          width: 100%;
+          position: relative;
+
+          div.date-component {
+            display: flex;
+            position: absolute;
+            bottom: 5px;
+            left: 5px;
+            z-index: 1;
+          }
+
+          img {
+            width: 100%;
+            object-position: center;
+            object-fit: cover;
+            height: 100%;
+          }
+        }
+      }

      .actions {
-        padding-right: 7.5px;
+        padding: 7px;
        cursor: pointer;
+        align-self: center;
+        justify-self: center;
+        grid-area: actions;
      }

      div.list-card-content {
        flex: 1;
        padding: 5px;
-        min-width: 350px;
+        grid-area: body;

-        .participation-actor span,
-        .participant-stats span {
+        .participant-stats {
+          display: flex;
+          align-items: center;
          padding: 0 5px;
-
-          button {
-            height: auto;
-            padding-top: 0;
-          }
        }

        div.title-wrapper {
@@ -419,11 +498,11 @@ article.box {
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
-            font-weight: 400;
-            line-height: 1em;
-            font-size: 1.4em;
-            padding-bottom: 5px;
+            font-size: 18px;
+            line-height: 24px;
            margin: auto 0;
+            font-weight: bold;
+            color: $title-color;
          }
        }
      }
@@ -434,9 +513,9 @@ article.box {
    background: $yellow-2;
    display: flex;
    padding: 5px;
-    padding-left: calc(48px + 15px);

-    figure {
+    figure,
+    span.icon {
      padding-right: 3px;
    }
  }
--- a/js/src/components/Event/GroupedMultiEventMinimalistCard.vue
+++ b/js/src/components/Event/GroupedMultiEventMinimalistCard.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="events-wrapper">
+    <div class="month-group" v-for="key of keys" :key="key">
+      <h2 class="is-size-5 month-name">
+        {{ monthName(groupEvents(key)[0]) }}
+      </h2>
+      <event-minimalist-card
+        class="py-4"
+        v-for="event in groupEvents(key)"
+        :key="event.id"
+        :event="event"
+        :isCurrentActorMember="isCurrentActorMember"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { IEvent } from "@/types/event.model";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import EventMinimalistCard from "./EventMinimalistCard.vue";
+
+@Component({
+  components: {
+    EventMinimalistCard,
+  },
+})
+export default class GroupedMultiEventMinimalistCard extends Vue {
+  @Prop({ type: Array as PropType<IEvent[]>, required: true })
+  events!: IEvent[];
+  @Prop({ required: false, type: Boolean, default: false })
+  isCurrentActorMember!: boolean;
+
+  get monthlyGroupedEvents(): Map<string, IEvent[]> {
+    return this.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
+      const beginsOn = new Date(event.beginsOn);
+      const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
+      const monthEvents = acc.get(month) || [];
+      acc.set(month, [...monthEvents, event]);
+      return acc;
+    }, new Map());
+  }
+
+  get keys(): string[] {
+    return Array.from(this.monthlyGroupedEvents.keys()).sort((a, b) =>
+      b.localeCompare(a)
+    );
+  }
+
+  groupEvents(key: string): IEvent[] {
+    return this.monthlyGroupedEvents.get(key) || [];
+  }
+
+  monthName(event: IEvent): string {
+    const beginsOn = new Date(event.beginsOn);
+    return new Intl.DateTimeFormat(undefined, {
+      month: "long",
+      year: "numeric",
+    }).format(beginsOn);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.events-wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template: 1fr;
+}
+.month-group {
+  .month-name {
+    text-transform: capitalize;
+    text-transform: capitalize;
+    display: inline-block;
+    position: relative;
+    font-size: 1.3rem;
+
+    &::after {
+      background: $orange-3;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 100%;
+      content: "";
+      width: calc(100% + 30px);
+      height: 3px;
+      max-width: 150px;
+    }
+  }
+}
+</style>
--- a/js/src/components/Event/MultiEventMinimalistCard.vue
+++ b/js/src/components/Event/MultiEventMinimalistCard.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="events-wrapper">
+    <event-minimalist-card
+      v-for="event in events"
+      :key="event.id"
+      :event="event"
+      :isCurrentActorMember="isCurrentActorMember"
+      :showOrganizer="showOrganizer"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { IEvent } from "@/types/event.model";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import EventMinimalistCard from "./EventMinimalistCard.vue";
+
+@Component({
+  components: {
+    EventMinimalistCard,
+  },
+})
+export default class MultiEventMinimalistCard extends Vue {
+  @Prop({ type: Array as PropType<IEvent[]>, required: true })
+  events!: IEvent[];
+  @Prop({ required: false, type: Boolean, default: false })
+  isCurrentActorMember!: boolean;
+  @Prop({ required: false, type: Boolean, default: false })
+  showOrganizer!: boolean;
+}
+</script>
+<style lang="scss" scoped>
+.events-wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template: 1fr;
+}
+</style>
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -47,6 +47,7 @@
      </li>
      <li>
        <a
+          rel="external"
          hreflang="en"
          href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE"
        >
@@ -62,13 +63,16 @@
        tag="span"
        path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
      >
-        <a slot="mobilizon" href="https://joinmobilizon.org">{{
+        <a rel="external" slot="mobilizon" href="https://joinmobilizon.org">{{
          $t("Mobilizon")
        }}</a>
        <span slot="date">{{ new Date().getFullYear() }}</span>
-        <a href="https://joinmobilizon.org/hall-of-fame" slot="contributors">{{
-          $t("more than 1360 contributors")
-        }}</a>
+        <a
+          rel="external"
+          href="https://joinmobilizon.org/hall-of-fame"
+          slot="contributors"
+          >{{ $t("more than 1360 contributors") }}</a
+        >
      </i18n>
    </div>
  </footer>
--- a/js/src/components/Group/GroupMemberCard.vue
+++ b/js/src/components/Group/GroupMemberCard.vue
@@ -4,6 +4,7 @@
      <figure class="image is-24x24" v-if="member.actor.avatar">
        <img class="is-rounded" :src="member.actor.avatar.url" alt="" />
      </figure>
+      <b-icon v-else icon="account-circle" />
      {{ displayNameAndUsername(member.actor) }}
    </div>
    <div class="card-content">
@@ -47,7 +48,7 @@
          </div>
        </div>
        <div class="content" v-if="member.parent.summary">
-          <p>{{ member.parent.summary }}</p>
+          <p v-html="member.parent.summary" />
        </div>
      </div>
      <div>
@@ -110,7 +111,8 @@ export default class GroupMemberCard extends Vue {
    display: flex;
    padding: 5px;

-    figure {
+    figure,
+    span.icon {
      padding-right: 3px;
    }
  }
--- a/js/src/components/Image/LazyImage.vue
+++ b/js/src/components/Image/LazyImage.vue
@@ -16,7 +16,7 @@
        :width="width"
        :height="height"
        class="absolute top-0 left-0 transition-opacity duration-500"
-        :class="isLoaded ? 'opacity-100' : 'opacity-0'"
+        :class="{ isLoaded: isLoaded ? 'opacity-100' : 'opacity-0', rounded }"
        alt=""
      />
    </div>
@@ -37,6 +37,7 @@ export default class LazyImage extends Vue {
  @Prop({ type: String, required: false, default: null }) blurhash!: string;
  @Prop({ type: Number, default: 1 }) width!: number;
  @Prop({ type: Number, default: 1 }) height!: number;
+  @Prop({ type: Boolean, default: false }) rounded!: boolean;

  inheritAttrs = false;
  isLoaded = false;
@@ -115,5 +116,8 @@ img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
+  &.rounded {
+    border-radius: 8px;
+  }
 }
 </style>
--- a/js/src/components/Image/LazyImageWrapper.vue
+++ b/js/src/components/Image/LazyImageWrapper.vue
@@ -5,6 +5,7 @@
    :width="pictureOrDefault.metadata.width"
    :height="pictureOrDefault.metadata.height"
    :blurhash="pictureOrDefault.metadata.blurhash"
+    :rounded="rounded"
  />
 </template>
 <script lang="ts">
@@ -34,6 +35,7 @@ const DEFAULT_PICTURE = {
 export default class LazyImageWrapper extends Vue {
  @Prop({ required: false, type: Object as PropType<IMedia | null> })
  picture!: IMedia | null;
+  @Prop({ required: false, type: Boolean, default: false }) rounded!: boolean;

  get pictureOrDefault(): Partial<IMedia> {
    if (this.picture === null) {
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -58,7 +58,7 @@
        tag="a"
        href="https://mediation.koena.net/framasoft/mobilizon/"
        target="_blank"
-        rel="noopener"
+        rel="noopener external"
        hreflang="fr"
      >
        <img
--- a/js/src/components/Post/MultiPostListItem.vue
+++ b/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>
--- a/js/src/components/Post/PostElementItem.vue
+++ b/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>
--- a/js/src/components/Post/PostListItem.vue
+++ b/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;
+      }
    }
  }
 }
--- a/js/src/components/Post/SharePostModal.vue
+++ b/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>
--- a/js/src/components/Resource/FolderItem.vue
+++ b/js/src/components/Resource/FolderItem.vue
@@ -61,7 +61,7 @@ export default class FolderItem extends Mixins(ResourceMixin) {
  list = [];

  groupObject: Record<string, unknown> = {
-    name: `folder-${this.resource.title}`,
+    name: `folder-${this.resource?.title}`,
    pull: false,
    put: ["resources"],
  };