From 23ab1758df49cb0dc9f9070f0f518ccdfd2d5381 Mon Sep 17 00:00:00 2001
From: Daniel Grams <grams.daniel@gmail.com>
Date: Mon, 17 Jan 2022 12:31:54 +0100
Subject: [PATCH] Merkzettel #362

---
 .../vue/user-favorite-events/list.vue.js      | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/project/static/vue/user-favorite-events/list.vue.js b/project/static/vue/user-favorite-events/list.vue.js
index 742431a..25ddc00 100644
--- a/project/static/vue/user-favorite-events/list.vue.js
+++ b/project/static/vue/user-favorite-events/list.vue.js
@@ -9,22 +9,24 @@ const UserFavoriteEventList = {
               <button type="button" class="btn btn-outline-secondary" @click="loadData()"><i class="fa fa-sync-alt"></i></button>
           </div>
 
-          <div v-for="event in items">
-            <div class="card mb-3">
-                <div>
-                    <img v-if="event.photo" :src="url_for_image(event.photo, 500)" class="card-img-top" style="object-fit: cover; height: 40vw;" />
-                </div>
-                <div class="card-body">
-                  <h5 class="card-title"><a href="#" @click.stop.prevent="viewItem(event.id)">{{ event.name }}</a> <event-warning-pills :event="event"></event-warning-pills></h5>
-                  <h6 class="card-subtitle mb-2 text-body"><i class="fa fa-calendar"></i> {{ $root.render_event_date_instance(event.date_definitions[0].start, event.date_definitions[0].allday) }}</h6>
-                  <p class="card-text" v-if="event.description" v-html="event.description.truncate(100, true)"></p>
-                  <small class="text-muted mr-2"><i class="fa fa-database"></i> {{ event.organization.name }}</small>
-                  <small v-if="event.organizer.name != event.organization.name" class="text-muted mr-2"><i class="fa fa-server"></i> {{ event.organizer.name }}</small>
-                  <small class="text-muted"><i class="fa fa-map-marker"></i> {{ event.place.name }}</small>
-                </div>
-                <div class="card-footer">
-                  <a href="#" @click.stop.prevent="removeItem(event.id)" class="card-link">{{ $t("shared.delete") }}&hellip;</a>
-                </div>
+          <div style="max-width: 400px;">
+            <div v-for="event in items">
+              <div class="card mb-3">
+                  <div>
+                      <img v-if="event.photo" :src="$root.url_for_image(event.photo, 500)" class="card-img-top" style="object-fit: cover; height: 12vw;" />
+                  </div>
+                  <div class="card-body">
+                    <h5 class="card-title"><a href="#" @click.stop.prevent="viewItem(event.id)">{{ event.name }}</a> <event-warning-pills :event="event"></event-warning-pills></h5>
+                    <h6 class="card-subtitle mb-2 text-body"><i class="fa fa-calendar"></i> {{ $root.render_event_date_instance(event.date_definitions[0].start, event.date_definitions[0].allday) }}</h6>
+                    <p class="card-text" v-if="event.description" v-html="event.description.truncate(100, true)"></p>
+                    <small class="text-muted mr-2"><i class="fa fa-database"></i> {{ event.organization.name }}</small>
+                    <small v-if="event.organizer.name != event.organization.name" class="text-muted mr-2"><i class="fa fa-server"></i> {{ event.organizer.name }}</small>
+                    <small class="text-muted"><i class="fa fa-map-marker"></i> {{ event.place.name }}</small>
+                  </div>
+                  <div class="card-footer">
+                    <a href="#" @click.stop.prevent="removeItem(event.id)" class="card-link">{{ $t("shared.delete") }}&hellip;</a>
+                  </div>
+              </div>
             </div>
           </div>