UI improvements

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

js/src/components/Event/EventCard.vue

@@ -140,6 +140,7 @@ export default class EventCard extends Vue {
 a.card {
   display: block;
   background: $secondary;
+  color: #3c376e;
 
   &:hover {
     // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
@@ -180,8 +181,10 @@ a.card {
       text-overflow: ellipsis;
       overflow: hidden;
       display: block;
-      font-size: 1em;
+      font-size: 0.9em;
       line-height: 1.75em;
+      background-color: #e6e4f4;
+      color: #3c376e;
     }
   }
 
@@ -198,19 +201,21 @@ a.card {
     padding: 0.5rem;
 
     .event-title {
-      font-size: 1.25rem;
+      font-size: 1.2rem;
       line-height: 1.25rem;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       min-height: 2.4rem;
+      font-weight: bold;
     }
 
     .event-subtitle {
       font-size: 0.85rem;
       display: inline-flex;
       flex-wrap: wrap;
+      color: #3c376e;
 
       span {
         width: 15rem;

js/src/components/Event/EventListCard.vue

@@ -310,6 +310,10 @@ article.box {
         margin-right: 16px;
       }
 
+      a {
+        text-decoration: none;
+      }
+
       .title {
         display: -webkit-box;
         -webkit-line-clamp: 1;
@@ -322,10 +326,6 @@ article.box {
         margin: auto 0;
       }
     }
-
-    /deep/ progress + .progress-value {
-      color: lighten($primary, 20%) !important;
-    }
   }
 
   .actions {
@@ -345,11 +345,15 @@ article.box {
         /deep/ span:last-child {
           padding-left: 4px;
         }
+
+        &:hover {
+          background: #f5f5f5;
+        }
       }
 
       * {
         font-size: 0.8rem;
-        color: $primary;
+        color: $background-color;
       }
     }
   }

js/src/components/Event/ParticipationTable.vue

@@ -42,10 +42,8 @@
       </b-table-column>
       <b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable>
         <article class="media">
-          <figure class="media-left" v-if="props.row.actor.avatar">
-            <p class="image is-48x48">
-              <img :src="props.row.actor.avatar.url" alt="" />
-            </p>
+          <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
+            <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
           </figure>
           <b-icon
             class="media-left"

js/src/components/Event/ShareEventModal.vue

@@ -6,6 +6,24 @@
 
     <section class="modal-card-body is-flex" v-if="event">
       <div class="container has-text-centered">
+        <b-notification
+          type="is-warning"
+          v-if="event.visibility !== EventVisibility.PUBLIC"
+          :closable="false"
+        >
+          {{
+            $t(
+              "This event is accessible only through it's link. Be careful where you post this link."
+            )
+          }}
+        </b-notification>
+        <b-notification
+          type="is-danger"
+          v-if="event.status === EventStatus.CANCELLED"
+          :closable="false"
+        >
+          {{ $t("This event has been cancelled.") }}
+        </b-notification>
         <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
           {{ $t("All the places have already been taken") }}
         </small>
@@ -38,7 +56,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IEvent } from "../../types/event.model";
+import { IEvent, EventVisibility, EventStatus } from "../../types/event.model";
 // @ts-ignore
 import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
 
@@ -50,6 +68,10 @@ import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
 export default class ShareEventModal extends Vue {
   @Prop({ type: Object, required: true }) event!: IEvent;
   @Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
+
+  EventVisibility = EventVisibility;
+  EventStatus = EventStatus;
+
   get twitterShareUrl(): string {
     return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
       this.event.title