From 0a1a2ee087765c1188a42517de68f8cb09e96009 Mon Sep 17 00:00:00 2001
From: Torsten Schulz <tsschulz@gmx.net>
Date: Mon, 21 Oct 2024 18:48:20 +0200
Subject: [PATCH] Show images in diary at clicking icon

---
 frontend/src/views/DiaryView.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 0a3baee..2c3e1eb 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -172,6 +172,7 @@
             </div>
         </div>
     </div>
+    <img v-if="showImage" class="img" :src="imageUrl" @click="closeImage()" />
 </template>
 
 <script>
@@ -766,6 +767,7 @@ export default {
                     responseType: 'blob',
                 });
                 this.imageUrl = URL.createObjectURL(response.data);
+                this.showImage = true;
             } catch (error) {
                 console.error("Failed to load member image:", error);
                 this.imageUrl = null;
@@ -1023,8 +1025,18 @@ input[type="number"] {
     flex: 1;
 }
 
+.img-icon {
+    cursor: pointer;
+}
+
 img {
-    max-width: 100%;
+    max-width: 75%;
+    max-height: 75%;
+    position: absolute;
+    left: 12.5%;
+    top: 12.5%;
+    box-shadow: 3px 3px 2px;
+    border: 3px double #aaa;
 }
 
 .memberImage {