Hide the recipe interaction buttons when displayed as a fullscreen card (as the dialogs would be behind the fullscreen card)

This commit is contained in:
Bernd Bestel
2019-09-24 10:28:42 +02:00
parent 3b29110500
commit 50e829f270
2 changed files with 8 additions and 4 deletions

View File

@@ -63,6 +63,10 @@ a.discrete-link:focus {
overflow: hidden; overflow: hidden;
} }
.fullscreen-card .hide-on-fullscreen-card {
display: none;
}
.form-check-input.is-valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label { .was-validated .form-check-input:valid ~ .form-check-label {
color: inherit; color: inherit;

View File

@@ -132,16 +132,16 @@
<div id="selectedRecipeCard" class="card"> <div id="selectedRecipeCard" class="card">
<div class="card-header"> <div class="card-header">
<i class="fas fa-cocktail"></i> {{ $selectedRecipe->name }}&nbsp;&nbsp; <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 @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 }}"> <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 }}">
<i class="fas fa-utensils"></i> <i class="fas fa-utensils"></i>
</a> </a>
<a class="btn btn-sm btn-outline-primary py-0 recipe-order-missing-button hide-when-embedded @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $selectedRecipe->id)->need_fulfilled_with_shopping_list == 1) disabled @endif" href="#" data-toggle="tooltip" title="{{ $__t('Put missing products on shopping list') }}" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}"> <a class="btn btn-sm btn-outline-primary py-0 recipe-order-missing-button hide-when-embedded hide-on-fullscreen-card @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $selectedRecipe->id)->need_fulfilled_with_shopping_list == 1) disabled @endif" href="#" data-toggle="tooltip" title="{{ $__t('Put missing products on shopping list') }}" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
<i class="fas fa-cart-plus"></i> <i class="fas fa-cart-plus"></i>
</a>&nbsp;&nbsp; </a>&nbsp;&nbsp;
<a id="selectedRecipeEditButton" class="btn btn-sm btn-outline-info hide-when-embedded py-0" href="{{ $U('/recipe/') }}{{ $selectedRecipe->id }}"> <a id="selectedRecipeEditButton" class="btn btn-sm btn-outline-info hide-when-embedded hide-on-fullscreen-card py-0" href="{{ $U('/recipe/') }}{{ $selectedRecipe->id }}">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</a> </a>
<a id="selectedRecipeDeleteButton" class="btn btn-sm btn-outline-danger hide-when-embedded py-0" href="#" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}"> <a id="selectedRecipeDeleteButton" class="btn btn-sm btn-outline-danger hide-when-embedded hide-on-fullscreen-card py-0" href="#" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</a> </a>
<a id="selectedRecipeToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 hide-when-embedded float-right" href="#" data-toggle="tooltip" title="{{ $__t('Expand to fullscreen') }}"> <a id="selectedRecipeToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 hide-when-embedded float-right" href="#" data-toggle="tooltip" title="{{ $__t('Expand to fullscreen') }}">