|
|
@@ -83,6 +83,29 @@
|
|
|
<div class="card-body">
|
|
|
@if (dayPlan.Recipe != null)
|
|
|
{
|
|
|
+ <!-- Recipe Image -->
|
|
|
+ <div class="recipe-image-container mb-3 position-relative">
|
|
|
+ <img src="@Url.Action("GetImage", "Recipe", new { recipeId = dayPlan.Recipe.Id })"
|
|
|
+ class="card-img-top rounded"
|
|
|
+ alt="@dayPlan.Recipe.Title"
|
|
|
+ style="height: 180px; object-fit: contain; width: 100%;
|
|
|
+ filter: brightness(1.1) contrast(1.2) saturate(1.1);
|
|
|
+ border: 2px solid #e9ecef; background-color: #f8f9fa;"
|
|
|
+ onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
|
|
|
+ <!-- Gradient overlay for better text readability if needed -->
|
|
|
+ <div class="position-absolute bottom-0 start-0 end-0 bg-gradient-to-top"
|
|
|
+ style="height: 60px; background: linear-gradient(transparent, rgba(0,0,0,0.3)); border-radius: 0 0 6px 6px; pointer-events: none;"></div>
|
|
|
+
|
|
|
+ <div class="card-img-placeholder text-center p-3 rounded border"
|
|
|
+ style="height: 180px; display: none; align-items: center; justify-content: center; border: 2px solid #e9ecef; background-color: #f8f9fa;">
|
|
|
+ <div>
|
|
|
+ <i class="fas fa-utensils text-primary fa-3x mb-2"></i>
|
|
|
+ <p class="text-muted mb-0 fw-bold">No image available</p>
|
|
|
+ <p class="text-muted mb-0 small">Recipe without photo</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<h6 class="card-title">
|
|
|
<a href="/Recipe/Details/@dayPlan.Recipe.Id" class="text-decoration-none">
|
|
|
@dayPlan.Recipe.Title
|
|
|
@@ -99,6 +122,17 @@
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
+ <!-- Placeholder when no recipe is selected -->
|
|
|
+ <div class="recipe-image-placeholder mb-3">
|
|
|
+ <div class="card-img-placeholder text-center p-4 rounded bg-light shadow-sm"
|
|
|
+ style="height: 140px; display: flex; align-items: center; justify-content: center;">
|
|
|
+ <div>
|
|
|
+ <i class="fas fa-plus-circle text-muted fa-2x mb-2"></i>
|
|
|
+ <p class="text-muted mb-0 small">Click Configure or Random Recipe</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<p class="text-muted mb-2">No recipe selected</p>
|
|
|
@if (!string.IsNullOrEmpty(dayPlan.MainIngredient))
|
|
|
{
|
