Improve components

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

js/src/components/Event/EventCard.vue

@@ -39,7 +39,8 @@
           />
         </div>
         <div class="media-content">
-          <p class="event-title" :title="event.title">{{ event.title }}</p>
+          <h3 class="event-title" :title="event.title">{{ event.title }}</h3>
+          <div class="content-end">
             <div class="event-organizer">
               <figure
                 class="image is-24x24"
@@ -71,6 +72,7 @@
           </div>
         </div>
       </div>
+    </div>
   </router-link>
 </template>
 
@@ -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;
       }
     }
 

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;

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;
+      }
     }
   }
 }