graphical improvements

components/Ui/Search/DateRangePicker.vue

@@ -15,6 +15,8 @@ Date range picker, taken from the following non-maintained project https://githu
           class="v-date-range__input-field"
           :value="inputValue"
           readonly
+          clearable
+          hide-details
           :disabled="disabled"
           @click:clear="reset"
           :label="placeholder"
@@ -244,7 +246,7 @@ export default Vue.extend({
       return `${start}    ${this.separatorLabel}     ${end}`;
     },
     placeholder(): string {
-      return `${this.startLabel}    ${this.separatorLabel}    ${this.endLabel}`;
+      return `${this.startLabel} ${this.separatorLabel} ${this.endLabel}`;
     },
     /**
      * If the value prop doesn't have any start value,

lang/fr-FR.js

@@ -90,6 +90,7 @@ export default (_context, _locale) => {
     on_hour: 'à',
     on_day: 'Le',
     from_day: 'Du',
-    to_day: 'au'
+    to_day: 'au',
+    more_to_know: 'En savoir plus'
   })
 }

pages/events/index.vue

@@ -2,77 +2,74 @@
 
 <template>
   <LayoutContainer>
-    <!-- Header -->
-    <v-row>
-      <v-layout>
-        <h2 v-if="!hideTitle">
-          {{ $t("events") }}
-        </h2>
-      </v-layout>
-    </v-row>
-
     <!-- Search form -->
-    <v-row>
-      <v-form method="get" class="mt-8 w100">
-        <v-container>
-          <v-row>
-            <v-col cols="12" md="6" class="py-2 px-1">
-              <UiSearchDateRangePicker
-                ref="dateSearch"
-                v-model="dateRangeFilter"
-                :start-label="$t('start_date')"
-                :end-label="$t('end_date')"
-                preset-label=""
-                separator-label="~"
-                :presets="dateRangePresets"
-                :min="dateRangeMin"
-                locale="fr-FR"
-                no-title
-                display-format="dd/MM/yyyy"
-                :inputProps="{outlined: true}"
-                :menuProps="{offsetY: true, closeOnContentClick: false}"
-                :actionLabels="{apply: $t('apply'), cancel: $t('cancel'), reset: $t('reset')}"
-              >
-              </UiSearchDateRangePicker>
-            </v-col>
-
-            <v-col cols="12" md="6" class="py-2 px-1">
-              <UiSearchAddress
-                ref="addressSearch"
-                type="municipality"
-                @change="locationFilterChanged"
-              />
-            </v-col>
-
-            <v-col cols="12" md="6" class="py-2 px-1">
-              <v-text-field
-                v-model="textFilter"
-                type="text"
-                outlined
-                clearable
-                hide-details
-                append-icon="mdi-magnify"
-                :label="$t('what') + ' ?'"
-                @click:append="search"
-                @keydown.enter="search"
-              />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col cols="2" class="py-2 px-1">
-              <v-btn class="h100" @click="reinitializeFilters">
-                {{ $t('reinitialize') }}
-              </v-btn>
-            </v-col>
-            <v-col cols="2" class="py-2 px-1 d-flex justify-end">
-              <v-btn class="h100" @click="search()">
-                {{ $t('search') }}
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-form>
+    <v-row class="my-3">
+      <v-col cols="1"></v-col>
+      <v-col cols="10">
+        <v-card class="px-4" rounded="lg" :elevation="6">
+          <v-form method="get" class="mt-8 w100">
+            <v-container>
+              <v-row>
+                <v-col cols="12" md="4" class="py-2 px-1">
+                  <UiSearchDateRangePicker
+                    ref="dateSearch"
+                    v-model="dateRangeFilter"
+                    :start-label="$t('start_date')"
+                    :end-label="$t('end_date')"
+                    preset-label=""
+                    separator-label="~"
+                    :presets="dateRangePresets"
+                    :min="dateRangeMin"
+                    locale="fr-FR"
+                    no-title
+                    display-format="dd/MM/yyyy"
+                    :inputProps="{outlined: true}"
+                    :menuProps="{offsetY: true, closeOnContentClick: false}"
+                    :actionLabels="{apply: $t('apply'), cancel: $t('cancel'), reset: $t('reset')}"
+                  >
+                  </UiSearchDateRangePicker>
+                </v-col>
+
+                <v-col cols="12" md="4" class="py-2 px-1">
+                  <UiSearchAddress
+                    ref="addressSearch"
+                    type="municipality"
+                    @change="locationFilterChanged"
+                  />
+                </v-col>
+
+                <v-col cols="12" md="4" class="py-2 px-1">
+                  <v-text-field
+                    v-model="textFilter"
+                    type="text"
+                    outlined
+                    clearable
+                    hide-details
+                    append-icon="mdi-magnify"
+                    :label="$t('what') + ' ?'"
+                    @click:append="search"
+                    @keydown.enter="search"
+                  />
+                </v-col>
+              </v-row>
+
+              <v-row class="search-actions" justify="space-around">
+                <v-col cols="12" sm="5" md="3">
+                  <v-btn @click="reinitializeFilters">
+                    {{ $t('reinitialize') }}
+                  </v-btn>
+                </v-col>
+                <v-col cols="12" sm="5" md="3">
+                  <v-btn class="h100" @click="search()" style="width: 100%;">
+                    {{ $t('search') }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-form>
+        </v-card>
+      </v-col>
+      <v-col cols="1"></v-col>
     </v-row>
 
     <v-row>
@@ -94,86 +91,92 @@
         sort-by="name"
         hide-default-footer
         no-data-text=""
+        style="width: 100%"
       >
         <template #header>
           <i class="results-count">{{ totalRecords }} {{ $t('results') }}</i>
         </template>
         <template #default="props">
-          <v-row justify="space-between" class="mt-3 mb-3">
-            <v-col
-              v-for="event in props.items"
-              :key="event.uuid"
-              cols="3"
-              sm="6"
-              :lg="3"
-              class="py-2 px-1"
+          <v-container>
+            <v-row
+              justify="center"
+              justify-sm="start"
             >
-              <v-card
-                elevation="1"
-                outlined
-                class="event-card pa-0 d-flex flex-column"
+              <v-col
+                v-for="event in props.items"
+                :key="event.uuid"
+                :cols="12"
+                :sm="6"
+                :md="4"
+                :lg="3"
+                class="py-2 px-2 my-2"
               >
-                <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"
-                    alt="poster"
-                    height="320"
-                    width="100%"
-                    max-height="100%"
-                    :contain="true"
-                    style="margin: 12px;"
-                  />
-                  <div v-else style="height: 344px; width: 264px" />
-                </div>
-
-                <div class="d-flex flex-column flex-grow-1">
-                  <v-card-title class="title">
-                    <nuxt-link :to="{path: '/events/' + event.uuid, query: { theme: theme }}">
-                      {{ event.name }}
-                    </nuxt-link>
-                  </v-card-title>
-
-                  <v-card-text class="infos">
-                    <table>
-                      <tr v-if="event.datetimeStart">
-                        <td>
-                          <font-awesome-icon :icon="['fas', 'calendar']" class="icon mr-2" />
-                        </td>
-                        <td>
-                          <span>
-                            {{ formatDateIntervalFor(new Date(event.datetimeStart), new Date(event.datetimeEnd)) }}
-                          </span>
-                        </td>
-                      </tr>
-
-                      <tr v-if="event.address.addressCity">
-                        <td>
-                          <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
-                        </td>
-                        <td>
-                          <span v-if="event.address.streetAddress" style="white-space: pre-line;">{{ event.address.streetAddress }}<br></span>
-                          <span v-if="event.address.postalCode" class="postalCode">{{ event.address.postalCode }} </span>
-                          <span>{{ event.address.addressCity }}</span>
-                        </td>
-                      </tr>
-                    </table>
-                  </v-card-text>
-                </div>
-
-                <v-card-actions class="align-self-end">
-                  <v-btn
-                    class="see"
-                    :to="{path: '/event/' + event.uuid, query: { theme: theme, hideTitle: hideTitle }}"
-                    nuxt
-                  >
-                    <span style="margin-right: 6px;">{{ $t("see_more") }}</span>
-                    <font-awesome-icon :icon="['fa', 'caret-right']" />
-                  </v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-col>
-          </v-row>
+                <v-card
+                  elevation="4"
+                  class="event-card pa-0 d-flex flex-column"
+                >
+                  <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"
+                      alt="poster"
+                      height="160"
+                      width="100%"
+                      max-height="100%"
+                      :contain="true"
+                      tile
+                    />
+                    <div v-else style="height: 184px;" />
+                  </div>
+
+                  <div class="d-flex flex-column flex-grow-1 px-3">
+                    <v-card-title class="title">
+                      <nuxt-link :to="{path: '/events/' + event.uuid, query: { theme: theme }}">
+                        {{ event.name }}
+                      </nuxt-link>
+                    </v-card-title>
+
+                    <v-card-text class="infos pb-0">
+                      <table>
+                        <tr v-if="event.datetimeStart" class="pa-1">
+                          <td class="pt-1">
+                            <font-awesome-icon :icon="['fas', 'calendar']" class="icon mr-2" />
+                          </td>
+                          <td class="pa-1">
+                            <span>
+                              {{ formatDateIntervalFor(new Date(event.datetimeStart), new Date(event.datetimeEnd)) }}
+                            </span>
+                          </td>
+                        </tr>
+
+                        <tr v-if="event.address.addressCity">
+                          <td class="pt-1">
+                            <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
+                          </td>
+                          <td class="pa-1">
+                            <span v-if="event.roomName" style="white-space: pre-line;">{{ event.roomName }}<br></span>
+                            <span v-if="event.address.streetAddress" style="white-space: pre-line;">{{ event.address.streetAddress }}<br></span>
+                            <span>{{ event.address.addressCity }}</span>
+                          </td>
+                        </tr>
+                      </table>
+                    </v-card-text>
+                  </div>
+
+                  <v-card-actions class="align-self-end pa-3">
+                    <v-btn
+                      class="see"
+                      :to="{path: '/event/' + event.uuid, query: { theme: theme, hideTitle: hideTitle }}"
+                      nuxt
+                    >
+                      <span style="margin-right: 6px;">{{ $t("more_to_know") }}</span>
+                      <font-awesome-icon :icon="['fa', 'caret-right']" />
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-col>
+            </v-row>
+          </v-container>
         </template>
         <template #footer>
           <v-pagination
@@ -181,6 +184,7 @@
             :length="pagesCount"
             total-visible="9"
             color="primary"
+            class="my-5"
             @input="pageUpdated"
           />
         </template>
@@ -326,8 +330,8 @@ export default Vue.extend({
           return this.formatDateTime(dateStart)
         }
         else if (this.$dateFns.isSameDay(dateStart, dateEnd)) {
-          return this.$t('on_day') + ' ' + this.formatDate(dateStart, false) + ', ' +
-            this.$t('from_hour') + ' ' + this.formatTime(dateStart) + ' ' + this.$t('to_hour') + ' ' + this.formatTime(dateEnd)
+          return this.formatDate(dateStart, false) + ', ' +
+            this.formatTime(dateStart) + ' - ' + this.formatTime(dateEnd)
         }
         else {
           return this.$t('from_day') + ' ' + this.formatDateTime(dateStart) + ' ' + this.$t('to_day') + ' ' + this.formatDateTime(dateEnd)
@@ -342,26 +346,33 @@ export default Vue.extend({
 <style scoped lang="scss">
 @import 'assets/style/variables.scss';
 
+//* {
+//  font-family: ;
+//}
+
 h2 {
   color: var(--v-primary-base);
 }
 
 .event-card {
   height: 100%;
+  width: 280px;
+  min-width: 280px;
   color: #666666;
 }
 
-.infos .col {
-  padding: 6px 12px;
+.event-card .title {
+  text-transform: uppercase;
+}
+
+.event-card .title a {
+  width: 100%;
+  text-align: center;
 }
 
 .infos td {
-  padding: 4px;
   vertical-align: top;
-}
-.infos td:first-child {
-  padding-top: 6px;
-  text-align: center;
+  text-transform: capitalize;
 }
 
 .title {
@@ -384,4 +395,11 @@ h2 {
   font-size: .8em;
   color: #666;
 }
+
+.search-actions button {
+  width: 100%;
+  height: 36px !important;
+}
+
+
 </style>