kenmirrors/grocy
1
0
Fork 0
mirror of https://github.com/grocy/grocy.git synced 2025-04-30 10:05:45 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog/70_UNRELEASED_xxxx.xx.xx.md
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 - 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) - 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 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 - Fixed that ingredient costs and calories were wrong when product substitution and unit conversions were involved at the same time

4
public/viewjs/recipes.js
View File

@ -351,6 +351,10 @@ $(".recipe-fullscreen").on('click', function(e)
$("body").toggleClass("fullscreen-card"); $("body").toggleClass("fullscreen-card");
$("#selectedRecipeCard .card-header").toggleClass("fixed-top"); $("#selectedRecipeCard .card-header").toggleClass("fixed-top");
$("#selectedRecipeCard .card-body").toggleClass("mt-5"); $("#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")) if ($("body").hasClass("fullscreen-card"))
{ {

12
views/recipes.blade.php
View File

@ -428,7 +428,7 @@
$recipePositionsFiltered = FindAllObjectsInArrayByPropertyValue($allRecipePositions[$recipe->id], 'recipe_id', $recipe->id); $recipePositionsFiltered = FindAllObjectsInArrayByPropertyValue($allRecipePositions[$recipe->id], 'recipe_id', $recipe->id);
@endphp @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"> role="tablist">
@if(count($recipePositionsFiltered) > 0) @if(count($recipePositionsFiltered) > 0)
<li class="nav-item"> <li class="nav-item">
@ -448,12 +448,12 @@
@endif @endif
</ul> </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) @if(count($recipePositionsFiltered) > 0)
<div class="tab-pane active" <div class="tab-pane active ingredients"
id="ingredients-{{ $index }}" id="ingredients-{{ $index }}"
role="tabpanel"> 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> <h3 class="mb-0">{{ $__t('Ingredients') }}</h3>
</div> </div>
<ul class="list-group list-group-flush mb-5"> <ul class="list-group list-group-flush mb-5">
@ -535,10 +535,10 @@
</ul> </ul>
</div> </div>
@endif @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 }}" id="prep-{{ $index }}"
role="tabpanel"> 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> <h3 class="mb-0">{{ $__t('Preparation') }}</h3>
</div> </div>
@if(!empty($recipe->description)) @if(!empty($recipe->description))