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

Improved responsiveness of /mealplan and /calendar (closes #372 and closes #373)

Browse Source
This commit is contained in:
Bernd Bestel 2019-09-24 09:21:57 +02:00
parent 6bb9d2c51d
commit 2a9f927a13
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
3 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog/53_UNRELEASED_2019-xx-xx.md
View File

@ -1,2 +1,3 @@
- It's now possible to display a recipe directly from the meal plan (new "eye button") (thanks @kriddles)
- Improved the responsiveness of the meal plan and calendar page by automatically switching to a day calendar view on smaller screens (thanks for the idea @kriddles)
- Some style/CSS detail-refinements

19
public/viewjs/calendar.js
View File

@ -4,14 +4,15 @@ if (!Grocy.CalendarFirstDayOfWeek.isEmpty())
firstDay = parseInt(Grocy.CalendarFirstDayOfWeek);
}
$("#calendar").fullCalendar({
var calendar = $("#calendar").fullCalendar({
"themeSystem": "bootstrap4",
"header": {
"left": "month,basicWeek,listWeek",
"left": "month,agendaWeek,agendaDay,listWeek",
"center": "title",
"right": "prev,next"
},
"weekNumbers": Grocy.CalendarShowWeekNumbers,
"defaultView": ($(window).width() < 768) ? "agendaDay" : "month",
"firstDay": firstDay,
"eventLimit": true,
"eventSources": fullcalendarEventSources
@ -35,3 +36,17 @@ $("#ical-button").on("click", function(e)
}
);
});
$(window).on("resize", function()
{
// Automatically switch the calendar to "basicDay" view on small screens
// and to "month" otherwise
if ($(window).width() < 768)
{
calendar.fullCalendar("changeView", "agendaDay");
}
else
{
calendar.fullCalendar("changeView", "month");
}
});

28
public/viewjs/mealplan.js
View File

@ -16,7 +16,7 @@ var calendar = $("#calendar").fullCalendar({
"weekNumbers": false,
"eventLimit": true,
"eventSources": fullcalendarEventSources,
"defaultView": "basicWeek",
"defaultView": ($(window).width() < 768) ? "basicDay" : "basicWeek",
"firstDay": firstDay,
"viewRender": function(view)
{
@ -94,11 +94,11 @@ var calendar = $("#calendar").fullCalendar({
}
element.html(' \
<div class="text-truncate"> \
<h5>' + recipe.name + '<h5> \
<h5 class="small">' + __n(mealPlanEntry.servings, "%s serving", "%s servings") + '</h5> \
<h5 class="small timeago-contextual">' + fulfillmentIconHtml + " " + fulfillmentInfoHtml + '</h5> \
<h5 class="small"><span class="locale-number-format" data-format="currency">' + resolvedRecipe.costs + '</span> ' + __t('per serving') + '<h5> \
<div> \
<h5 class="text-truncate">' + recipe.name + '<h5> \
<h5 class="small text-truncate">' + __n(mealPlanEntry.servings, "%s serving", "%s servings") + '</h5> \
<h5 class="small timeago-contextual text-truncate">' + fulfillmentIconHtml + " " + fulfillmentInfoHtml + '</h5> \
<h5 class="small text-truncate"><span class="locale-number-format" data-format="currency">' + resolvedRecipe.costs + '</span> ' + __t('per serving') + '<h5> \
<h5> \
<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> \
@ -109,7 +109,7 @@ var calendar = $("#calendar").fullCalendar({
if (recipe.picture_file_name && !recipe.picture_file_name.isEmpty())
{
element.html(element.html() + '<img data-src="' + U("/api/files/recipepictures/") + btoa(recipe.picture_file_name) + '?force_serve_as=picture&best_fit_width=400" class="img-fluid lazy">')
element.html(element.html() + '<div class="mx-auto"><img data-src="' + U("/api/files/recipepictures/") + btoa(recipe.picture_file_name) + '?force_serve_as=picture&best_fit_width=400" class="img-fluid lazy"></div>')
}
},
"eventAfterAllRender": function(view)
@ -321,3 +321,17 @@ $(document).on("click", ".recipe-popup-button", function(e)
}
});
});
$(window).on("resize", function()
{
// Automatically switch the calendar to "basicDay" view on small screens
// and to "basicWeek" otherwise
if ($(window).width() < 768)
{
calendar.fullCalendar("changeView", "basicDay");
}
else
{
calendar.fullCalendar("changeView", "basicWeek");
}
});