Various improvements to MyEvents & event cards

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

js/src/components/Event/EventListCard.vue

@@ -13,7 +13,8 @@
           :small="true"
         />
       </div>
-      <div class="content">
+      <div class="content-and-actions">
+        <div class="list-card-content">
           <div class="title-wrapper">
             <router-link
               :to="{
@@ -215,6 +216,7 @@
           </b-dropdown>
         </div>
       </div>
+    </div>
   </article>
 </template>
 
@@ -351,17 +353,40 @@ article.box {
 
   .list-card {
     display: flex;
-    align-items: center;
     padding: 0 6px;
+    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;
 
       .actions {
         padding-right: 7.5px;
         cursor: pointer;
       }
 
-    div.content {
+      div.list-card-content {
         flex: 1;
         padding: 5px;
+        min-width: 350px;
 
         .participation-actor span,
         .participant-stats span {
@@ -376,35 +401,34 @@ article.box {
         div.title-wrapper {
           display: flex;
           align-items: center;
-
+          padding-top: 5px;
-        div.date-component {
-          flex: 0;
-          margin-right: 16px;
-        }
 
           a {
             text-decoration: none;
+            padding-bottom: 5px;
           }
 
           .title {
             display: -webkit-box;
-          -webkit-line-clamp: 2;
+            -webkit-line-clamp: 3;
             -webkit-box-orient: vertical;
             overflow: hidden;
             font-weight: 400;
             line-height: 1em;
-          font-size: 1.6em;
+            font-size: 1.4em;
             padding-bottom: 5px;
             margin: auto 0;
           }
         }
       }
     }
+  }
 
   .identity-header {
     background: $yellow-2;
     display: flex;
     padding: 5px;
+    padding-left: calc(48px + 15px);
 
     figure {
       padding-right: 3px;

js/src/components/Group/GroupMemberCard.vue

@@ -97,6 +97,10 @@ export default class GroupMemberCard extends Vue {
     & > div:last-child {
       cursor: pointer;
     }
+
+    .media-content {
+      overflow: hidden;
+    }
   }
 
   .identity-header {

js/src/views/Event/MyEvents.vue

@@ -67,7 +67,7 @@
       </subtitle>
       <transition-group name="list" tag="p">
         <div v-for="month in monthlyPastParticipations" :key="month[0]">
-          <span>{{ month[0] }}</span>
+          <span class="past-month">{{ month[0] }}</span>
           <EventListCard
             v-for="participation in month[1]"
             :key="participation.id"
@@ -304,8 +304,24 @@ main > .container {
 }
 
 section {
-  .upcoming-month {
+  .upcoming-month,
+  .past-month {
     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;
+    }
   }
 }
 

js/src/views/Home.vue

@@ -608,7 +608,7 @@ export default class Home extends Vue {
 
 main > div > .container {
   background: $white;
-  padding: 1rem 1.5rem 3rem;
+  padding: 1rem 0.5rem 3rem;
 }
 
 .search-autocomplete {