Some little changes for pull request #369 (also references #367)

changelog/53_UNRELEASED_2019-xx-xx.md

@@ -0,0 +1,2 @@
+- It's now possible to display a recipe directly from the meal plan (new "eye button") (thanks @kriddles)
+- Some style/CSS detail-refinements

localization/strings.pot

@@ -1516,3 +1516,6 @@ msgstr ""
 
 msgid "Miss"
 msgstr ""
+
+msgid "Display recipe"
+msgstr ""

public/css/grocy.css

@@ -58,6 +58,10 @@ a.discrete-link:focus {
 	left: 0;
 	overflow: auto;
  }
+ 
+ body.fullscreen-card {
+	 overflow: hidden;
+ }
 
  .form-check-input.is-valid ~ .form-check-label,
  .was-validated .form-check-input:valid ~ .form-check-label {

public/viewjs/mealplan.js

@@ -103,7 +103,7 @@ var calendar = $("#calendar").fullCalendar({
 					<a class="ml-1 btn btn-outline-danger btn-xs remove-recipe-button" href="#"><i class="fas fa-trash"></i></a> \
 					<a class="ml-1 btn btn-outline-primary btn-xs recipe-order-missing-button ' + recipeOrderMissingButtonDisabledClasses + '" href="#" data-toggle="tooltip" title="' + __t("Put missing products on shopping list") + '" data-recipe-id="' + recipe.id.toString() + '" data-recipe-name="' + recipe.name + '" data-recipe-type="' + recipe.type + '"><i class="fas fa-cart-plus"></i></a> \
 					<a class="ml-1 btn btn-outline-success btn-xs recipe-consume-button ' + recipeConsumeButtonDisabledClasses + '" href="#" data-toggle="tooltip" title="' + __t("Consume all ingredients needed by this recipe") + '" data-recipe-id="' + recipe.id.toString() + '" data-recipe-name="' + recipe.name + '" data-recipe-type="' + recipe.type + '"><i class="fas fa-utensils"></i></a> \
-					<a class="ml-1 btn btn-outline-primary btn-xs recipe-popup-button" href="#" data-toggle="tooltip" title="' + __t("Popup Recipe") + '" data-recipe-id="' + recipe.id.toString() + '" data-recipe-name="' + recipe.name + '" data-recipe-type="' + recipe.type + '"><i class="fas fa-expand-arrows-alt"></i></a> \
+					<a class="ml-1 btn btn-outline-secondary btn-xs recipe-popup-button" href="#" data-toggle="tooltip" title="' + __t("Display recipe") + '" data-recipe-id="' + recipe.id.toString() + '" data-recipe-name="' + recipe.name + '" data-recipe-type="' + recipe.type + '"><i class="fas fa-eye"></i></a> \
 				</h5> \
 			</div>');
 
@@ -305,13 +305,13 @@ $(document).on("click", ".recipe-popup-button", function(e)
 	var objectId = $(e.currentTarget).attr('data-recipe-id');
 
 	bootbox.dialog({
-		message: '<iframe height="650px" class="embed-responsive" src="' + U("/recipes?recipe=") + objectId + '#fullscreen"></iframe>',
+		message: '<iframe height="650px" class="embed-responsive" src="' + U("/recipes?embedded&recipe=") + objectId + '#fullscreen"></iframe>',
-		size: 'large',
+		size: 'extra-large',
 		backdrop: true,
 		closeButton: false,
 		buttons: {
 			cancel: {
-				label: __t('Cancel'),
+				label: __t('Close'),
 				className: 'btn-secondary responsive-button',
 				callback: function()
 				{

views/recipes.blade.php

@@ -132,19 +132,19 @@
 		<div id="selectedRecipeCard" class="card">
 			<div class="card-header">
 				<i class="fas fa-cocktail"></i> {{ $selectedRecipe->name }}&nbsp;&nbsp;
-				<a id="selectedRecipeConsumeButton" class="btn btn-sm btn-outline-success py-0 @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 @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>
 				</a>
-				<a class="btn btn-sm btn-outline-primary py-0 recipe-order-missing-button @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 @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>
 				</a>&nbsp;&nbsp;
-				<a id="selectedRecipeEditButton" class="btn btn-sm btn-outline-info py-0" href="{{ $U('/recipe/') }}{{ $selectedRecipe->id }}">
+				<a id="selectedRecipeEditButton" class="btn btn-sm btn-outline-info hide-when-embedded py-0" href="{{ $U('/recipe/') }}{{ $selectedRecipe->id }}">
 					<i class="fas fa-edit"></i>
 				</a>
-				<a id="selectedRecipeDeleteButton" class="btn btn-sm btn-outline-danger 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 py-0" href="#" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
 					<i class="fas fa-trash"></i>
 				</a>
-				<a id="selectedRecipeToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 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') }}">
 					<i class="fas fa-expand-arrows-alt"></i>
 				</a>
 			</div>