Reworked recipe card (fixes #543)

views/recipes.blade.php

@@ -129,6 +129,7 @@
 
 	@if($selectedRecipe !== null)
 	<div class="col-xs-12 col-md-6">
+		<div id="selectedRecipeCard" class="card">
 			<div class="card-header card-header-fullscreen">
 				<i class="fas fa-cocktail"></i> {{ $selectedRecipe->name }}&nbsp;&nbsp;
 				<a id="selectedRecipeConsumeButton" class="btn btn-sm btn-outline-success py-0 hide-when-embedded hide-on-fullscreen-card @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $selectedRecipe->id)->need_fulfilled == 0) disabled @endif" href="#" data-toggle="tooltip" title="{{ $__t('Consume all ingredients needed by this recipe') }}" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
@@ -147,8 +148,9 @@
 					<i class="fas fa-expand-arrows-alt"></i>
 				</a>
 			</div>
-		<div id="selectedRecipeCard" class="card">
+
 			<div class="card-body mb-0 pb-0">
+
 				<div class="row">
 					<div class="col-4">
 						@include('components.numberpicker', array(
@@ -179,30 +181,25 @@
 					</div>
 					@endif
 				</div>
-			</div>
 
 				<!-- Subrecipes first -->
 				@foreach($selectedRecipeSubRecipes as $selectedRecipeSubRecipe)
-				<div class="card-body">
+					<h3 class="mb-2">{{ $selectedRecipeSubRecipe->name }}</h3>
-					<h3 class="mb-0">{{ $selectedRecipeSubRecipe->name }}</h3>
-				</div>
 
 					@if(!empty($selectedRecipeSubRecipe->picture_file_name))
-					<p class="w-75 mx-auto txt-center"><img src="{{ $U('/api/files/recipepictures/' . base64_encode($selectedRecipeSubRecipe->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" class="img-fluid img-thumbnail lazy"></p>
+					<p class="w-75 mx-auto text-center"><img src="{{ $U('/api/files/recipepictures/' . base64_encode($selectedRecipeSubRecipe->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" class="img-fluid img-thumbnail lazy"></p>
 					@endif
 
 					@php $selectedRecipeSubRecipePositionsFiltered = FindAllObjectsInArrayByPropertyValue($selectedRecipeSubRecipesPositions, 'child_recipe_id', $selectedRecipeSubRecipe->id); @endphp
 					@if(count($selectedRecipeSubRecipePositionsFiltered) > 0)
-				<div class="card-body">
 					<h5 class="mb-0">{{ $__t('Ingredients') }}</h5>
-				</div>
 					<ul class="list-group list-group-flush">
 						@php $lastGroup = 'undefined'; @endphp
 						@foreach($selectedRecipeSubRecipePositionsFiltered as $selectedRecipePosition)
 						@if($lastGroup != $selectedRecipePosition->ingredient_group)
 							<h5 class="mb-2 mt-2 ml-4"><strong>{{ $selectedRecipePosition->ingredient_group }}</strong></h5>
 						@endif
-					<li class="list-group-item">
+						<li class="list-group-item px-0">
 							@php
 								$product = FindObjectInArrayByPropertyValue($products, 'id', $selectedRecipePosition->product_id);
 								$productQuConversions = FindAllObjectsInArrayByPropertyValue($quantityUnitConversionsResolved, 'product_id', $product->id);
@@ -234,11 +231,10 @@
 						@endforeach
 					</ul>
 					@endif
+
 					@if(!empty($selectedRecipeSubRecipe->description))
-				<div class="card-body">
+					<h5 class="mt-4">{{ $__t('Preparation') }}</h5>
-					<h5>{{ $__t('Preparation') }}</h5>
 					{!! $selectedRecipeSubRecipe->description !!}
-				</div>
 					@endif
 				@endforeach
 
@@ -248,16 +244,14 @@
 				@endif
 
 				@if($selectedRecipePositionsResolved->count() > 0)
-			<div class="card-body">
 				<h5 class="mb-0">{{ $__t('Ingredients') }}</h5>
-			</div>
 				<ul class="list-group list-group-flush">
 					@php $lastGroup = 'undefined'; @endphp
 					@foreach($selectedRecipePositionsResolved as $selectedRecipePosition)
 					@if($lastGroup != $selectedRecipePosition->ingredient_group)
 						<h5 class="mb-2 mt-2 ml-4"><strong>{{ $selectedRecipePosition->ingredient_group }}</strong></h5>
 					@endif
-				<li class="list-group-item">
+					<li class="list-group-item px-0">
 						@php
 							$product = FindObjectInArrayByPropertyValue($products, 'id', $selectedRecipePosition->product_id);
 							$productQuConversions = FindAllObjectsInArrayByPropertyValue($quantityUnitConversionsResolved, 'product_id', $product->id);
@@ -289,14 +283,14 @@
 					@endforeach
 				</ul>
 				@endif
+
 				@if(!empty($selectedRecipe->description))
-			<div class="card-body">
+				<h5 class="mt-4">{{ $__t('Preparation') }}</h5>
-				<h5>{{ $__t('Preparation') }}</h5>
 				{!! $selectedRecipe->description !!}
-			</div>
 				@endif
 			</div>
 		</div>
+	</div>
 	@endif
 </div>