Show recipe ingredients/preparation side by side in fullscreen mode (closes #2051)

This commit is contained in:
Bernd Bestel 2023-01-05 17:44:07 +01:00
parent 597abe236d
commit daf5ad33c7
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
3 changed files with 11 additions and 6 deletions

View File

@ -33,6 +33,7 @@
- Added a new entry "Add to meal plan" in the context/more menu per recipe to directly add a recipe to the meal plan from the recipes page
- Changed that when a ingredient has a "Variable amount" set, the text entered there now also replaces the unit when displaying the recipe (not only the amount as before)
- When displaying a recipe in fullscreen mode, the ingredients and preparation is now shown side by side (or below each other on small screens) instead of in tabs
- Fixed that hiding the "Requirements fulfilled" column (table options) on the recipes page didn't work
- Fixed that ingredient costs and calories were wrong when product substitution and unit conversions were involved at the same time

View File

@ -351,6 +351,10 @@ $(".recipe-fullscreen").on('click', function(e)
$("body").toggleClass("fullscreen-card");
$("#selectedRecipeCard .card-header").toggleClass("fixed-top");
$("#selectedRecipeCard .card-body").toggleClass("mt-5");
$(".recipe-content-container").toggleClass("row");
$(".recipe-content-container .ingredients").toggleClass("tab-pane").toggleClass("col-12 col-md-6 col-xl-4");
$(".recipe-content-container .preparation").toggleClass("tab-pane").toggleClass("col-12 col-md-6 col-xl-8");
$(".recipe-headline").toggleClass("d-none");
if ($("body").hasClass("fullscreen-card"))
{

View File

@ -428,7 +428,7 @@
$recipePositionsFiltered = FindAllObjectsInArrayByPropertyValue($allRecipePositions[$recipe->id], 'recipe_id', $recipe->id);
@endphp
<ul class="nav nav-tabs grocy-tabs mb-3 d-print-none"
<ul class="nav nav-tabs grocy-tabs mb-3 d-print-none hide-on-fullscreen-card"
role="tablist">
@if(count($recipePositionsFiltered) > 0)
<li class="nav-item">
@ -448,12 +448,12 @@
@endif
</ul>
<div class="tab-content grocy-tabs p-2 print">
<div class="tab-content grocy-tabs p-2 print recipe-content-container">
@if(count($recipePositionsFiltered) > 0)
<div class="tab-pane active"
<div class="tab-pane active ingredients"
id="ingredients-{{ $index }}"
role="tabpanel">
<div class="mb-2 mt-3 d-none d-print-block">
<div class="mb-2 d-none d-print-block recipe-headline">
<h3 class="mb-0">{{ $__t('Ingredients') }}</h3>
</div>
<ul class="list-group list-group-flush mb-5">
@ -535,10 +535,10 @@
</ul>
</div>
@endif
<div class="tab-pane @if(count($recipePositionsFiltered) == 0) active @endif"
<div class="tab-pane @if(count($recipePositionsFiltered) == 0) active @endif preparation"
id="prep-{{ $index }}"
role="tabpanel">
<div class="mb-2 d-none d-print-block">
<div class="mb-2 d-none d-print-block recipe-headline">
<h3 class="mb-0">{{ $__t('Preparation') }}</h3>
</div>
@if(!empty($recipe->description))