From 866d6647d2aa5cebbbafc54bf256a69d58395c01 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Mon, 12 Jul 2021 17:43:30 +0200
Subject: [PATCH] Small meal plan page adjustments

---
 public/viewjs/mealplan.js |  4 ++--
 views/mealplan.blade.php  | 12 ++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/viewjs/mealplan.js b/public/viewjs/mealplan.js
index 3109e070..6a66e938 100644
--- a/public/viewjs/mealplan.js
+++ b/public/viewjs/mealplan.js
@@ -151,7 +151,7 @@ var calendar = $("#calendar").fullCalendar({
 
 			if (recipe.picture_file_name && !recipe.picture_file_name.isEmpty())
 			{
-				element.html(element.html() + '<div class="mx-auto"><img data-src="' + U("/api/files/recipepictures/") + btoa(recipe.picture_file_name) + '?force_serve_as=picture&best_fit_width=400" class="img-fluid lazy"></div>')
+				element.prepend('<div class="mx-auto mb-1"><img data-src="' + U("/api/files/recipepictures/") + btoa(recipe.picture_file_name) + '?force_serve_as=picture&best_fit_width=400" class="img-fluid rounded-circle lazy"></div>')
 			}
 
 			var dayRecipeName = event.start.format("YYYY-MM-DD");
@@ -237,7 +237,7 @@ var calendar = $("#calendar").fullCalendar({
 
 			if (productDetails.product.picture_file_name && !productDetails.product.picture_file_name.isEmpty())
 			{
-				element.html(element.html() + '<div class="mx-auto"><img data-src="' + U("/api/files/productpictures/") + btoa(productDetails.product.picture_file_name) + '?force_serve_as=picture&best_fit_width=400" class="img-fluid lazy"></div>')
+				element.prepend('<div class="mx-auto mb-1"><img data-src="' + U("/api/files/productpictures/") + btoa(productDetails.product.picture_file_name) + '?force_serve_as=picture&best_fit_width=400" class="img-fluid rounded-circle lazy"></div>')
 			}
 
 			var dayRecipeName = event.start.format("YYYY-MM-DD");
diff --git a/views/mealplan.blade.php b/views/mealplan.blade.php
index fba05fe7..27b87d8f 100644
--- a/views/mealplan.blade.php
+++ b/views/mealplan.blade.php
@@ -12,6 +12,18 @@
 @push('pageStyles')
 <link href="{{ $U('/node_modules/fullcalendar/dist/fullcalendar.min.css?v=', true) }}{{ $version }}"
 	rel="stylesheet">
+
+<style>
+	.fc-event-container:not(:last-child) {
+		border-bottom: 1px solid !important;
+		border-color: #d6d6d6 !important;
+	}
+
+	.img-fluid {
+		max-width: 90%;
+	}
+
+</style>
 @endpush
 
 @section('content')