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>