From 9ac3da618d24b9a1242a3c2609bb6dba1ca864d8 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Sat, 6 Nov 2021 14:37:02 +0100
Subject: [PATCH] Improve components

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/EventCard.vue | 61 +++++++++++++++------------
 js/src/components/Event/MultiCard.vue |  4 +-
 js/src/components/Group/GroupCard.vue | 12 ++++--
 3 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index a2f9f12c9..3576c59b5 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -39,34 +39,36 @@
           />
         </div>
         <div class="media-content">
-          <p class="event-title" :title="event.title">{{ event.title }}</p>
-          <div class="event-organizer">
-            <figure
-              class="image is-24x24"
-              v-if="organizer(event) && organizer(event).avatar"
+          <h3 class="event-title" :title="event.title">{{ event.title }}</h3>
+          <div class="content-end">
+            <div class="event-organizer">
+              <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>
+            <inline-address
+              v-if="event.physicalAddress"
+              class="event-subtitle"
+              :physical-address="event.physicalAddress"
+            />
+            <div
+              class="event-subtitle"
+              v-else-if="event.options && event.options.isOnline"
             >
-              <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>
-          <inline-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>
+              <b-icon icon="video" />
+              <span>{{ $t("Online") }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -201,12 +203,14 @@ a.card {
   }
 
   .card-content {
+    height: 100%;
     padding: 0.5rem;
 
     & > .media {
       position: relative;
       display: flex;
       flex-direction: column;
+      height: 100%;
 
       & > .media-left {
         margin-top: -15px;
@@ -222,6 +226,9 @@ a.card {
         flex: 1;
         width: 100%;
         overflow-x: inherit;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
     }
 
diff --git a/js/src/components/Event/MultiCard.vue b/js/src/components/Event/MultiCard.vue
index 3eca7f19c..5a9c75e8c 100644
--- a/js/src/components/Event/MultiCard.vue
+++ b/js/src/components/Event/MultiCard.vue
@@ -27,9 +27,9 @@ export default class MultiCard extends Vue {
 .multi-card-event {
   display: grid;
   grid-auto-rows: 1fr;
-  grid-column-gap: 30px;
+  grid-column-gap: 20px;
   grid-row-gap: 30px;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   .event-card {
     height: 100%;
     display: flex;
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index 3300a00d7..a94d43d93 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -15,7 +15,7 @@
       </figure>
     </div>
     <div class="card-content">
-      <div class="media mb-3">
+      <div class="media mb-2">
         <div class="media-left">
           <figure class="image is-48x48" v-if="group.avatar">
             <img class="is-rounded" :src="group.avatar.url" alt="" />
@@ -24,12 +24,12 @@
         </div>
         <div class="media-content">
           <h3 class="is-size-5 group-title">{{ displayName(group) }}</h3>
-          <span class="is-6 has-text-grey-dark">
+          <span class="is-6 has-text-grey-dark group-federated-username">
             {{ `@${usernameWithDomain(group)}` }}
           </span>
         </div>
       </div>
-      <div class="content" v-html="group.summary" />
+      <div class="content mb-2" v-html="group.summary" />
       <div class="card-custom-footer">
         <inline-address
           class="has-text-grey-dark"
@@ -37,6 +37,7 @@
           :physicalAddress="group.physicalAddress"
         />
         <p class="has-text-grey-dark">
+          <b-icon icon="account" />
           {{
             $tc(
               "{count} members or followers",
@@ -117,13 +118,16 @@ export default class GroupCard extends Vue {
       text-overflow: ellipsis;
 
       .group-title {
-        line-height: 1.75rem;
+        line-height: 1.5rem;
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
         font-weight: bold;
       }
+      .group-federated-username {
+        font-size: 14px;
+      }
     }
   }
 }