Hide elements when printing (#1559)

* Hide elements when printing

* Hide elements when printing

* Also hide the title menu collapse button

* Added a print button

All print-optimized pages have that

Co-authored-by: Bernd Bestel <bernd@berrnd.de>

public/css/grocy.css

@@ -66,7 +66,7 @@ a.discrete-link:focus {
 	width: 100%;
 }
 
- /* Fixes smooth scrolling on iOS */
+/* Fixes smooth scrolling on iOS */
 #sidebarResponsive,
 .fullscreen {
 	-webkit-overflow-scrolling: touch;
@@ -80,11 +80,11 @@ a.discrete-link:focus {
 	left: 0;
 }
 
- body.fullscreen-card {
+body.fullscreen-card {
 	overflow: hidden;
- }
+}
 
- .fullscreen-card .hide-on-fullscreen-card {
+.fullscreen-card .hide-on-fullscreen-card {
 	display: none;
 }
 
@@ -93,10 +93,10 @@ a.discrete-link:focus {
 	margin: 0 auto;
 }
 
- .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,
 .custom-control-input.is-valid ~ .custom-control-label,
- .was-validated .custom-control-input:valid ~ .custom-control-label {
+.was-validated .custom-control-input:valid ~ .custom-control-label {
 	color: inherit;
 }
 
@@ -111,9 +111,11 @@ button.disabled {
 .embedded .hide-when-embedded {
 	display: none;
 }
+
 body.embedded.fixed-nav {
 	padding-top: 0;
 }
+
 .embedded .content-wrapper {
 	margin-left: 0;
 }
@@ -126,6 +128,7 @@ iframe {
 input[type='number'] {
 	-moz-appearance: textfield;
 }
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
 	-webkit-appearance: none;
@@ -260,7 +263,7 @@ a:not([href]) {
 
 .table-inline-menu .dropdown-item .dropdown-item-icon {
 	min-width: 24px;
-	padding-left:20px;
+	padding-left: 20px;
 	text-align: center;
 	display: inline;
 }
@@ -276,13 +279,16 @@ a:not([href]) {
 #barcodescanner-container {
 	max-height: 90vw;
 }
+
 #livestream-container {
 	max-height: 100%;
 }
+
 #barcodescanner-livestream video {
 	width: 100%;
 
 }
+
 #barcodescanner-livestream canvas {
 	width: 100%;
 }
@@ -300,6 +306,7 @@ a:not([href]) {
 .was-validated .custom-control:valid {
 	background-image: none;
 }
+
 .was-validated .custom-select:valid,
 .was-validated .custom-select:invalid {
 	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
@@ -311,9 +318,9 @@ a:not([href]) {
 }
 
 .btn-group-xs > .btn, .btn-xs {
-	padding : 0.25rem 0.4rem;
+	padding: 0.25rem 0.4rem;
-	font-size : 0.875rem;
+	font-size: 0.875rem;
-	line-height : 0.5;
+	line-height: 0.5;
 	border-radius: 0.2rem;
 }
 
@@ -392,6 +399,7 @@ tr.dtrg-group {
 	font-family: 'Font Awesome 5 Free';
 	font-weight: 900;
 }
+
 #mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link.py-0:after,
 #mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.py-0:after {
 	padding-top: 8px;
@@ -402,7 +410,7 @@ tr.dtrg-group {
 	padding: 0.75em;
 }
 
-@media (min-width:992px) {
+@media (min-width: 992px) {
 	#mainNav .navbar-collapse .navbar-sidenav {
 		margin-top: 46px;
 	}
@@ -412,7 +420,7 @@ tr.dtrg-group {
 	}
 
 	#mainNav.fixed-top .sidenav-toggler {
-		margin-top:calc(100vh - 48px);
+		margin-top: calc(100vh - 48px);
 	}
 
 	.content-wrapper {
@@ -549,7 +557,7 @@ canvas.drawingBuffer {
 	width: 125px;
 }
 
-.fc-event{
+.fc-event {
 	cursor: pointer;
 }
 
@@ -558,7 +566,7 @@ canvas.drawingBuffer {
 	text-transform: uppercase;
 }
 
- .grocy-tabs .nav-link {
+.grocy-tabs .nav-link {
 	border: 2px solid transparent;
 	transition: border-bottom-color ease-in 0.1s;
 }
@@ -612,6 +620,12 @@ canvas.drawingBuffer {
 		max-width: 100%;
 		flex-basis: 100%;
 	}
+
+	.calendar button.fc-prev-button,
+	.calendar button.fc-today-button,
+	.calendar button.fc-next-button {
+		display: none;
+	}
 }
 
 .not-allowed {

public/viewjs/mealplan.js

@@ -57,7 +57,7 @@ $(".calendar").each(function()
 			}
 
 			$(".calendar[data-primary-section='true'] .fc-day-header").prepend('\
-			<div class="btn-group mr-2 my-1"> \
+			<div class="btn-group mr-2 my-1 d-print-none"> \
 				<button type="button" class="btn btn-outline-dark btn-xs add-recipe-button" data-toggle="tooltip" title="' + __t('Add recipe') + '"><i class="fas fa-plus"></i></a></button> \
 				<button type="button" class="btn btn-outline-dark btn-xs dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> \
 				<div class="table-inline-menu dropdown-menu"> \
@@ -97,10 +97,10 @@ $(".calendar").each(function()
 				var weekRecipeOrderMissingButtonHtml = "";
 				if (Grocy.FeatureFlags.GROCY_FEATURE_FLAG_SHOPPINGLIST)
 				{
-					weekRecipeOrderMissingButtonHtml = '<a class="ml-1 btn btn-outline-primary btn-xs recipe-order-missing-button ' + weekRecipeOrderMissingButtonDisabledClasses + '" href="#" data-toggle="tooltip" title="' + __t("Put missing products on shopping list") + '" data-recipe-id="' + weekRecipe.id.toString() + '" data-recipe-name="' + weekRecipe.name + '" data-recipe-type="' + weekRecipe.type + '"><i class="fas fa-cart-plus"></i></a>';
+					weekRecipeOrderMissingButtonHtml = '<a class="ml-1 btn btn-outline-primary btn-xs recipe-order-missing-button d-print-none ' + weekRecipeOrderMissingButtonDisabledClasses + '" href="#" data-toggle="tooltip" title="' + __t("Put missing products on shopping list") + '" data-recipe-id="' + weekRecipe.id.toString() + '" data-recipe-name="' + weekRecipe.name + '" data-recipe-type="' + weekRecipe.type + '"><i class="fas fa-cart-plus"></i></a>';
 				}
 
-				weekRecipeConsumeButtonHtml = '<a class="ml-1 btn btn-outline-success btn-xs recipe-consume-button ' + weekRecipeConsumeButtonDisabledClasses + '" href="#" data-toggle="tooltip" title="' + __t("Consume all ingredients needed by this weeks recipes or products") + '" data-recipe-id="' + weekRecipe.id.toString() + '" data-recipe-name="' + weekRecipe.name + '" data-recipe-type="' + weekRecipe.type + '"><i class="fas fa-utensils"></i></a>'
+				weekRecipeConsumeButtonHtml = '<a class="ml-1 btn btn-outline-success btn-xs recipe-consume-button d-print-none ' + weekRecipeConsumeButtonDisabledClasses + '" href="#" data-toggle="tooltip" title="' + __t("Consume all ingredients needed by this weeks recipes or products") + '" data-recipe-id="' + weekRecipe.id.toString() + '" data-recipe-name="' + weekRecipe.name + '" data-recipe-type="' + weekRecipe.type + '"><i class="fas fa-utensils"></i></a>'
 			}
 			$(".calendar[data-primary-section='true'] .fc-header-toolbar .fc-center").html("<h4>" + weekCostsHtml + weekRecipeOrderMissingButtonHtml + weekRecipeConsumeButtonHtml + "</h4>");
 		},
@@ -185,7 +185,7 @@ $(".calendar").each(function()
 					<h5 class="small text-truncate mb-1">' + __n(mealPlanEntry.recipe_servings, "%s serving", "%s servings") + '</h5> \
 					<h5 class="small timeago-contextual text-truncate mb-1">' + fulfillmentIconHtml + " " + fulfillmentInfoHtml + '</h5> \
 					' + costsAndCaloriesPerServing + ' \
-					<h5> \
+					<h5 class="d-print-none"> \
 						<a class="ml-1 btn btn-outline-info btn-xs edit-meal-plan-entry-button" href="#" data-toggle="tooltip" title="' + __t("Edit this item") + '"><i class="fas fa-edit"></i></a> \
 						<a class="btn btn-outline-danger btn-xs remove-recipe-button" href="#" data-toggle="tooltip" title="' + __t("Delete this item") + '"><i class="fas fa-trash"></i></a> \
 						' + shoppingListButtonHtml + ' \
@@ -256,7 +256,7 @@ $(".calendar").each(function()
 					<h5 class="small text-truncate mb-1"><span class="locale-number locale-number-quantity-amount">' + mealPlanEntry.product_amount + "</span> " + __n(mealPlanEntry.product_amount, productDetails.quantity_unit_stock.name, productDetails.quantity_unit_stock.name_plural) + '</h5> \
 					<h5 class="small timeago-contextual text-truncate mb-1">' + fulfillmentIconHtml + " " + fulfillmentInfoHtml + '</h5> \
 					' + costsAndCaloriesPerServing + ' \
-					<h5> \
+					<h5 class="d-print-none"> \
 						<a class="ml-1 btn btn-outline-danger btn-xs remove-product-button" href="#" data-toggle="tooltip" title="' + __t("Delete this item") + '"><i class="fas fa-trash"></i></a> \
 						<a class="btn btn-outline-info btn-xs edit-meal-plan-entry-button" href="#" data-toggle="tooltip" title="' + __t("Edit this item") + '"><i class="fas fa-edit"></i></a> \
 						<a class="ml-1 btn btn-outline-success btn-xs product-consume-button ' + productConsumeButtonDisabledClasses + '" href="#" data-toggle="tooltip" title="' + __t("Consume %1$s of %2$s", parseFloat(mealPlanEntry.product_amount).toLocaleString() + ' ' + __n(mealPlanEntry.product_amount, productDetails.quantity_unit_stock.name, productDetails.quantity_unit_stock.name_plural), productDetails.product.name) + '" data-product-id="' + productDetails.product.id.toString() + '" data-product-name="' + productDetails.product.name + '" data-product-amount="' + mealPlanEntry.product_amount + '" data-mealplan-entry-id="' + mealPlanEntry.id.toString() + '"><i class="fas fa-utensils"></i></a> \
@@ -275,7 +275,7 @@ $(".calendar").each(function()
 				element.html('\
 				<div> \
 					<h5 class="text-wrap text-break mb-1 ' + additionalTitleCssClasses + '">' + mealPlanEntry.note + '</h5> \
-					<h5> \
+					<h5 class="d-print-none"> \
 						<a class="ml-1 btn btn-outline-danger btn-xs remove-note-button" href="#" data-toggle="tooltip" title="' + __t("Delete this item") + '"><i class="fas fa-trash"></i></a> \
 						<a class="btn btn-outline-info btn-xs edit-meal-plan-entry-button" href="#" data-toggle="tooltip" title="' + __t("Delete this item") + '"><i class="fas fa-edit"></i></a> \
 						' + doneButtonHtml + ' \
@@ -1055,3 +1055,8 @@ Grocy.Components.RecipePicker.GetPicker().on('change', function(e)
 		);
 	}
 });
+
+$("#print-meal-plan-button").on("click", function(e)
+{
+	window.print();
+});

views/mealplan.blade.php

@@ -82,7 +82,7 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="float-right">
+			<div class="float-right d-print-none">
 				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
 					type="button"
 					data-toggle="collapse"
@@ -90,8 +90,12 @@
 					<i class="fas fa-ellipsis-v"></i>
 				</button>
 			</div>
-			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 d-print-none"
 				id="related-links">
+				<a id="print-meal-plan-button"
+					class="btn btn-outline-dark m-1 mt-md-0 mb-md-0 float-right">
+					{{ $__t('Print') }}
+				</a>
 				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/mealplansections') }}">
 					{{ $__t('Configure sections') }}