Improve UI of concertListItem and eventListItem

software/src/pages/events/bandDetailPage/concertSection.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { BandModel } from '@/data/models/acts/bandModel';
-import { dateStringToHumanReadableString } from '@/scripts/dateTimeScripts';
 import { useRouter } from 'vue-router';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
@@ -26,43 +25,20 @@ defineProps({
   <v-row v-else v-for="concert of band.events[0].concerts">
     <v-col>
       <concert-list-item
-        :title="dateStringToHumanReadableString(concert.date)"
-        :image="concert.location.imageOutdoor"
-        @click="(concert.inStock > 0) && router.push('/concert/' + concert.id)"
+        :date="concert.date"
+        :price="concert.price"
+        :title="concert.location.city.name"
+        :description="concert.location.name"
         :link="concert.inStock > 0"
-        :append-icon="concert.inStock == 0 ? 'mdi-minus-circle' : 'mdi-ticket'"
-        :append-icon-color="concert.inStock > 0 ? 'green' : 'red'"
+        @click="(concert.inStock > 0) && router.push('/concert/' + concert.id)"
       >
         <template #description>
-          <v-row>
-            <v-col cols="auto" class="d-flex justify-center align-center px-0">
-              <v-btn
-                icon="mdi-map"
-                variant="text"
-                size="x-large"
-                @click="router.push('/locations/' + concert.location.name.replaceAll(' ', '-').toLowerCase())"
-              />
-            </v-col>
-
-            <v-col>
-              <div class="text-h6">
-                {{ concert.location.name }}
-              </div>
-
-              <div class="text-h6">
-                {{ concert.location.city.name }}
-              </div>
-            </v-col>
-          </v-row>
-        </template>
-
-        <template #append-text>
-          <div class="pb-3" v-if="concert.inStock > 0">
-            {{ concert.price.toFixed(2) }} €
+          <div>
+            {{ concert.location.name }}
           </div>
 
-          <div v-else>
-            {{ $t('soldOut') }}
+          <div>
+            {{ band.name }} - {{ band.events[0].name }}
           </div>
         </template>
       </concert-list-item>

software/src/pages/events/eventsPage/eventListItem.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { EventModel } from '@/data/models/acts/eventModel';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+defineProps({
+  event: EventModel,
+  loading: Boolean
+})
+</script>
+
+<template>
+  <card-view-horizontal
+    v-if="!loading"
+    :image="'http://localhost:3000/static/' + event.image"
+    @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
+  >
+    <template #content>
+      <div class="text-h6 font-weight-black pt-1">
+        {{ event.band.name }} - {{ event.name }}
+      </div>
+      
+      <div class="descriptionShort mb-2 pr-4 text-disabled" >
+        {{ event.band.descriptionDe }}
+      </div>
+
+      <div class="text-disabled">
+        {{ createDateRangeString(event) }} - {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
+      </div>
+    </template>
+
+    <template #append>
+      <div>
+        <div class="text-secondary font-weight-medium text-body-1 pb-1">
+          {{ $t('from') + ' ' + lowestTicketPrice(event) + ' €' }}
+        </div>
+
+        <div>
+          <v-btn variant="flat" color="secondary">
+            {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </card-view-horizontal>
+
+  <card-view-horizontal
+    :loading="loading"
+    v-else
+  >
+    <v-skeleton-loader
+      type="text" />
+  </card-view-horizontal>
+</template>
+
+<style scoped>
+.descriptionShort {
+   overflow: hidden;
+   display: -webkit-box;
+   -webkit-line-clamp: 2; /* number of lines to show */
+           line-clamp: 2; 
+   -webkit-box-orient: vertical;
+}
+</style>

software/src/pages/events/eventsPage/index.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
 import filterBar from './filterBar.vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
-import { useTemplateRef } from 'vue';
+import eventListItem from './eventListItem.vue';
 
 const route = useRoute()
 const router = useRouter()
@@ -32,36 +30,22 @@ shoppingStore.getEvents()
           </v-col>
         </v-row>
 
-        <concert-list-item
+        <event-list-item
           v-if="feedbackStore.fetchDataFromServerInProgress"
           v-for="i in 3"
           :loading="true"
         />
 
-        <concert-list-item
+        <v-row
           v-else-if="shoppingStore.events.length > 0"
           v-for="event of shoppingStore.events"
-          :image="event.image"
-          @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
         >
-          <template #content>
-            <div class="text-h4">
-              {{ event.band.name + ' - ' +  event.name }}
-            </div>
-
-            <div class="text-h5">
-              {{ createDateRangeString(event) }}
-            </div>
-
-            <div class="text-h5">
-              {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
-            </div>
-          </template>
-
-          <template #append-text>
-            {{ $t('from') + ' ' + lowestTicketPrice(event) + ' €' }}
-          </template>
-        </concert-list-item>
+          <v-col>
+            <event-list-item
+              :event="event"
+            />
+          </v-col>
+        </v-row>
 
         <v-row v-else>
           <v-col>

software/src/pages/locations/locationDetailPage/index.vue

@@ -57,18 +57,23 @@ getLocation(String(router.currentRoute.value.params.locationName))
           </v-col>
         </v-row>
 
-        <concert-list-item
+        <v-row
           v-else-if="location.concerts.length > 0"
           v-for="concert of location.concerts"
-          :image="concert.event.image"
-          :title="concert.event.bandName + ' - ' +  concert.event.name"
-          :description="dateStringToHumanReadableString(concert.date)"
-          :onClick="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
         >
-          <template #append-text>
-            {{ $t('from') + ' ' + concert.price.toFixed(2) + ' €' }}
-          </template>
-        </concert-list-item>
+          <v-col>
+            <concert-list-item
+              :date="concert.date"
+              :title="concert.event.name"
+              :price="concert.price"
+              @click="() => router.push('/bands/' + concert.event.bandName.replaceAll(' ', '-').toLowerCase())"
+            >
+              <template #description>
+                {{ concert.event.bandName }}
+              </template>
+            </concert-list-item>
+          </v-col>
+        </v-row>
 
         <v-row v-else>
           <v-col>