Improve UI of concertListItem and eventListItem

software/src/components/basics/cardViewHorizontal.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
 defineProps({
-  /** Image to display on the left side */
+  /** Image to display on the left side (if prepend slot is not in use) */
   image: String,
 
-  /** Title in the top bar */
-  title: String,
-
   /** Make the CardView click- and hoverable */
   link: {
     type: Boolean,
@@ -18,7 +15,7 @@ defineProps({
   /** Height of the card, default 140px */
   height: {
     type: Number,
-    default: 200
+    default: 140
   },
 
   colorHeader: String
@@ -29,54 +26,68 @@ defineProps({
   <v-card
     variant="tonal"
     :link="link"
+    :height="height"
   >
-    <v-card-title v-if="title" color="primary" class="pa-0">
-      <v-sheet color="primary" class="pl-2 py-1">
-        {{ title }}
-      </v-sheet>
-    </v-card-title>
-
-    <v-row :height="height">
-      <!-- First col for image -->
+    <v-row
+      no-gutters
+    >
+      <!-- First col for image or prepend text -->
       <v-col
-        cols="3"
+        :cols="!$slots.prepend ? 'auto' : 2"
       >
         <v-skeleton-loader
+          v-if="!$slots.prepend"
           type="image"
           :loading="loading"
         >
           <v-img 
             :src="image" 
             :height="height"
-            :width="100"
-            aspect-ratio="1"
+            :width="height"
             cover
           />
         </v-skeleton-loader>
+
+        <v-skeleton-loader
+          v-else
+          type="text"
+          :loading="loading"
+        >
+          <v-sheet
+            :height="height"
+            width="100%"
+            class="text-center d-flex justify-center align-center"
+          >
+            <slot name="prepend" />
+          </v-sheet>
+        </v-skeleton-loader>
       </v-col>
 
+      <v-divider vertical v-if="$slots.prepend" />
+
       <!-- Second col for main content -->
       <v-col
-        cols="7"
-        class="text-h5"
+        class="pl-2"
       >
         <v-skeleton-loader
           :loading="loading"
           type="sentences"
-          class="my-2"
         >
-          <div>
+          <v-sheet
+            :height="height"
+          >
             <slot name="content" />
-          </div>
+          </v-sheet>
         </v-skeleton-loader>
       </v-col>
 
-      <v-divider vertical class="mt-3" />
+      <v-divider vertical />
 
       <!-- Third col for append content after the divider -->
       <v-col
-        cols="2"
-        class="text-center pr-5 text-h5 d-flex justify-center align-center"
+        class="text-center d-flex justify-center align-center"
+        cols="3"
+        lg="2"
       >
         <slot name="append"></slot>
       </v-col>

software/src/components/basics/cardViewTopImage.vue

@@ -42,8 +42,7 @@ defineProps({
           />
         </template>
       </v-img>
-      
-      </v-skeleton-loader>
+    </v-skeleton-loader>
 
     <v-skeleton-loader
       :loading="loading"
@@ -64,7 +63,7 @@ defineProps({
       type="sentences"
       :loading="loading"
     >
-      <div class="px-4 pb-4" v-if="$slots.default">
+      <div class="px-4 pb-4 text-disabled" v-if="$slots.default">
         <slot></slot>
       </div>
     </v-skeleton-loader>

software/src/components/pageParts/concertListItem.vue

@@ -1,62 +1,68 @@
 <script setup lang="ts">
-import cardWithLeftImage from '../basics/cardViewLeftImage.vue';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { ConcertModel } from '@/data/models/acts/concertModel';
 
 defineProps({
-  /** Image to print on the left side */ 
-  image: String,
+  concert: ConcertModel,
+  date: String,
   title: String,
-  loading: Boolean,
-  appendIcon: {
-    type: String,
-    default: "mdi-ticket"
-  },
-  appendIconColor: {
-    type: String,
-    default: "secondary"
-  },
-  link: {
-    type: Boolean,
-    default: true
-  }
+  description: String,
+  eventName: String,
+  price: Number,
+  loading: Boolean
 })
 </script>
 
 <template>
-  <v-row v-if="!loading">
-    <v-col>
-      <card-with-left-image
-        :title="title"
-        :image="'http://localhost:3000/static/' + image"
-        :link="link"
-      >
-        <template #content>
-          <div>
-            <slot name="content" />
-          </div>
-        </template>
+  <card-view-horizontal v-if="!loading">
+    <template #prepend>
+      <div>
+        <div class="text-h4">
+          {{ String(new Date(date).getDate()).padStart(2, "0") }}
+        </div>
 
-        <template #append>
-          <div>
-            <div>
-              <v-icon
-                :icon="appendIcon"
-                :color="appendIconColor"
-                size="x-large"
-              />
-            </div>
-            <slot name="append-text"></slot>
-          </div>
-        </template>
-      </card-with-left-image>
-    </v-col>
-  </v-row>
+        <div class="text-h6">
+          {{ new Date(date).toLocaleString('default', { month: 'long' }) }}
+        </div>
 
-  <v-row v-else>
-    <v-col>
-      <card-with-left-image :loading="loading">
-        <v-skeleton-loader
-          type="text" />
-      </card-with-left-image>
-    </v-col>
-  </v-row>
+        <div class="text-h6">
+          {{ new Date(date).getFullYear() }}
+        </div>
+      </div>
+    </template>
+
+    <template #content>
+      <div>
+        <div class="text-h4 font-weight-black pt-2 h-100">
+          {{ title }}
+        </div>
+
+        <div class="text-disabled">
+          <slot name="description" />
+        </div>
+      </div>
+    </template>
+
+    <template #append>
+      <div>
+        <div class="text-secondary font-weight-medium text-body-1 pb-1">
+          {{ $t('from') + ' ' + price.toFixed(2) + ' €' }}
+        </div>
+
+        <div>
+          <v-btn variant="flat" color="secondary">
+            {{ $t('goToTheConcert') }}
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </card-view-horizontal>
+
+  <card-view-horizontal 
+    v-else
+    :loading="loading"
+  >
+    <v-skeleton-loader
+      type="text" />
+  </card-view-horizontal>
 </template>

software/src/components/pageParts/ticketListItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ConcertModel } from '@/data/models/acts/concertModel';
-import cardWithLeftImage from '../basics/cardViewLeftImage.vue';
+import cardWithLeftImage from '../basics/cardViewHorizontal.vue';
 import { dateStringToHumanReadableString, dateToHumanReadableString } from '@/scripts/dateTimeScripts';
 
 defineProps({