various style improvements

components/Ui/Search/DateRangePicker.vue

@@ -136,6 +136,10 @@ export default Vue.extend({
       type: Boolean as () => boolean,
       default: false
     },
+    label: {
+      type: String as () => string | null,
+      default: null
+    },
     // Denotes the Placeholder string for start date.
     startLabel: {
       type: String as () => string,
@@ -243,10 +247,10 @@ export default Vue.extend({
       const end = this.displayFormat
         ? formatIsoDate(this.value.end, this.displayFormat)
         : this.value.end;
-      return `${start}    ${this.separatorLabel}     ${end}`;
+      return `${start}  ${this.separatorLabel}  ${end}`;
     },
     placeholder(): string {
-      return `${this.startLabel} ${this.separatorLabel} ${this.endLabel}`;
+      return this.label !== null ? this.label : `${this.startLabel} ${this.separatorLabel} ${this.endLabel}`;
     },
     /**
      * If the value prop doesn't have any start value,

pages/events/index.vue

@@ -14,10 +14,9 @@
                   <UiSearchDateRangePicker
                     ref="dateSearch"
                     v-model="dateRangeFilter"
-                    :start-label="$t('start_date')"
-                    :end-label="$t('end_date')"
+                    :label="$t('when') + ' ?'"
                     preset-label=""
-                    separator-label="~"
+                    separator-label="-"
                     :presets="dateRangePresets"
                     :min="dateRangeMin"
                     locale="fr-FR"
@@ -74,10 +73,18 @@
 
     <v-row>
       <!-- loading skeleton -->
-      <v-container v-if="$fetchState.pending">
-        <v-row v-for="i in 4" :key="i" justify="space-between" class="mt-1 mb-3">
-          <v-col v-for="j in 4" :key="j" cols="3" :md="6" class="py-2 px-1">
-            <v-skeleton-loader type="card-avatar, text, button" :loading="true" />
+      <v-container v-if="$fetchState.pending" style="width: 100%">
+        <v-row v-for="i in 4" :key="i" justify="center" justify-sm="start">
+          <v-col
+            v-for="j in 4"
+            :key="j"
+            :cols="12"
+            :sm="6"
+            :md="4"
+            :lg="3"
+            class="py-2 px-2 my-2"
+          >
+            <v-skeleton-loader type="card-avatar, article, button" :loading="true" height="400px" />
           </v-col>
         </v-row>
       </v-container>
@@ -90,7 +97,7 @@
         :items-per-page="itemsPerPage"
         sort-by="name"
         hide-default-footer
-        no-data-text=""
+        :no-data-text="$t('no_results')"
         style="width: 100%"
       >
         <template #header>
@@ -117,8 +124,7 @@
                 >
                   <div class="d-flex justify-center max-w100">
                     <v-img
-                      v-if="event.imageId"
-                      :src="'https://api.opentalent.fr/app.php/_internal/secure/files/' + event.imageId"
+                      :src="event.imageId ? 'https://api.opentalent.fr/app.php/_internal/secure/files/' + event.imageId : '/images/event-default.jpg'"
                       alt="poster"
                       height="160"
                       width="100%"
@@ -126,7 +132,6 @@
                       :contain="true"
                       tile
                     />
-                    <div v-else style="height: 184px;" />
                   </div>
 
                   <div class="d-flex flex-column flex-grow-1 px-3">
@@ -346,10 +351,6 @@ export default Vue.extend({
 <style scoped lang="scss">
 @import 'assets/style/variables.scss';
 
-//* {
-//  font-family: ;
-//}
-
 h2 {
   color: var(--v-primary-base);
 }