kenmirrors/grocy
1
0
Fork 0
mirror of https://github.com/grocy/grocy.git synced 2025-04-29 09:39:57 +00:00
Code Issues Projects Releases Wiki Activity

Hide elements when printing (#1559)

Browse Source 
* 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>
This commit is contained in:
Kris 2021-08-06 20:18:43 +02:00 committed by GitHub
parent eecb321086
commit b539c93319
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 83 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
public/css/grocy.css
View File

@ -66,7 +66,7 @@ a.discrete-link:focus {
width: 100%; width: 100%;
} }
/* Fixes smooth scrolling on iOS */ /* Fixes smooth scrolling on iOS */
#sidebarResponsive, #sidebarResponsive,
.fullscreen { .fullscreen {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -80,11 +80,11 @@ a.discrete-link:focus {
left: 0; left: 0;
} }
body.fullscreen-card { body.fullscreen-card {
overflow: hidden; overflow: hidden;
} }
.fullscreen-card .hide-on-fullscreen-card { .fullscreen-card .hide-on-fullscreen-card {
display: none; display: none;
} }
@ -93,10 +93,10 @@ a.discrete-link:focus {
margin: 0 auto; 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, .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; color: inherit;
} }
@ -111,9 +111,11 @@ button.disabled {
.embedded .hide-when-embedded { .embedded .hide-when-embedded {
display: none; display: none;
} }
body.embedded.fixed-nav { body.embedded.fixed-nav {
padding-top: 0; padding-top: 0;
} }
.embedded .content-wrapper { .embedded .content-wrapper {
margin-left: 0; margin-left: 0;
} }
@ -126,6 +128,7 @@ iframe {
input[type='number'] { input[type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
@ -242,8 +245,8 @@ input::-webkit-inner-spin-button {
} }
a:not([href]) { a:not([href]) {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
/* Set width of popup menu to fixed value on larger devices */ /* Set width of popup menu to fixed value on larger devices */
@ -260,7 +263,7 @@ a:not([href]) {
.table-inline-menu .dropdown-item .dropdown-item-icon { .table-inline-menu .dropdown-item .dropdown-item-icon {
min-width: 24px; min-width: 24px;
padding-left:20px; padding-left: 20px;
text-align: center; text-align: center;
display: inline; display: inline;
} }
@ -276,13 +279,16 @@ a:not([href]) {
#barcodescanner-container { #barcodescanner-container {
max-height: 90vw; max-height: 90vw;
} }
#livestream-container { #livestream-container {
max-height: 100%; max-height: 100%;
} }
#barcodescanner-livestream video { #barcodescanner-livestream video {
width: 100%; width: 100%;
} }
#barcodescanner-livestream canvas { #barcodescanner-livestream canvas {
width: 100%; width: 100%;
} }
@ -297,9 +303,10 @@ a:not([href]) {
.form-control.is-valid, .form-control.is-valid,
.custom-control.is-valid, .custom-control.is-valid,
.was-validated .form-control:valid, .was-validated .form-control:valid,
.was-validated .custom-control:valid { .was-validated .custom-control:valid {
background-image: none; background-image: none;
} }
.was-validated .custom-select:valid, .was-validated .custom-select:valid,
.was-validated .custom-select:invalid { .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; 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 { .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; border-radius: 0.2rem;
} }
@ -392,6 +399,7 @@ tr.dtrg-group {
font-family: 'Font Awesome 5 Free'; font-family: 'Font Awesome 5 Free';
font-weight: 900; font-weight: 900;
} }
#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link.py-0:after, #mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link.py-0:after,
#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.py-0:after { #mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.py-0:after {
padding-top: 8px; padding-top: 8px;
@ -402,7 +410,7 @@ tr.dtrg-group {
padding: 0.75em; padding: 0.75em;
} }
@media (min-width:992px) { @media (min-width: 992px) {
#mainNav .navbar-collapse .navbar-sidenav { #mainNav .navbar-collapse .navbar-sidenav {
margin-top: 46px; margin-top: 46px;
} }
@ -412,7 +420,7 @@ tr.dtrg-group {
} }
#mainNav.fixed-top .sidenav-toggler { #mainNav.fixed-top .sidenav-toggler {
margin-top:calc(100vh - 48px); margin-top: calc(100vh - 48px);
} }
.content-wrapper { .content-wrapper {
@ -475,28 +483,28 @@ canvas.drawingBuffer {
.error-message, .error-message,
.normal-message, .normal-message,
.secondary-message { .secondary-message {
padding: 12px; padding: 12px;
font-weight: bold; font-weight: bold;
width: fit-content; width: fit-content;
border-top: 6px solid; border-top: 6px solid;
} }
.warning-message { .warning-message {
background-color: #fffaeb; background-color: #fffaeb;
color: #7c5e10; color: #7c5e10;
border-top-color: #e9b949; border-top-color: #e9b949;
} }
.error-message { .error-message {
background-color: #ffeeee; background-color: #ffeeee;
color: #780a0a; color: #780a0a;
border-top-color: #ba2525; border-top-color: #ba2525;
} }
.normal-message { .normal-message {
background-color: #e0e8f9; background-color: #e0e8f9;
color: #2d3a8c; color: #2d3a8c;
border-top-color: #4c63b6; border-top-color: #4c63b6;
} }
.secondary-message { .secondary-message {
@ -507,49 +515,49 @@ canvas.drawingBuffer {
.status-filter-message, .status-filter-message,
.user-filter-message { .user-filter-message {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
line-height: 0.5; line-height: 0.5;
} }
.related-links .btn { .related-links .btn {
font-size: 14px; font-size: 14px;
} }
.title { .title {
display: inline-block; display: inline-block;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.title-related-links { .title-related-links {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.form-control-lg .custom-control-label { .form-control-lg .custom-control-label {
padding-top: 7px; padding-top: 7px;
padding-left: 10px; padding-left: 10px;
} }
.custom-control-label { .custom-control-label {
padding-top: 13px; padding-top: 13px;
padding-left: 10px; padding-left: 10px;
} }
.custom-control-label::before, .custom-control-label::before,
.custom-control-label::after { .custom-control-label::after {
top: 0.8rem; top: 0.8rem;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
} }
.recipe-servings-input { .recipe-servings-input {
width: 125px; width: 125px;
} }
.fc-event{ .fc-event {
cursor: pointer; cursor: pointer;
} }
@ -558,7 +566,7 @@ canvas.drawingBuffer {
text-transform: uppercase; text-transform: uppercase;
} }
.grocy-tabs .nav-link { .grocy-tabs .nav-link {
border: 2px solid transparent; border: 2px solid transparent;
transition: border-bottom-color ease-in 0.1s; transition: border-bottom-color ease-in 0.1s;
} }
@ -608,9 +616,15 @@ canvas.drawingBuffer {
} }
.print-view { .print-view {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
flex-basis: 100%; flex-basis: 100%;
}
.calendar button.fc-prev-button,
.calendar button.fc-today-button,
.calendar button.fc-next-button {
display: none;
} }
} }

17
public/viewjs/mealplan.js
View File

@ -57,7 +57,7 @@ $(".calendar").each(function()
} }
$(".calendar[data-primary-section='true'] .fc-day-header").prepend('\ $(".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 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> \ <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"> \ <div class="table-inline-menu dropdown-menu"> \
@ -97,10 +97,10 @@ $(".calendar").each(function()
var weekRecipeOrderMissingButtonHtml = ""; var weekRecipeOrderMissingButtonHtml = "";
if (Grocy.FeatureFlags.GROCY_FEATURE_FLAG_SHOPPINGLIST) 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>"); $(".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 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> \ <h5 class="small timeago-contextual text-truncate mb-1">' + fulfillmentIconHtml + " " + fulfillmentInfoHtml + '</h5> \
' + costsAndCaloriesPerServing + ' \ ' + 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="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> \ <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 + ' \ ' + 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 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> \ <h5 class="small timeago-contextual text-truncate mb-1">' + fulfillmentIconHtml + " " + fulfillmentInfoHtml + '</h5> \
' + costsAndCaloriesPerServing + ' \ ' + 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="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="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> \ <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('\ element.html('\
<div> \ <div> \
<h5 class="text-wrap text-break mb-1 ' + additionalTitleCssClasses + '">' + mealPlanEntry.note + '</h5> \ <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="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> \ <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 + ' \ ' + doneButtonHtml + ' \
@ -1055,3 +1055,8 @@ Grocy.Components.RecipePicker.GetPicker().on('change', function(e)
); );
} }
}); });
$("#print-meal-plan-button").on("click", function(e)
{
window.print();
});

8
views/mealplan.blade.php
View File

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