[WIP] Simplified overviews on mobile (#1115)

* Simplified stock overview on mobile.

* Stock table horizontally scrollable

* Use the new mobile views for all pages (except the shopping list page, use the existing special handling there for now)
And add a clear filter button to all pages

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

package.json

@@ -11,17 +11,16 @@
 		"bootstrap": "^4.5.2",
 		"bootstrap-select": "^1.13.18",
 		"chart.js": "^2.8.0",
-		"datatables.net": "^1.10.21",
+		"datatables.net": "^1.10.22",
-		"datatables.net-bs4": "^1.10.21",
+		"datatables.net-bs4": "^1.10.22",
-		"datatables.net-colreorder": "^1.5.1",
+		"datatables.net-colreorder": "^1.5.2",
-		"datatables.net-colreorder-bs4": "^1.5.1",
+		"datatables.net-colreorder-bs4": "^1.5.2",
 		"datatables.net-plugins": "^1.10.20",
-		"datatables.net-responsive": "^2.2.5",
-		"datatables.net-responsive-bs4": "^2.2.5",
 		"datatables.net-rowgroup": "^1.1.2",
 		"datatables.net-rowgroup-bs4": "^1.1.2",
-		"datatables.net-select": "^1.3.0",
+		"datatables.net-select": "^1.3.1",
-		"datatables.net-select-bs4": "^1.3.0",
+		"datatables.net-select-bs4": "^1.3.1",
+		"dragscroll": "^0.0.8",
 		"fullcalendar": "^3.10.1",
 		"gettext-translator": "2.1.0",
 		"jquery": "3.5.1",

public/css/grocy.css

@@ -337,8 +337,12 @@ input::-webkit-inner-spin-button {
 	display: none;
 }
 
-.dataTables_scrollBody {
+.grab-cursor {
-	overflow: visible !important;
+	cursor: grab;
+}
+
+.grab-cursor:active {
+	cursor: grabbing;
 }
 
 /* Third party component customizations - toastr */
@@ -396,6 +400,12 @@ input::-webkit-inner-spin-button {
 	}
 }
 
+@media (max-width: 767.98px) {
+	.width-xs-sm-100 {
+		width: 100%;
+	}
+}
+
 body.fixed-nav {
 	padding-top: 54px;
 }

public/js/grocy.js

@@ -650,6 +650,7 @@ $.extend(true, $.fn.dataTable.defaults, {
 	'deferRender': true,
 	'language': IsJsonString(__t('datatables_localization')) ? JSON.parse(__t('datatables_localization')) : {},
 	'scrollY': false,
+	'scrollX': true,
 	'colReorder': true,
 	'stateSave': true,
 	'stateSaveParams': function(settings, data)

public/viewjs/batteries.js

@@ -7,6 +7,8 @@
 });
 $('#batteries-table tbody').removeClass("d-none");
 batteriesTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	batteriesTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	batteriesTable.search("").draw();
+});
+
 $(document).on('click', '.battery-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-battery-name');

public/viewjs/batteriesjournal.js

@@ -8,6 +8,8 @@
 });
 $('#batteries-journal-table tbody').removeClass("d-none");
 batteriesJournalTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#battery-filter").on("change", function()
 {
@@ -32,6 +34,14 @@ $("#search").on("keyup", Delay(function()
 	batteriesJournalTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#battery-filter").val("all");
+	batteriesJournalTable.column(1).search("").draw();
+	batteriesJournalTable.search("").draw();
+});
+
 if (typeof GetUriParam("battery") !== "undefined")
 {
 	$("#battery-filter").val(GetUriParam("battery"));

public/viewjs/batteriesoverview.js

@@ -7,6 +7,8 @@
 });
 $('#batteries-overview-table tbody').removeClass("d-none");
 batteriesOverviewTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,14 @@ $("#search").on("keyup", Delay(function()
 	batteriesOverviewTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	batteriesOverviewTable.column(4).search("").draw();
+	batteriesOverviewTable.search("").draw();
+});
+
 $("#status-filter").on("change", function()
 {
 	var value = $(this).val();
@@ -135,8 +145,8 @@ function RefreshStatistics()
 				}
 			});
 
-			$("#info-due-batteries").text(__n(dueCount, '%s battery is due to be charged', '%s batteries are due to be charged') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
+			$("#info-due-batteries").html('<span class="d-block d-md-none">' + dueCount + ' <i class="fas fa-clock"></i></span><span class="d-none d-md-block">' + __n(dueCount, '%s battery is due to be charged', '%s batteries are due to be charged') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
-			$("#info-overdue-batteries").text(__n(overdueCount, '%s battery is overdue to be charged', '%s batteries are overdue to be charged'));
+			$("#info-overdue-batteries").html('<span class="d-block d-md-none">' + overdueCount + ' <i class="fas fa-times-circle"></i></span><span class="d-none d-md-block">' + __n(overdueCount, '%s battery is overdue to be charged', '%s batteries are overdue to be charged'));
 		},
 		function(xhr)
 		{

public/viewjs/chores.js

@@ -7,6 +7,8 @@
 });
 $('#chores-table tbody').removeClass("d-none");
 choresTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	choresTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	choresTable.search("").draw();
+});
+
 $(document).on('click', '.chore-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-chore-name');

public/viewjs/choresjournal.js

@@ -8,6 +8,8 @@
 });
 $('#chores-journal-table tbody').removeClass("d-none");
 choresJournalTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#chore-filter").on("change", function()
 {
@@ -32,6 +34,14 @@ $("#search").on("keyup", Delay(function()
 	choresJournalTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#chore-filter").val("all");
+	choresJournalTable.column(1).search("").draw();
+	choresJournalTable.search("").draw();
+});
+
 if (typeof GetUriParam("chore") !== "undefined")
 {
 	$("#chore-filter").val(GetUriParam("chore"));

public/viewjs/choresoverview.js

@@ -7,6 +7,8 @@
 });
 $('#chores-overview-table tbody').removeClass("d-none");
 choresOverviewTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -52,6 +54,16 @@ $("#user-filter").on("change", function()
 	}
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	$("#user-filter").val("all");
+	choresOverviewTable.column(5).search("").draw();
+	choresOverviewTable.column(6).search("").draw();
+	choresOverviewTable.search("").draw();
+});
+
 $(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
@@ -200,9 +212,9 @@ function RefreshStatistics()
 				}
 			});
 
-			$("#info-due-chores").text(__n(dueCount, '%s chore is due to be done', '%s chores are due to be done') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
+			$("#info-due-chores").html('<span class="d-block d-md-none">' + dueCount + ' <i class="fas fa-clock"></i></span><span class="d-none d-md-block">' + __n(dueCount, '%s chore is due to be done', '%s chores are due to be done') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
-			$("#info-overdue-chores").text(__n(overdueCount, '%s chore is overdue to be done', '%s chores are overdue to be done'));
+			$("#info-overdue-chores").html('<span class="d-block d-md-none">' + overdueCount + ' <i class="fas fa-times-circle"></i></span><span class="d-none d-md-block">' + __n(overdueCount, '%s chore is overdue to be done', '%s chores are overdue to be done'));
-			$("#info-assigned-to-me-chores").text(__n(assignedToMeCount, '%s chore is assigned to me', '%s chores are assigned to me'));
+			$("#info-assigned-to-me-chores").html('<span class="d-block d-md-none">' + assignedToMeCount + ' <i class="fas fa-exclamation-circle"></i></span><span class="d-none d-md-block">' + __n(assignedToMeCount, '%s chore is assigned to me', '%s chores are assigned to me'));
 		},
 		function(xhr)
 		{

public/viewjs/equipment.js

@@ -9,6 +9,8 @@
 });
 $('#equipment-table tbody').removeClass("d-none");
 equipmentTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 equipmentTable.on('select', function(e, dt, type, indexes)
 {
@@ -66,6 +68,12 @@ $("#search").on("keyup", Delay(function()
 	equipmentTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	equipmentTable.search("").draw();
+});
+
 $(document).on('click', '.equipment-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-equipment-name');

public/viewjs/locations.js

@@ -7,6 +7,8 @@
 });
 $('#locations-table tbody').removeClass("d-none");
 locationsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	locationsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	locationsTable.search("").draw();
+});
+
 $(document).on('click', '.location-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-location-name');

public/viewjs/manageapikeys.js

@@ -7,6 +7,8 @@
 });
 $('#apikeys-table tbody').removeClass("d-none");
 apiKeysTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 var createdApiKeyId = GetUriParam('CreatedApiKeyId');
 if (createdApiKeyId !== undefined)
@@ -25,6 +27,12 @@ $("#search").on("keyup", Delay(function()
 	apiKeysTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	apiKeysTable.search("").draw();
+});
+
 $(document).on('click', '.apikey-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-apikey-apikey');

public/viewjs/productform.js

@@ -402,6 +402,8 @@ var barcodeTable = $('#barcode-table').DataTable({
 });
 $('#barcode-table tbody').removeClass("d-none");
 barcodeTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 Grocy.Components.UserfieldsForm.Load();
 $("#name").trigger("keyup");

public/viewjs/productgroups.js

@@ -7,6 +7,8 @@
 });
 $('#productgroups-table tbody').removeClass("d-none");
 groupsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	groupsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	groupsTable.search("").draw();
+});
+
 $(document).on('click', '.product-group-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-group-name');

public/viewjs/products.js

@@ -7,6 +7,8 @@
 });
 $('#products-table tbody').removeClass("d-none");
 productsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -30,6 +32,14 @@ $("#product-group-filter").on("change", function()
 	productsTable.column(7).search(value).draw();
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#product-group-filter").val("all");
+	productsTable.column(7).search("").draw();
+	productsTable.search("").draw();
+});
+
 if (typeof GetUriParam("product-group") !== "undefined")
 {
 	$("#product-group-filter").val(GetUriParam("product-group"));

public/viewjs/quantityunitform.js

@@ -122,6 +122,8 @@ var quConversionsTable = $('#qu-conversions-table').DataTable({
 });
 $('#qu-conversions-table tbody').removeClass("d-none");
 quConversionsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 Grocy.Components.UserfieldsForm.Load();
 $("#name").trigger("keyup");

public/viewjs/quantityunits.js

@@ -7,6 +7,8 @@
 });
 $('#quantityunits-table tbody').removeClass("d-none");
 quantityUnitsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	quantityUnitsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	equipmentTable.search("").draw();
+});
+
 $(document).on('click', '.quantityunit-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-quantityunit-name');

public/viewjs/recipeform.js

@@ -97,6 +97,8 @@ var recipesIncludesTables = $('#recipes-includes-table').DataTable({
 });
 $('#recipes-includes-table tbody').removeClass("d-none");
 recipesIncludesTables.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 Grocy.FrontendHelpers.ValidateForm('recipe-form');
 $("#name").focus();

public/viewjs/recipes.js

@@ -16,6 +16,8 @@
 });
 $('#recipes-table tbody').removeClass("d-none");
 recipesTables.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 if ((typeof GetUriParam("tab") !== "undefined" && GetUriParam("tab") === "gallery") || window.localStorage.getItem("recipes_last_tab_id") == "gallery-tab")
 {
@@ -66,6 +68,14 @@ $("#search").on("keyup", Delay(function()
 	$(".recipe-gallery-item .card-title:not(:contains_case_insensitive(" + value + "))").parent().parent().parent().addClass("d-none");
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	$("#search").trigger("keyup");
+	$("#status-filter").trigger("change");
+});
+
 $("#status-filter").on("change", function()
 {
 	var value = $(this).val();

public/viewjs/shoppinglist.js

@@ -29,6 +29,8 @@ var shoppingListTable = $('#shoppinglist-table').DataTable({
 });
 $('#shoppinglist-table tbody').removeClass("d-none");
 shoppingListTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $(document).on("click", "tr.dtrg-group", function()
 {
@@ -48,6 +50,14 @@ $("#search").on("keyup", Delay(function()
 	shoppingListTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	$("#search").trigger("keyup");
+	$("#status-filter").trigger("change");
+});
+
 $("#status-filter").on("change", function()
 {
 	var value = $(this).val();

public/viewjs/shoppinglocations.js

@@ -7,6 +7,8 @@ var locationsTable = $('#shoppinglocations-table').DataTable({
 });
 $('#shoppinglocations-table tbody').removeClass("d-none");
 locationsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	locationsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	locationsTable.search("").draw();
+});
+
 $(document).on('click', '.shoppinglocation-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-shoppinglocation-name');

public/viewjs/stockjournal.js

@@ -8,6 +8,8 @@
 });
 $('#stock-journal-table tbody').removeClass("d-none");
 stockJournalTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#product-filter").on("change", function()
 {
@@ -32,6 +34,12 @@ $("#search").on("keyup", Delay(function()
 	stockJournalTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	stockJournalTable.search("").draw();
+});
+
 if (typeof GetUriParam("product") !== "undefined")
 {
 	$("#product-filter").val(GetUriParam("product"));

public/viewjs/stockjournalsummary.js

@@ -4,3 +4,5 @@ var journalSummaryTable = $('#journal-summary-table').DataTable({
 });
 $('#journal-summary-table tbody').removeClass("d-none");
 journalSummaryTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();

public/viewjs/stockoverview.js

@@ -10,8 +10,25 @@
 		{ 'visible': false, 'targets': 8 }
 	],
 });
+
+$('#stock-overview-table').on('column-sizing.dt', function(e, settings)
+{
+	var dtScrollWidth = $('.dataTables_scroll').width();
+	var stockTableWidth = $('#stock-overview-table').width();
+
+	if (dtScrollWidth < stockTableWidth)
+	{
+		$('.dataTables_scrollBody').addClass("grab-cursor");
+	} else
+	{
+		$('.dataTables_scrollBody').removeClass("grab-cursor");
+	}
+});
+
 $('#stock-overview-table tbody').removeClass("d-none");
 stockOverviewTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#location-filter").on("change", function()
 {
@@ -229,9 +246,9 @@ function RefreshStatistics()
 	Grocy.Api.Get('stock/volatile?expiring_days=' + nextXDays,
 		function(result)
 		{
-			$("#info-expiring-products").text(__n(result.expiring_products.length, '%s product expires', '%s products expiring') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
+			$("#info-expiring-products").html('<span class="d-block d-md-none">' + result.expiring_products.length + ' <i class="fas fa-clock"></i></span><span class="d-none d-md-block">' + __n(result.expiring_products.length, '%s product expires', '%s products expiring') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days') + '</span>');
-			$("#info-expired-products").text(__n(result.expired_products.length, '%s product is already expired', '%s products are already expired'));
+			$("#info-expired-products").html('<span class="d-block d-md-none">' + result.expired_products.length + ' <i class="fas fa-times-circle"></i></span><span class="d-none d-md-block">' + __n(result.expired_products.length, '%s product is already expired', '%s products are already expired') + '</span>');
-			$("#info-missing-products").text(__n(result.missing_products.length, '%s product is below defined min. stock amount', '%s products are below defined min. stock amount'));
+			$("#info-missing-products").html('<span class="d-block d-md-none">' + result.missing_products.length + ' <i class="fas fa-exclamation-circle"></i></span><span class="d-none d-md-block">' + __n(result.missing_products.length, '%s product is below defined min. stock amount', '%s products are below defined min. stock amount') + '</span>');
 		},
 		function(xhr)
 		{

public/viewjs/taskcategories.js

@@ -7,6 +7,8 @@
 });
 $('#taskcategories-table tbody').removeClass("d-none");
 categoriesTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	categoriesTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	categoriesTable.search("").draw();
+});
+
 $(document).on('click', '.task-category-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-category-name');

public/viewjs/tasks.js

@@ -11,6 +11,8 @@
 });
 $('#tasks-table tbody').removeClass("d-none");
 tasksTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -37,6 +39,15 @@ $("#status-filter").on("change", function()
 	tasksTable.column(5).search(value).draw();
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#status-filter").val("all");
+	$("#search").trigger("keyup");
+	$("#status-filter").trigger("change");
+	$("#show-done-tasks").trigger('checked', false);
+});
+
 $(".status-filter-message").on("click", function()
 {
 	var value = $(this).data("status-filter");
@@ -198,8 +209,8 @@ function RefreshStatistics()
 				}
 			});
 
-			$("#info-due-tasks").text(__n(dueCount, '%s task is due to be done', '%s tasks are due to be done') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
+			$("#info-due-tasks").html('<span class="d-block d-md-none">' + dueCount + ' <i class="fas fa-clock"></i></span><span class="d-none d-md-block">' + __n(dueCount, '%s task is due to be done', '%s tasks are due to be done') + ' ' + __n(nextXDays, 'within the next day', 'within the next %s days'));
-			$("#info-overdue-tasks").text(__n(overdueCount, '%s task is overdue to be done', '%s tasks are overdue to be done'));
+			$("#info-overdue-tasks").html('<span class="d-block d-md-none">' + overdueCount + ' <i class="fas fa-times-circle"></i></span><span class="d-none d-md-block">' + __n(overdueCount, '%s task is overdue to be done', '%s tasks are overdue to be done'));
 		},
 		function(xhr)
 		{

public/viewjs/userentities.js

@@ -7,6 +7,8 @@
 });
 $('#userentities-table tbody').removeClass("d-none");
 userentitiesTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	userentitiesTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	userentitiesTable.search("").draw();
+});
+
 $(document).on('click', '.userentity-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-userentity-name');

public/viewjs/userfields.js

@@ -7,6 +7,8 @@
 });
 $('#userfields-table tbody').removeClass("d-none");
 userfieldsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -31,6 +33,14 @@ $("#entity-filter").on("change", function()
 	$("#new-userfield-button").attr("href", U("/userfield/new?entity=" + value));
 });
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	$("#entity-filter").val("all");
+	userfieldsTable.column(1).search("").draw();
+	userfieldsTable.search("").draw();
+});
+
 $(document).on('click', '.userfield-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-userfield-name');

public/viewjs/userobjects.js

@@ -7,6 +7,8 @@
 });
 $('#userobjects-table tbody').removeClass("d-none");
 userobjectsTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	userobjectsTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	userobjectsTable.search("").draw();
+});
+
 $(document).on('click', '.userobject-delete-button', function(e)
 {
 	var objectId = $(e.currentTarget).attr('data-userobject-id');

public/viewjs/users.js

@@ -7,6 +7,8 @@
 });
 $('#users-table tbody').removeClass("d-none");
 usersTable.columns.adjust().draw();
+$('.dataTables_scrollBody').addClass("dragscroll");
+dragscroll.reset();
 
 $("#search").on("keyup", Delay(function()
 {
@@ -19,6 +21,12 @@ $("#search").on("keyup", Delay(function()
 	usersTable.search(value).draw();
 }, 200));
 
+$("#clear-filter-button").on("click", function()
+{
+	$("#search").val("");
+	usersTable.search("").draw();
+});
+
 $(document).on('click', '.user-delete-button', function(e)
 {
 	var objectName = $(e.currentTarget).attr('data-user-username');

views/batteries.blade.php

@@ -9,12 +9,27 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button permission-MASTER_DATA_EDIT"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button permission-MASTER_DATA_EDIT m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/battery/new') }}">
 					{{ $__t('Add') }}
 				</a>
-				<a class="btn btn-outline-secondary"
+				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/userfields?entity=batteries') }}">
 					{{ $__t('Configure userfields') }}
 				</a>
@@ -25,7 +40,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -37,12 +53,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="batteries-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/batteriesjournal.blade.php

@@ -8,12 +8,21 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
+		<div class="float-right">
+			<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+				type="button"
+				data-toggle="collapse"
+				data-target="#table-filter-row">
+				<i class="fas fa-filter"></i>
+			</button>
+		</div>
 	</div>
 </div>
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -39,12 +48,21 @@
 			</select>
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row mt-2">
 	<div class="col">
 		<table id="batteries-journal-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/batteriesoverview.blade.php

@@ -14,8 +14,15 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
-				<a class="btn btn-outline-dark responsive-button"
+				type="button"
+				data-toggle="collapse"
+				data-target="#related-links">
+				<i class="fas fa-ellipsis-v"></i>
+			</button>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/batteriesjournal') }}">
 					{{ $__t('Journal') }}
 				</a>
@@ -29,11 +36,25 @@
 			<div id="info-overdue-batteries"
 				data-status-filter="overdue"
 				class="error-message status-filter-message responsive-button"></div>
+			<div class="float-right">
+				<a class="btn btn-sm btn-outline-info d-md-none"
+					data-toggle="collapse"
+					href="#table-filter-row"
+					role="button">
+					<i class="fas fa-filter"></i>
+				</a>
+				<a id="clear-filter-button"
+					class="btn btn-sm btn-outline-info"
+					href="#">
+					{{ $__t('Clear filter') }}
+				</a>
+			</div>
 		</div>
 	</div>
 </div>
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -63,7 +84,7 @@
 <div class="row">
 	<div class="col">
 		<table id="batteries-overview-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/calendar.blade.php

@@ -20,7 +20,14 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
+				type="button"
+				data-toggle="collapse"
+				data-target="#related-links">
+				<i class="fas fa-ellipsis-v"></i>
+			</button>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 m-1 mt-md-0 mb-md-0 float-right"
+				id="related-links">
 				<a id="ical-button"
 					class="btn btn-outline-dark"
 					href="#">

views/chores.blade.php

@@ -9,12 +9,27 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/chore/new') }}">
 					{{ $__t('Add') }}
 				</a>
-				<a class="btn btn-outline-secondary"
+				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/userfields?entity=chores') }}">
 					{{ $__t('Configure userfields') }}
 				</a>
@@ -25,7 +40,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -37,12 +53,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="chores-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/choresjournal.blade.php

@@ -8,12 +8,21 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
+		<div class="float-right">
+			<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+				type="button"
+				data-toggle="collapse"
+				data-target="#table-filter-row">
+				<i class="fas fa-filter"></i>
+			</button>
+		</div>
 	</div>
 </div>
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -39,12 +48,21 @@
 			</select>
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row mt-2">
 	<div class="col">
 		<table id="chores-journal-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/choresoverview.blade.php

@@ -14,8 +14,15 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
-				<a class="btn btn-outline-dark responsive-button"
+				type="button"
+				data-toggle="collapse"
+				data-target="#related-links">
+				<i class="fas fa-ellipsis-v"></i>
+			</button>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/choresjournal') }}">
 					{{ $__t('Journal') }}
 				</a>
@@ -34,11 +41,25 @@
 				data-user-filter="xx{{ GROCY_USER_ID }}xx"
 				class="normal-message user-filter-message responsive-button"></div>
 			@endif
+			<div class="float-right">
+				<a class="btn btn-sm btn-outline-info d-md-none"
+					data-toggle="collapse"
+					href="#table-filter-row"
+					role="button">
+					<i class="fas fa-filter"></i>
+				</a>
+				<a id="clear-filter-button"
+					class="btn btn-sm btn-outline-info"
+					href="#">
+					{{ $__t('Clear filter') }}
+				</a>
+			</div>
 		</div>
 	</div>
 </div>
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -85,7 +106,7 @@
 <div class="row">
 	<div class="col">
 		<table id="chores-overview-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/consume.blade.php

@@ -13,10 +13,17 @@
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
+				type="button"
+				data-toggle="collapse"
+				data-target="#related-links">
+				<i class="fas fa-ellipsis-v"></i>
+			</button>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
 				@if(!$embedded)
 				<button id="scan-mode-button"
-					class="btn @if(boolval($userSettings['scan_mode_consume_enabled'])) btn-success @else btn-danger @endif"
+					class="btn @if(boolval($userSettings['scan_mode_consume_enabled'])) btn-success @else btn-danger @endif m-1 mt-md-0 mb-md-0 float-right"
 					type="checkbox">{{ $__t('Scan mode') }} <span id="scan-mode-status">@if(boolval($userSettings['scan_mode_consume_enabled'])) {{ $__t('on') }} @else {{ $__t('off') }} @endif</span></button>
 				<input id="scan-mode"
 					type="checkbox"

views/equipment.blade.php

@@ -10,15 +10,31 @@
 	<div class="col-xs-12 col-md-4 pb-3">
 		<div class="title-related-links border-bottom mb-2 py-1">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/equipment/new') }}">
 					{{ $__t('Add') }}
 				</a>
 			</div>
 		</div>
 
-		<div class="row">
+		<div class="row collapse d-md-flex"
+			id="table-filter-row">
 			<div class="col">
 				<div class="input-group">
 					<div class="input-group-prepend">
@@ -30,10 +46,19 @@
 						placeholder="{{ $__t('Search') }}">
 				</div>
 			</div>
+			<div class="col">
+				<div class="float-right">
+					<a id="clear-filter-button"
+						class="btn btn-sm btn-outline-info"
+						href="#">
+						{{ $__t('Clear filter') }}
+					</a>
+				</div>
+			</div>
 		</div>
 
 		<table id="equipment-table"
-			class="table table-striped dt-responsive">
+			class="table table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th>{{ $__t('Name') }}</th>

views/layout/default.blade.php

@@ -57,8 +57,6 @@
 		rel="stylesheet">
 	<link href="{{ $U('/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css?v=', true) }}{{ $version }}"
 		rel="stylesheet">
-	<link href="{{ $U('/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css?v=', true) }}{{ $version }}"
-		rel="stylesheet">
 	<link href="{{ $U('/node_modules/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css?v=', true) }}{{ $version }}"
 		rel="stylesheet">
 	<link href="{{ $U('/node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css?v=', true) }}{{ $version }}"
@@ -676,8 +674,6 @@
 	<script src="{{ $U('/node_modules/@danielfarrell/bootstrap-combobox/js/bootstrap-combobox.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net/js/jquery.dataTables.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-colreorder-bs4/js/colReorder.bootstrap4.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/datatables.net-select/js/dataTables.select.min.js?v=', true) }}{{ $version }}"></script>
@@ -695,6 +691,7 @@
 	@if(!empty($__t('bootstrap-select_locale') && $__t('bootstrap-select_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/bootstrap-select/dist/js/i18n/defaults-{{ $__t('bootstrap-select_locale') }}.js?v={{ $version }}"></script>@endif
 	<script src="{{ $U('/node_modules/jquery-lazy/jquery.lazy.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/nosleep.js/dist/NoSleep.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/dragscroll/dragscroll.js?v=', true) }}{{ $version }}"></script>
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>

views/locations.blade.php

@@ -9,12 +9,27 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/location/new') }}">
 					{{ $__t('Add') }}
 				</a>
-				<a class="btn btn-outline-secondary"
+				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/userfields?entity=locations') }}">
 					{{ $__t('Configure userfields') }}
 				</a>
@@ -25,7 +40,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -37,12 +53,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="locations-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/manageapikeys.blade.php

@@ -18,8 +18,23 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/manageapikeys/new') }}">
 					{{ $__t('Add') }}
 				</a>
@@ -30,7 +45,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -42,12 +58,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="apikeys-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/productform.blade.php

@@ -395,7 +395,7 @@
 		<h5 id="qu-conversion-headline-info"
 			class="text-muted font-italic"></h5>
 		<table id="qu-conversions-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>
@@ -455,7 +455,7 @@
 		<h5 id="barcode-headline-info"
 			class="text-muted font-italic"></h5>
 		<table id="barcode-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/productgroups.blade.php

@@ -9,12 +9,27 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button show-as-dialog-link"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button show-as-dialog-link m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/productgroup/new?embedded') }}">
 					{{ $__t('Add') }}
 				</a>
-				<a class="btn btn-outline-secondary"
+				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/userfields?entity=product_groups') }}">
 					{{ $__t('Configure userfields') }}
 				</a>
@@ -25,7 +40,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group mb-3">
 			<div class="input-group-prepend">
@@ -37,12 +53,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="productgroups-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/products.blade.php

@@ -9,16 +9,31 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/product/new') }}">
 					{{ $__t('Add') }}
 				</a>
-				<a class="btn btn-outline-secondary"
+				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/userfields?entity=products') }}">
 					{{ $__t('Configure userfields') }}
 				</a>
-				<a class="btn btn-outline-secondary"
+				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/stocksettings#productpresets') }}">
 					{{ $__t('Presets for new products') }}
 				</a>
@@ -29,7 +44,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -55,12 +71,21 @@
 			</select>
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="products-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/purchase.blade.php

@@ -13,10 +13,17 @@
 	<div class="col-xs-12 col-md-6 col-xl-4">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
+				type="button"
+				data-toggle="collapse"
+				data-target="#related-links">
+				<i class="fas fa-ellipsis-v"></i>
+			</button>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
 				@if(!$embedded)
 				<button id="scan-mode-button"
-					class="btn @if(boolval($userSettings['scan_mode_purchase_enabled'])) btn-success @else btn-danger @endif"
+					class="btn @if(boolval($userSettings['scan_mode_purchase_enabled'])) btn-success @else btn-danger @endif m-1 mt-md-0 mb-md-0 float-right"
 					type="checkbox">{{ $__t('Scan mode') }} <span id="scan-mode-status">@if(boolval($userSettings['scan_mode_purchase_enabled'])) {{ $__t('on') }} @else {{ $__t('off') }} @endif</span></button>
 				<input id="scan-mode"
 					type="checkbox"

views/quantityunitform.blade.php

@@ -105,7 +105,7 @@
 		<h5 id="qu-conversion-headline-info"
 			class="text-muted font-italic"></h5>
 		<table id="qu-conversions-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/quantityunits.blade.php

@@ -9,12 +9,27 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/quantityunit/new') }}">
 					{{ $__t('Add') }}
 				</a>
-				<a class="btn btn-outline-secondary"
+				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/userfields?entity=quantity_units') }}">
 					{{ $__t('Configure userfields') }}
 				</a>
@@ -25,7 +40,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -37,12 +53,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="quantityunits-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/recipeform.blade.php

@@ -170,9 +170,16 @@
 					<h4>
 						{{ $__t('Ingredients list') }}
 					</h4>
-					<div class="related-links">
+					<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
+						type="button"
+						data-toggle="collapse"
+						data-target="#related-links">
+						<i class="fas fa-ellipsis-v"></i>
+					</button>
+					<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+						id="related-links">
 						<a id="recipe-pos-add-button"
-							class="btn btn-outline-primary btn-sm recipe-pos-add-button"
+							class="btn btn-outline-primary btn-sm recipe-pos-add-button m-1 mt-md-0 mb-md-0 float-right"
 							type="button"
 							href="#">
 							{{ $__t('Add') }}
@@ -181,7 +188,7 @@
 				</div>
 
 				<table id="recipes-pos-table"
-					class="table table-sm table-striped dt-responsive">
+					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
 							<th class="border-right"></th>
@@ -262,16 +269,23 @@
 					<h4>
 						{{ $__t('Included recipes') }}
 					</h4>
-					<div class="related-links">
+					<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
+						type="button"
+						data-toggle="collapse"
+						data-target="#related-links">
+						<i class="fas fa-ellipsis-v"></i>
+					</button>
+					<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+						id="related-links">
 						<a id="recipe-include-add-button"
-							class="btn btn-outline-primary btn-sm"
+							class="btn btn-outline-primary btn-sm m-1 mt-md-0 mb-md-0 float-right"
 							href="#">
 							{{ $__t('Add') }}
 						</a>
 					</div>
 				</div>
 				<table id="recipes-includes-table"
-					class="table table-sm table-striped dt-responsive">
+					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
 							<th class="border-right"></th>

views/recipes.blade.php

@@ -14,16 +14,32 @@
 	<div class="col-xs-12 col-md-6 d-print-none">
 		<div class="title-related-links border-bottom mb-2 py-1">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/recipe/new') }}">
 					{{ $__t('Add') }}
 				</a>
 			</div>
 		</div>
 
-		<div class="row">
+		<div class="row collapse d-md-flex"
-			<div class="col-xs-12 col-md-6 col-xl-6">
+			id="table-filter-row">
+			<div class="col-xs-12 col-md-5 col-xl-5">
 				<div class="input-group">
 					<div class="input-group-prepend">
 						<span class="input-group-text"><i class="fas fa-search"></i></span>
@@ -35,7 +51,7 @@
 				</div>
 			</div>
 
-			<div class="col-xs-12 col-md-6 col-xl-6">
+			<div class="col-xs-12 col-md-5 col-xl-5">
 				<div class="input-group">
 					<div class="input-group-prepend">
 						<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
@@ -49,6 +65,16 @@
 					</select>
 				</div>
 			</div>
+
+			<div class="col">
+				<div class="float-right">
+					<a id="clear-filter-button"
+						class="btn btn-sm btn-outline-info"
+						href="#">
+						{{ $__t('Clear filter') }}
+					</a>
+				</div>
+			</div>
 		</div>
 
 		<ul class="nav nav-tabs grocy-tabs">
@@ -70,7 +96,7 @@
 			<div class="tab-pane show active"
 				id="list">
 				<table id="recipes-table"
-					class="table table-sm table-striped dt-responsive">
+					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
 							<th class="border-right"></th>

views/shoppinglist.blade.php

@@ -131,6 +131,15 @@
 			</select>
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div id="shoppinglist-main"
@@ -142,7 +151,7 @@
 			{{ $__t('Normal view') }}
 		</a>
 		<table id="shoppinglist-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/shoppinglocations.blade.php

@@ -9,12 +9,27 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/shoppinglocation/new') }}">
 					{{ $__t('Add') }}
 				</a>
-				<a class="btn btn-outline-secondary"
+				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/userfields?entity=shoppinglocations') }}">
 					{{ $__t('Configure userfields') }}
 				</a>
@@ -25,7 +40,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -37,12 +53,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="shoppinglocations-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/stockentries.blade.php

@@ -33,7 +33,7 @@
 <div class="row">
 	<div class="col">
 		<table id="stockentries-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/stockjournal.blade.php

@@ -7,8 +7,23 @@
 @section('content')
 <div class="title-related-links">
 	<h2 class="title">@yield('title')</h2>
-	<div class="related-links">
+	<div class="float-right">
-		<a class="btn btn-outline-dark responsive-button"
+		<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+			type="button"
+			data-toggle="collapse"
+			data-target="#table-filter-row">
+			<i class="fas fa-filter"></i>
+		</button>
+		<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+			type="button"
+			data-toggle="collapse"
+			data-target="#related-links">
+			<i class="fas fa-ellipsis-v"></i>
+		</button>
+	</div>
+	<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+		id="related-links">
+		<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
 			href="{{ $U('/stockjournal/summary') }}">
 			{{ $__t('Journal summary') }}
 		</a>
@@ -17,7 +32,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -43,12 +59,21 @@
 			</select>
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row mt-2">
 	<div class="col">
 		<table id="stock-journal-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/stockjournalsummary.blade.php

@@ -16,7 +16,7 @@
 <div class="row">
 	<div class="col">
 		<table id="journal-summary-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th>{{ $__t('Product') }}</th>

views/stockoverview.blade.php

@@ -17,22 +17,31 @@
 <div class="row">
 	<div class="col">
 		<div class="title-related-links">
-			<h2 class="title">
+			<h2 class="title mr-2 order-0">
 				@yield('title')
+			</h2>
+			<h2 class="mb-0 mr-auto order-3 order-md-1 width-xs-sm-100">
 				<span id="info-current-stock"
 					class="text-muted small"></span>
 			</h2>
-			<div class="related-links">
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
-				<a class="btn btn-outline-dark responsive-button"
+				type="button"
+				data-toggle="collapse"
+				data-target="#related-links">
+				<i class="fas fa-ellipsis-v"></i>
+			</button>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/stockjournal') }}">
 					{{ $__t('Journal') }}
 				</a>
-				<a class="btn btn-outline-dark responsive-button"
+				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/stockentries') }}">
 					{{ $__t('Stock entries') }}
 				</a>
 				@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
-				<a class="btn btn-outline-dark responsive-button"
+				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/locationcontentsheet') }}">
 					{{ $__t('Location Content Sheet') }}
 				</a>
@@ -53,6 +62,12 @@
 				data-status-filter="belowminstockamount"
 				class="normal-message status-filter-message responsive-button"></div>
 			<div class="float-right">
+				<a class="btn btn-sm btn-outline-info d-md-none"
+					data-toggle="collapse"
+					href="#table-filter-row"
+					role="button">
+					<i class="fas fa-filter"></i>
+				</a>
 				<a id="clear-filter-button"
 					class="btn btn-sm btn-outline-info"
 					href="#">
@@ -62,7 +77,8 @@
 		</div>
 	</div>
 </div>
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -126,7 +142,7 @@
 <div class="row">
 	<div class="col">
 		<table id="stock-overview-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/taskcategories.blade.php

@@ -9,8 +9,23 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
-				<a class="btn btn-primary responsive-button"
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
+				id="related-links">
+				<a class="btn btn-primary responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="{{ $U('/taskcategory/new') }}">
 					{{ $__t('Add') }}
 				</a>
@@ -25,7 +40,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -37,12 +53,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="taskcategories-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/tasks.blade.php

@@ -21,7 +21,14 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
+				type="button"
+				data-toggle="collapse"
+				data-target="#related-links">
+				<i class="fas fa-ellipsis-v"></i>
+			</button>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 m-1 mt-md-0 mb-md-0 float-right"
+				id="related-links">
 				<a class="btn btn-primary responsive-button"
 					href="{{ $U('/task/new') }}">
 					{{ $__t('Add') }}
@@ -36,11 +43,25 @@
 			<div id="info-overdue-tasks"
 				data-status-filter="overdue"
 				class="error-message status-filter-message responsive-button"></div>
+			<div class="float-right">
+				<a class="btn btn-sm btn-outline-info d-md-none"
+					data-toggle="collapse"
+					href="#table-filter-row"
+					role="button">
+					<i class="fas fa-filter"></i>
+				</a>
+				<a id="clear-filter-button"
+					class="btn btn-sm btn-outline-info"
+					href="#">
+					{{ $__t('Clear filter') }}
+				</a>
+			</div>
 		</div>
 	</div>
 </div>
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -81,7 +102,7 @@
 <div class="row">
 	<div class="col">
 		<table id="tasks-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/userentities.blade.php

@@ -9,7 +9,22 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 m-1 mt-md-0 mb-md-0 float-right"
+				id="related-links">
 				<a class="btn btn-primary responsive-button"
 					href="{{ $U('/userentity/new') }}">
 					{{ $__t('Add') }}
@@ -21,7 +36,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -33,12 +49,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="userentities-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/userfields.blade.php

@@ -9,7 +9,22 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 m-1 mt-md-0 mb-md-0 float-right"
+				id="related-links">
 				<a class="btn btn-primary responsive-button"
 					href="{{ $U('/userfield/new') }}">
 					{{ $__t('Add') }}
@@ -21,7 +36,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -47,12 +63,21 @@
 			</select>
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="userfields-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

views/userobjects.blade.php

@@ -12,7 +12,22 @@
 				@yield('title')
 				<span class="text-muted small">{{ $userentity->description }}</span>
 			</h2>
-			<div class="related-links">
+			<div class="float-right">
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 m-1 mt-md-0 mb-md-0 float-right"
+				id="related-links">
 				<a class="btn btn-primary responsive-button"
 					href="{{ $U('/userobject/' . $userentity->name . '/new') }}">
 					{{ $__t('Add') }}
@@ -28,7 +43,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -40,12 +56,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="userobjects-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right d-print-none"></th>

views/users.blade.php

@@ -9,7 +9,22 @@
 	<div class="col">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<div class="related-links">
+			<div class="float-right">
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#table-filter-row">
+					<i class="fas fa-filter"></i>
+				</button>
+				<button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
+					type="button"
+					data-toggle="collapse"
+					data-target="#related-links">
+					<i class="fas fa-ellipsis-v"></i>
+				</button>
+			</div>
+			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100 m-1 mt-md-0 mb-md-0 float-right"
+				id="related-links">
 				<a class="btn btn-primary responsive-button"
 					href="{{ $U('/user/new') }}">
 					{{ $__t('Add') }}
@@ -21,7 +36,8 @@
 
 <hr class="my-2 py-1">
 
-<div class="row">
+<div class="row collapse d-md-flex"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group">
 			<div class="input-group-prepend">
@@ -33,12 +49,21 @@
 				placeholder="{{ $__t('Search') }}">
 		</div>
 	</div>
+	<div class="col">
+		<div class="float-right">
+			<a id="clear-filter-button"
+				class="btn btn-sm btn-outline-info"
+				href="#">
+				{{ $__t('Clear filter') }}
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="row">
 	<div class="col">
 		<table id="users-table"
-			class="table table-sm table-striped dt-responsive">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
 					<th class="border-right"></th>

yarn.lock

@@ -1044,7 +1044,7 @@ datatables.net-bs4@1.10.16:
     datatables.net "1.10.16"
     jquery ">=1.7"
 
-datatables.net-bs4@^1.10.15, datatables.net-bs4@^1.10.21:
+datatables.net-bs4@^1.10.15:
   version "1.10.21"
   resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.21.tgz#7a9ae489ebbd815cd869292450d284edd0f44697"
   integrity sha512-F9zabYw8ZLXfjvj2S+BdnbkEUsL48bJwWxQFrA47cOXrIvsMhW8nmqPZcIMK4ko3k1i74nbpWLO1t+vueQKoXQ==
@@ -1052,7 +1052,15 @@ datatables.net-bs4@^1.10.15, datatables.net-bs4@^1.10.21:
     datatables.net "1.10.21"
     jquery ">=1.7"
 
-datatables.net-colreorder-bs4@^1.5.1:
+datatables.net-bs4@^1.10.22:
+  version "1.10.22"
+  resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.22.tgz#1ba03e5628841b83329069743ec389a56940234b"
+  integrity sha512-si0eOiaKmuURURpXhPRba7b3vCZsVfJK8pfrlM5WtaOaCEBa62DG/S9guMxUBmcAmvEC3FA2CKc/iKya3gb9qg==
+  dependencies:
+    datatables.net "1.10.22"
+    jquery ">=1.7"
+
+datatables.net-colreorder-bs4@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/datatables.net-colreorder-bs4/-/datatables.net-colreorder-bs4-1.5.2.tgz#4fe1a9ffe679e7e84f3ccb58c9c4d31ac0d49a1b"
   integrity sha512-L5omHV0agczRZwR9eismTOq+/9/glQqZUeRfigEc+5oMKLnubJkVHQLOanY2duDl3stvsZ6ebWbXWEh6tndgDg==
@@ -1061,7 +1069,7 @@ datatables.net-colreorder-bs4@^1.5.1:
     datatables.net-colreorder "1.5.2"
     jquery ">=1.7"
 
-datatables.net-colreorder@1.5.2, datatables.net-colreorder@^1.5.1:
+datatables.net-colreorder@1.5.2, datatables.net-colreorder@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/datatables.net-colreorder/-/datatables.net-colreorder-1.5.2.tgz#c425cee1f88b3246be0363c67a152be743ca6bce"
   integrity sha512-77ShdeM7QjKI6M1jfWQ4ZempSYMmmpe9NqjimHBp+o9lAto789YdCLiFrW71dwn1v8Awp4qcMShqHNxGzR/HVg==
@@ -1074,23 +1082,6 @@ datatables.net-plugins@^1.10.20:
   resolved "https://registry.yarnpkg.com/datatables.net-plugins/-/datatables.net-plugins-1.10.20.tgz#c89f6bed3fa7e6605cbeaa35d60f223659e84c8c"
   integrity sha512-rnhNmRHe9UEzvM7gtjBay1QodkWUmxLUhHNbmJMYhhUggjtm+BRSlE0PRilkeUkwckpNWzq+0fPd7/i0fpQgzA==
 
-datatables.net-responsive-bs4@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/datatables.net-responsive-bs4/-/datatables.net-responsive-bs4-2.2.5.tgz#c81e6c24b80237ee326454a40b08345563361ebb"
-  integrity sha512-ufUywwBDAyBbUsRJ/QAp6aSSVlZLnNy7BI9cJswqC0y+Si4hwLUTz22kbeoJuCERASPs0aLcx2MaYiKnQi/Euw==
-  dependencies:
-    datatables.net-bs4 "^1.10.15"
-    datatables.net-responsive "2.2.5"
-    jquery ">=1.7"
-
-datatables.net-responsive@2.2.5, datatables.net-responsive@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/datatables.net-responsive/-/datatables.net-responsive-2.2.5.tgz#33a11ec59b416a546a213b3b736e1ff8ad1fa5eb"
-  integrity sha512-AuF28BJRQWfke0cwZwgJB5+WHgoDCDAnW59TJWX4JAXYes3iFrJA6mNHWw46Up3bqUJVI2ZxJoKTGpoEHm5hNA==
-  dependencies:
-    datatables.net "^1.10.15"
-    jquery ">=1.7"
-
 datatables.net-rowgroup-bs4@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/datatables.net-rowgroup-bs4/-/datatables.net-rowgroup-bs4-1.1.2.tgz#63a4ab010ce2facb9680d359960333639c19973e"
@@ -1108,7 +1099,7 @@ datatables.net-rowgroup@1.1.2, datatables.net-rowgroup@^1.1.2:
     datatables.net "^1.10.15"
     jquery ">=1.7"
 
-datatables.net-select-bs4@^1.3.0:
+datatables.net-select-bs4@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/datatables.net-select-bs4/-/datatables.net-select-bs4-1.3.1.tgz#1c39c7fd5bfb66b5c8402611c2c64fc47e3cfca4"
   integrity sha512-8UOBxChTsn24nP/ZOsIMGZOdTJymQZ8WcQ81NcGgyDz6b4JlsQl8Bwb89AcVT7hncMquPJ3d5WUGG4I9WMhAlw==
@@ -1117,7 +1108,7 @@ datatables.net-select-bs4@^1.3.0:
     datatables.net-select "1.3.1"
     jquery ">=1.7"
 
-datatables.net-select@1.3.1, datatables.net-select@^1.3.0:
+datatables.net-select@1.3.1, datatables.net-select@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/datatables.net-select/-/datatables.net-select-1.3.1.tgz#ec2c3ad7df2bc9c13c09587d0bfd0ceba52a8bff"
   integrity sha512-PeVd/hlAX58QzL0+mGvxnXP7ylLtzZMeAots/uZkQi+6c/KI6JuP8LCJoEMHAsSjQM/BnG7Uw8E1YGOz1tZpQQ==
@@ -1132,13 +1123,20 @@ datatables.net@1.10.16:
   dependencies:
     jquery ">=1.7"
 
-datatables.net@1.10.21, datatables.net@^1.10.15, datatables.net@^1.10.21:
+datatables.net@1.10.21, datatables.net@^1.10.15:
   version "1.10.21"
   resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.10.21.tgz#f1d35c8e5c3eb7f5caef39e80cd5b836a8c77103"
   integrity sha512-/bSZtxmf3GTpYcvEmwZ8q26I1yhSx8qklR2B+s1K8+/51UW/zc2zTYwJMqr/Z+iCYixAc00ildj4g2x0Qamolw==
   dependencies:
     jquery ">=1.7"
 
+datatables.net@1.10.22, datatables.net@^1.10.22:
+  version "1.10.22"
+  resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.10.22.tgz#975d4ffb1eb40dec5fb772eaf93796ec1a948b55"
+  integrity sha512-ujn8GvkQIBYzYH54XY7OrI0Zb35TKRd9ABYfbnXgBfwTGIFT6UsmXrfHU5Yk+MSDoF0sDu2TB+31V6c+zUZ0Pw==
+  dependencies:
+    jquery ">=1.7"
+
 debug@2:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1279,6 +1277,11 @@ dotnet-deps-parser@4.10.0:
     tslib "^1.10.0"
     xml2js "0.4.23"
 
+dragscroll@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/dragscroll/-/dragscroll-0.0.8.tgz#de4771e5f3a14d77b583ecef5d38bd9618f27563"
+  integrity sha1-3kdx5fOhTXe1g+zvXTi9lhjydWM=
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"