UI test/review

changelog/60_UNRELEASED_2020-xx-xx.md

@@ -137,7 +137,7 @@
 ### General & other improvements/fixes
 - UI refresh / style improvements (thanks @zsarnett for the idea and initial work on this)
 - Improved mobile views (thanks @4lloyd for the idea and initial work on this)
-  - The buttons on the top of each page and the filter row is now collapsed (use the ellipsis/filter button to show them)
+  - The buttons on the top of each page and the filter row is now collapsed (use the ellipsis/filter button to show them, this also superseded the shopping list compact view)
   - Tables are horizontally scrollable (instead of collapsing columns which don't fit)
 - Added a "Clear filter"-button on all pages (with filters) to quickly reset applied filters
 - The data path (previously fixed to the `data` folder) is now configurable, making it possible to run multiple grocy instances from the same directory (with different `config.php` files / different database, etc.) (thanks @fgrsnau)

config-dist.php

@@ -124,7 +124,6 @@ DefaultUserSetting('show_purchased_date_on_purchase', false); // Wheter the purc
 // Shopping list settings
 DefaultUserSetting('shopping_list_to_stock_workflow_auto_submit_when_prefilled', false); // Automatically do the booking using the last price and the amount of the shopping list item, if the product has "Default best before days" set
 DefaultUserSetting('shopping_list_show_calendar', false);
-DefaultUserSetting('shopping_list_disable_auto_compact_view_on_mobile', false);
 
 // Recipe settings
 DefaultUserSetting('recipe_ingredients_group_by_product_group', false); // Group recipe ingredients by their product group

localization/strings.pot

@@ -1655,9 +1655,6 @@ msgstr ""
 msgid "per day"
 msgstr ""
 
-msgid "Compact view"
-msgstr ""
-
 msgid "Normal view"
 msgstr ""
 
@@ -1730,9 +1727,6 @@ msgstr ""
 msgid "Show a month-view calendar"
 msgstr ""
 
-msgid "Don't automatically switch to the compact view on mobile devices"
-msgstr ""
-
 msgid "Edit note on %s"
 msgstr ""
 

public/js/grocy.js

@@ -707,3 +707,27 @@ $('.dropdown-item').has('.form-check input[type=checkbox]').on('click', function
 		$(e.target).find('input[type=checkbox]').click();
 	}
 })
+
+$('.table').on('column-sizing.dt', function(e, settings)
+{
+	var dtScrollWidth = $('.dataTables_scroll').width();
+	var tableWidth = $('.table').width();
+
+	if (dtScrollWidth < tableWidth)
+	{
+		$('.dataTables_scrollBody').addClass("grab-cursor");
+	} else
+	{
+		$('.dataTables_scrollBody').removeClass("grab-cursor");
+	}
+});
+
+$(window).on("message", function(e)
+{
+	var data = e.originalEvent.data;
+
+	if (data.Message === "Reload")
+	{
+		window.location.reload();
+	}
+});

public/viewjs/batteriesoverview.js

@@ -25,7 +25,7 @@ $("#clear-filter-button").on("click", function()
 {
 	$("#search").val("");
 	$("#status-filter").val("all");
-	batteriesOverviewTable.column(4).search("").draw();
+	batteriesOverviewTable.column(5).search("").draw();
 	batteriesOverviewTable.search("").draw();
 });
 
@@ -40,7 +40,7 @@ $("#status-filter").on("change", function()
 	// Transfer CSS classes of selected element to dropdown element (for background)
 	$(this).attr("class", $("#" + $(this).attr("id") + " option[value='" + value + "']").attr("class") + " form-control");
 
-	batteriesOverviewTable.column(4).search(value).draw();
+	batteriesOverviewTable.column(5).search(value).draw();
 });
 
 $(".status-filter-message").on("click", function()

public/viewjs/components/productcard.js

@@ -88,7 +88,7 @@ Grocy.Components.ProductCard.Refresh = function(productId)
 
 			$('#productcard-product-edit-button').attr("href", U("/product/" + productDetails.product.id.toString() + '?' + 'returnto=' + encodeURIComponent(Grocy.CurrentUrlRelative)));
 			$('#productcard-product-journal-button').attr("href", U("/stockjournal?embedded&product=" + productDetails.product.id.toString()));
-			$('#productcard-product-stock-button').attr("href", U("/stockentries?product=" + productDetails.product.id.toString()));
+			$('#productcard-product-stock-button').attr("href", U("/stockentries?embedded&product=" + productDetails.product.id.toString()));
 			$('#productcard-product-stock-button').removeClass("disabled");
 			$('#productcard-product-edit-button').removeClass("disabled");
 			$('#productcard-product-journal-button').removeClass("disabled");

public/viewjs/consume.js

@@ -388,6 +388,12 @@ $('#amount').on('focus', function(e)
 	$(this).select();
 });
 
+$('#price').on('focus', function(e)
+{
+	$(this).select();
+});
+
+
 $('#consume-form input').keyup(function(event)
 {
 	Grocy.FrontendHelpers.ValidateForm('consume-form');

public/viewjs/productform.js

@@ -415,12 +415,6 @@ Grocy.FrontendHelpers.ValidateForm('product-form');
 $("#allow_partial_units_in_stock").click();
 $("#allow_partial_units_in_stock").click();
 
-$(document).on('click', '#save-product-button-continue', function()
-{
-	Grocy.ProductEditFormRedirectUri = "reload";
-	$('#save-product-button').click();
-});
-
 $(document).on('click', '.qu-conversion-delete-button', function(e)
 {
 	var objectId = $(e.currentTarget).attr('data-qu-conversion-id');

public/viewjs/purchase.js

@@ -355,6 +355,11 @@ $('#amount').on('focus', function(e)
 	}
 });
 
+$('#price').on('focus', function(e)
+{
+	$(this).select();
+});
+
 $('#purchase-form input').keyup(function(event)
 {
 	Grocy.FrontendHelpers.ValidateForm('purchase-form');

public/viewjs/shoppinglist.js

@@ -423,41 +423,9 @@ $(document).on("click", "#clear-description-button", function(e)
 	$("#save-description-button").click();
 });
 
-$(".switch-view-mode-button").on('click', function(e)
-{
-	e.preventDefault();
-
-	$("#shoppinglist-main").toggleClass("fullscreen");
-	$(".dataTables_scrollHeadInner").width(""); // Remove absolute width on element set by DataTables
-	$(".dataTables_scrollHeadInner table").width(""); // Remove absolute width on element set by DataTables
-	$("body").toggleClass("fullscreen-card");
-	$("#shopping-list-normal-view-button").toggleClass("d-none");
-	$("#mainNav").toggleClass("d-none");
-
-	if ($("body").hasClass("fullscreen-card"))
-	{
-		window.location.hash = "#compact";
-	}
-	else
-	{
-		window.history.replaceState(null, null, " ");
-	}
-});
-
 $("#description").trigger("summernote.change");
 $("#save-description-button").addClass("disabled");
 
-if (window.location.hash === "#compact")
-{
-	$("#shopping-list-compact-view-button").click();
-}
-
-// Auto switch to compact view on mobile when enabled
-if ($(window).width() < 768 & window.location.hash !== "#compact" && !BoolVal(Grocy.UserSettings.shopping_list_disable_auto_compact_view_on_mobile))
-{
-	$("#shopping-list-compact-view-button").click();
-}
-
 $(window).on("message", function(e)
 {
 	var data = e.originalEvent.data;

public/viewjs/shoppinglistsettings.js

@@ -7,8 +7,3 @@ if (BoolVal(Grocy.UserSettings.shopping_list_show_calendar))
 {
 	$("#shopping-list-show-calendar").prop("checked", true);
 }
-
-if (BoolVal(Grocy.UserSettings.shopping_list_disable_auto_compact_view_on_mobile))
-{
-	$("#shopping-list-disable-auto-compact-view-on-mobile").prop("checked", true);
-}

public/viewjs/stockoverview.js

@@ -11,20 +11,6 @@
 	],
 });
 
-$('#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");

public/viewjs/taskform.js

@@ -16,8 +16,15 @@
 			{
 				Grocy.EditObjectId = result.created_object_id;
 				Grocy.Components.UserfieldsForm.Save(function()
+				{
+					if (GetUriParam("embedded") !== undefined)
+					{
+						window.parent.postMessage(WindowMessageBag("Reload"), Grocy.BaseUrl);
+					}
+					else
 					{
 						window.location.href = U('/tasks');
+					}
 				});
 			},
 			function(xhr)
@@ -33,8 +40,15 @@
 			function(result)
 			{
 				Grocy.Components.UserfieldsForm.Save(function()
+				{
+					if (GetUriParam("embedded") !== undefined)
+					{
+						window.parent.postMessage(WindowMessageBag("Reload"), Grocy.BaseUrl);
+					}
+					else
 					{
 						window.location.href = U('/tasks');
+					}
 				});
 			},
 			function(xhr)

services/StockService.php

@@ -549,8 +549,16 @@ class StockService extends BaseService
 			$lastPrice = $productLastPurchased->price;
 			$lastQuFactorPurchaseToStock = $productLastPurchased->qu_factor_purchase_to_stock;
 			$lastShoppingLocation = $productLastPurchased->shopping_location_id;
-			$avgPrice = $this->getDatabase()->products_average_price()->where('product_id', $productId)->fetch()->price;
+			$avgPriceRow = $this->getDatabase()->products_average_price()->where('product_id', $productId)->fetch();
-			$oldestPrice = $this->getDatabase()->products_oldest_stock_unit_price()->where('product_id', $productId)->fetch()->price;
+			if ($avgPriceRow)
+			{
+				$avgPrice = $avgPriceRow->price;
+			}
+			$oldestPriceRow = $this->getDatabase()->products_oldest_stock_unit_price()->where('product_id', $productId)->fetch();
+			if ($oldestPriceRow)
+			{
+				$oldestPrice = $avgPriceRow->price;
+			}
 		}
 
 		$product = $this->getDatabase()->products($productId);

views/barcodescannertesting.blade.php

@@ -16,7 +16,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/batteries.blade.php

@@ -38,7 +38,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/batteriesjournal.blade.php

@@ -19,7 +19,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/batteriesoverview.blade.php

@@ -37,14 +37,14 @@
 				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"
+				<a class="btn btn-sm btn-outline-info d-md-none mt-2"
 					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"
+					class="btn btn-sm btn-outline-info mt-2"
 					href="#">
 					{{ $__t('Clear filter') }}
 				</a>
@@ -89,6 +89,7 @@
 				<tr>
 					<th class="border-right"></th>
 					<th>{{ $__t('Battery') }}</th>
+					<th>{{ $__t('Used in') }}</th>
 					<th>{{ $__t('Last charged') }}</th>
 					<th>{{ $__t('Next planned charge cycle') }}</th>
 					<th class="d-none">Hidden status</th>
@@ -128,9 +129,9 @@
 									href="#">
 									<span class="dropdown-item-icon"><i class="fas fa-info"></i></span> <span class="dropdown-item-text">{{ $__t('Show battery details') }}</span>
 								</a>
-								<a class="dropdown-item"
+								<a class="dropdown-item show-as-dialog-link"
 									type="button"
-									href="{{ $U('/batteriesjournal?battery=') }}{{ $currentBatteryEntry->battery_id }}">
+									href="{{ $U('/batteriesjournal?embedded&battery=') }}{{ $currentBatteryEntry->battery_id }}">
 									<span class="dropdown-item-icon"><i class="fas fa-file-alt"></i></span> <span class="dropdown-item-text">{{ $__t('Journal for this battery') }}</span>
 								</a>
 								<a class="dropdown-item permission-MASTER_DATA_EDIT"
@@ -145,6 +146,9 @@
 						data-battery-id="{{ $currentBatteryEntry->battery_id }}">
 						{{ FindObjectInArrayByPropertyValue($batteries, 'id', $currentBatteryEntry->battery_id)->name }}
 					</td>
+					<td class="fit-content">
+						{{ FindObjectInArrayByPropertyValue($batteries, 'id', $currentBatteryEntry->battery_id)->used_in }}
+					</td>
 					<td>
 						<span id="battery-{{ $currentBatteryEntry->battery_id }}-last-tracked-time">{{ $currentBatteryEntry->last_tracked_time }}</span>
 						<time id="battery-{{ $currentBatteryEntry->battery_id }}-last-tracked-time-timeago"

views/batteriessettings.blade.php

@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/batteryform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/batterytracking.blade.php

@@ -9,7 +9,7 @@
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
 
-		<hr class="my-2 py-1">
+		<hr class="my-2">
 
 		<form id="batterytracking-form"
 			novalidate>

views/calendar.blade.php

@@ -38,7 +38,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <script>
 	var fullcalendarEventSources = {!! json_encode(array($fullcalendarEventSources)) !!}

views/choreform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/chores.blade.php

@@ -38,7 +38,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/choresjournal.blade.php

@@ -19,7 +19,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/choresoverview.blade.php

@@ -42,14 +42,14 @@
 				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"
+				<a class="btn btn-sm btn-outline-info d-md-none mt-2"
 					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"
+					class="btn btn-sm btn-outline-info mt-2"
 					href="#">
 					{{ $__t('Clear filter') }}
 				</a>
@@ -156,9 +156,9 @@
 									href="#">
 									<span class="dropdown-item-icon"><i class="fas fa-info"></i></span> <span class="dropdown-item-text">{{ $__t('Show chore details') }}</span>
 								</a>
-								<a class="dropdown-item"
+								<a class="dropdown-item show-as-dialog-link"
 									type="button"
-									href="{{ $U('/choresjournal?chore=') }}{{ $curentChoreEntry->chore_id }}">
+									href="{{ $U('/choresjournal?embedded&chore=') }}{{ $curentChoreEntry->chore_id }}">
 									<span class="dropdown-item-icon"><i class="fas fa-file-alt"></i></span> <span class="dropdown-item-text">{{ $__t('Journal for this chore') }}</span>
 								</a>
 								<a class="dropdown-item permission-MASTER_DATA_EDIT"

views/choressettings.blade.php

@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/choretracking.blade.php

@@ -9,7 +9,7 @@
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
 
-		<hr class="my-2 py-1">
+		<hr class="my-2">
 
 		<form id="choretracking-form"
 			novalidate>

views/components/batterycard.blade.php

@@ -4,7 +4,7 @@
 
 <div class="card batterycard">
 	<div class="card-header">
-		<i class="fas fa-battery-three-quarters"></i> {{ $__t('Battery overview') }}
+		<span class="float-left">{{ $__t('Battery overview') }}</span>
 		<a id="batterycard-battery-edit-button"
 			class="btn btn-sm btn-outline-info py-0 float-right disabled"
 			href="#"
@@ -13,7 +13,7 @@
 			<i class="fas fa-edit"></i>
 		</a>
 		<a id="batterycard-battery-journal-button"
-			class="btn btn-sm btn-outline-secondary py-0 mr-2 float-right disabled show-as-dialog-link"
+			class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
 			href="#"
 			data-toggle="tooltip"
 			title="{{ $__t('Journal for this battery') }}">

views/components/chorecard.blade.php

@@ -4,7 +4,7 @@
 
 <div class="card chorecard">
 	<div class="card-header">
-		<i class="fas fa-home"></i> {{ $__t('Chore overview') }}
+		<span class="float-left">{{ $__t('Chore overview') }}</span>
 		<a id="chorecard-chore-edit-button"
 			class="btn btn-sm btn-outline-info py-0 float-right disabled"
 			href="#"
@@ -13,7 +13,7 @@
 			<i class="fas fa-edit"></i>
 		</a>
 		<a id="chorecard-chore-journal-button"
-			class="btn btn-sm btn-outline-secondary py-0 mr-2 float-right disabled show-as-dialog-link"
+			class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
 			href="#"
 			data-toggle="tooltip"
 			title="{{ $__t('Journal for this chore') }}">

views/components/productcard.blade.php

@@ -5,7 +5,7 @@
 
 <div class="card productcard">
 	<div class="card-header">
-		<i class="fab fa-product-hunt"></i> {{ $__t('Product overview') }}
+		<span class="float-left">{{ $__t('Product overview') }}</span>
 		<a id="productcard-product-edit-button"
 			class="btn btn-sm btn-outline-info py-0 float-right disabled"
 			href="#"
@@ -14,14 +14,14 @@
 			<i class="fas fa-edit"></i>
 		</a>
 		<a id="productcard-product-journal-button"
-			class="btn btn-sm btn-outline-secondary py-0 mr-2 float-right disabled show-as-dialog-link"
+			class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
 			href="#"
 			data-toggle="tooltip"
 			title="{{ $__t('Stock journal for this product') }}">
 			<i class="fas fa-file-alt"></i>
 		</a>
 		<a id="productcard-product-stock-button"
-			class="btn btn-sm btn-outline-info py-0 float-right disabled"
+			class="btn btn-sm btn-outline-info py-0 mr-1 float-right disabled show-as-dialog-link"
 			href="#"
 			data-toggle="tooltip"
 			title="{{ $__t('Stock entries for this product') }}">

views/consume.blade.php

@@ -13,7 +13,7 @@
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3 hide-when-embedded"
 				type="button"
 				data-toggle="collapse"
 				data-target="#related-links">
@@ -40,7 +40,7 @@
 			</div>
 		</div>
 
-		<hr class="my-2 py-1">
+		<hr class="my-2">
 
 		<form id="consume-form"
 			novalidate>

views/equipmentform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/inventory.blade.php

@@ -9,7 +9,7 @@
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
 
-		<hr class="my-2 py-1">
+		<hr class="my-2">
 
 		<form id="inventory-form"
 			novalidate>

views/locationform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/locations.blade.php

@@ -38,7 +38,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/login.blade.php

@@ -8,7 +8,7 @@
 	<div class="col-lg-6 offset-lg-3 col-xs-12">
 		<h2 class="text-center">@yield('title')</h2>
 
-		<hr class="my-2 py-1">
+		<hr class="my-2">
 
 		<form method="post"
 			action="{{ $U('/login') }}"

views/manageapikeys.blade.php

@@ -43,7 +43,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/mealplan.blade.php

@@ -32,7 +32,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col">

views/productbarcodesform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/productform.blade.php

@@ -28,7 +28,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
@@ -375,8 +375,6 @@
 			'entity' => 'products'
 			))
 
-			<button id="save-product-button-continue"
-				class="btn btn-success mb-2">{{ $__t('Save & continue') }}</button>
 			<button id="save-product-button"
 				class="btn btn-info mb-2">{{ $__t('Save') }}</button>
 		</form>

views/productgroupform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/productgroups.blade.php

@@ -38,7 +38,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/products.blade.php

@@ -42,7 +42,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/purchase.blade.php

@@ -13,7 +13,7 @@
 	<div class="col-xs-12 col-md-6 col-xl-4">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
-			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3"
+			<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3 hide-when-embedded"
 				type="button"
 				data-toggle="collapse"
 				data-target="#related-links">
@@ -40,7 +40,7 @@
 			</div>
 		</div>
 
-		<hr class="my-2 py-1">
+		<hr class="my-2">
 
 		<form id="purchase-form"
 			novalidate>

views/quantityunitconversionform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/quantityunitform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/quantityunitpluraltesting.blade.php

@@ -16,7 +16,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/quantityunits.blade.php

@@ -38,7 +38,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/recipeform.blade.php

@@ -43,7 +43,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-xs-12 col-md-7 pb-3">

views/recipeposform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-5 pb-3">

views/recipessettings.blade.php

@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/shoppinglist.blade.php

@@ -27,11 +27,28 @@
 @section('content')
 <div class="row d-print-none hide-on-fullscreen-card">
 	<div class="col">
-		<div class="row">
+		<div class="title-related-links">
-			<h2 class="col-sm-12 col-md-6 mb-2 title">@yield('title')</h2>
+			<h2 class="title mr-2 order-0">
+				@yield('title')
+			</h2>
 			@if(GROCY_FEATURE_FLAG_SHOPPINGLIST_MULTIPLE_LISTS)
-			<div class="col-sm-12 col-md-6 d-flex align-items-end flex-wrap">
+			<div class="float-right">
-				<div class="d-inline-block flex-grow-1 pr-1 mb-1">
+				<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">
+				<div class="my-auto float-right">
 					<select class="form-control form-control-sm"
 						id="selected-shopping-list">
 						@foreach($shoppingLists as $shoppingList)
@@ -39,43 +56,45 @@
 						@endforeach
 					</select>
 				</div>
-				<div class="d-inline-block mb-1">
+				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right show-as-dialog-link"
-					<a class="btn btn-outline-dark btn-sm responsive-button show-as-dialog-link"
 					href="{{ $U('/shoppinglist/new?embedded') }}">
 					{{ $__t('New shopping list') }}
 				</a>
-					<a class="btn btn-outline-dark btn-sm responsive-button show-as-dialog-link @if($selectedShoppingListId == 1) disabled @endif"
+				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right show-as-dialog-link @if($selectedShoppingListId == 1) disabled @endif"
 					href="{{ $U('/shoppinglist/' . $selectedShoppingListId . '?embedded') }}">
 					{{ $__t('Edit shopping list') }}
 				</a>
 				<a id="delete-selected-shopping-list"
-						class="btn btn-outline-danger btn-sm responsive-button @if($selectedShoppingListId == 1) disabled @endif"
+					class="btn btn-outline-danger responsive-button m-1 mt-md-0 mb-md-0 float-right @if($selectedShoppingListId == 1) disabled @endif"
 					href="#">
 					{{ $__t('Delete shopping list') }}
 				</a>
 				<a id="print-shopping-list-button"
-						class="btn btn-outline-dark btn-sm responsive-button"
+					class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
 					href="#">
 					{{ $__t('Print') }}
 				</a>
-					<a id="shopping-list-compact-view-button"
-						class="btn btn-outline-dark btn-sm responsive-button switch-view-mode-button"
-						href="#">
-						{{ $__t('Compact view') }}
-					</a>
-				</div>
 			</div>
 			@else
+			<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>
 			<input type="hidden"
 				name="selected-shopping-list"
 				id="selected-shopping-list"
 				value="1">
 			@endif
 		</div>
-		<div class="border-top border-bottom my-2 py-1">
+		<div id="related-links"
+			class="border-top border-bottom my-2 py-1 collapse">
 			<div data-status-filter="belowminstockamount"
-				class="normal-message status-filter-message responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif">{{ $__n(count($missingProducts), '%s product is below defined min. stock amount', '%s products are below defined min. stock amount') }}</div>
+				class="normal-message status-filter-message responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"><span class="d-block d-md-none">{{count($missingProducts)}} <i class="fas fa-exclamation-circle"></i></span><span class="d-none d-md-block">{{ $__n(count($missingProducts), '%s product is below defined min. stock amount', '%s products are below defined min. stock amount') }}</span></div>
-			<div class="float-right">
+			<div class="float-right mt-2">
 				<a class="btn btn-primary responsive-button btn-sm mb-1 show-as-dialog-link"
 					href="{{ $U('/shoppinglistitem/new?embedded&list=' . $selectedShoppingListId) }}">
 					{{ $__t('Add item') }}
@@ -105,7 +124,8 @@
 	</div>
 </div>
 
-<div class="row d-print-none hide-on-fullscreen-card">
+<div class="row collapse d-md-flex d-print-none hide-on-fullscreen-card"
+	id="table-filter-row">
 	<div class="col-xs-12 col-md-5">
 		<div class="input-group">
 			<div class="input-group-prepend">

views/shoppinglistform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/shoppinglistitemform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">

views/shoppinglistsettings.blade.php

@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
@@ -27,17 +27,6 @@
 				</label>
 			</div>
 		</div>
-		<div class="form-group">
-			<div class="checkbox">
-				<label for="shopping-list-disable-auto-compact-view-on-mobile">
-					<input type="checkbox"
-						class="user-setting-control"
-						id="shopping-list-disable-auto-compact-view-on-mobile"
-						name="shopping-list-disable-auto-compact-view-on-mobile"
-						data-setting-key="shopping_list_disable_auto_compact_view_on_mobile"> {{ $__t('Don\'t automatically switch to the compact view on mobile devices') }}
-				</label>
-			</div>
-		</div>
 
 		<h4 class="mt-2">{{ $__t('Shopping list to stock workflow') }}</h4>
 		<div class="form-group">

views/shoppinglocationform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/shoppinglocations.blade.php

@@ -38,7 +38,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/stockentries.blade.php

@@ -19,7 +19,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">

views/stockentryform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">

views/stockjournal.blade.php

@@ -30,7 +30,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/stockjournalsummary.blade.php

@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col">

views/stockoverview.blade.php

@@ -62,14 +62,14 @@
 				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"
+				<a class="btn btn-sm btn-outline-info d-md-none mt-2"
 					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"
+					class="btn btn-sm btn-outline-info mt-2"
 					href="#">
 					{{ $__t('Clear filter') }}
 				</a>
@@ -255,20 +255,20 @@
 									href="#">
 									<span class="dropdown-item-icon"><i class="fas fa-info"></i></span> <span class="dropdown-item-text">{{ $__t('Show product details') }}</span>
 								</a>
-								<a class="dropdown-item"
+								<a class="dropdown-item show-as-dialog-link"
 									type="button"
-									href="{{ $U('/stockentries?product=') }}{{ $currentStockEntry->product_id }}"
+									href="{{ $U('/stockentries?embedded&product=') }}{{ $currentStockEntry->product_id }}"
 									data-product-id="{{ $currentStockEntry->product_id }}">
 									<span class="dropdown-item-icon"><i class="fas fa-boxes"></i></span> <span class="dropdown-item-text">{{ $__t('Show stock entries') }}</span>
 								</a>
-								<a class="dropdown-item"
+								<a class="dropdown-item show-as-dialog-link"
 									type="button"
-									href="{{ $U('/stockjournal?product=') }}{{ $currentStockEntry->product_id }}">
+									href="{{ $U('/stockjournal?embedded&product=') }}{{ $currentStockEntry->product_id }}">
 									<span class="dropdown-item-icon"><i class="fas fa-file-alt"></i></span> <span class="dropdown-item-text">{{ $__t('Stock journal for this product') }}</span>
 								</a>
-								<a class="dropdown-item"
+								<a class="dropdown-item show-as-dialog-link"
 									type="button"
-									href="{{ $U('/stockjournal/summary?product_id=') }}{{ $currentStockEntry->product_id }}">
+									href="{{ $U('/stockjournal/summary?embedded&product_id=') }}{{ $currentStockEntry->product_id }}">
 									<span class="dropdown-item-icon"><i class="fas fa-file-archive"></i></span> <span class="dropdown-item-text">{{ $__t('Journal summary for this product') }}</span>
 								</a>
 								<a class="dropdown-item permission-MASTER_DATA_EDIT"

views/stocksettings.blade.php

@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
@@ -67,6 +67,17 @@
 		'additionalCssClasses' => 'user-setting-control'
 		))
 
+		<div class="form-group">
+			<div class="checkbox">
+				<label for="show_icon_on_stock_overview_page_when_product_is_on_shopping_list">
+					<input type="checkbox"
+						class="user-setting-control"
+						id="show_icon_on_stock_overview_page_when_product_is_on_shopping_list"
+						data-setting-key="show_icon_on_stock_overview_page_when_product_is_on_shopping_list"> {{ $__t('Show an icon if the product is already on the shopping list') }}
+				</label>
+			</div>
+		</div>
+
 		<h4 class="mt-2">{{ $__t('Purchase') }}</h4>
 		@include('components.numberpicker', array(
 		'id' => 'stock_default_purchase_amount',
@@ -78,6 +89,17 @@
 		'additionalCssClasses' => 'user-setting-control'
 		))
 
+		<div class="form-group">
+			<div class="checkbox">
+				<label for="show_purchased_date_on_purchase">
+					<input type="checkbox"
+						class="user-setting-control"
+						id="show_purchased_date_on_purchase"
+						data-setting-key="show_purchased_date_on_purchase"> {{ $__t('Show purchased date on purchase and inventory page (otherwise the purchased date defaults to today)') }}
+				</label>
+			</div>
+		</div>
+
 		<h4 class="mt-2">{{ $__t('Consume') }}</h4>
 		@include('components.numberpicker', array(
 		'id' => 'stock_default_consume_amount',
@@ -111,25 +133,6 @@
 		'additionalCssClasses' => 'user-setting-control'
 		))
 
-		<div class="form-group">
-			<div class="checkbox">
-				<label for="show_icon_on_stock_overview_page_when_product_is_on_shopping_list">
-					<input type="checkbox"
-						class="user-setting-control"
-						id="show_icon_on_stock_overview_page_when_product_is_on_shopping_list"
-						data-setting-key="show_icon_on_stock_overview_page_when_product_is_on_shopping_list"> {{ $__t('Show an icon if the product is already on the shopping list') }}
-				</label>
-			</div>
-			<div class="checkbox">
-				<label for="show_purchased_date_on_purchase">
-					<input type="checkbox"
-						class="user-setting-control"
-						id="show_purchased_date_on_purchase"
-						data-setting-key="show_purchased_date_on_purchase"> {{ $__t('Show purchased date on purchase and inventory page (otherwise the purchased date defaults to today)') }}
-				</label>
-			</div>
-		</div>
-
 		<a href="{{ $U('/stockoverview') }}"
 			class="btn btn-success">{{ $__t('OK') }}</a>
 	</div>

views/taskcategories.blade.php

@@ -38,7 +38,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/taskcategoryform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/taskform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/tasks.blade.php

@@ -29,8 +29,8 @@
 			</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"
+				<a class="btn btn-primary responsive-button show-as-dialog-link"
-					href="{{ $U('/task/new') }}">
+					href="{{ $U('/task/new?embedded') }}">
 					{{ $__t('Add') }}
 				</a>
 			</div>
@@ -44,14 +44,14 @@
 				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"
+				<a class="btn btn-sm btn-outline-info d-md-none mt-2"
 					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"
+					class="btn btn-sm btn-outline-info mt-2"
 					href="#">
 					{{ $__t('Clear filter') }}
 				</a>
@@ -152,8 +152,8 @@
 							data-task-name="{{ $task->name }}">
 							<i class="fas fa-trash"></i>
 						</a>
-						<a class="btn btn-info btn-sm"
+						<a class="btn btn-info btn-sm show-as-dialog-link"
-							href="{{ $U('/task/') }}{{ $task->id }}">
+							href="{{ $U('/task/') }}{{ $task->id }}?embedded">
 							<i class="fas fa-edit"></i>
 						</a>
 					</td>

views/taskssettings.blade.php

@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/transfer.blade.php

@@ -9,7 +9,7 @@
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
 
-		<hr class="my-2 py-1">
+		<hr class="my-2">
 
 		<form id="transfer-form"
 			novalidate>

views/userentities.blade.php

@@ -34,7 +34,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/userentityform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/userfieldform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/userfields.blade.php

@@ -34,7 +34,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/userform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/userobjectform.blade.php

@@ -15,7 +15,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">

views/userobjects.blade.php

@@ -41,7 +41,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/userpermissions.blade.php

@@ -17,7 +17,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col">

views/users.blade.php

@@ -34,7 +34,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row collapse d-md-flex"
 	id="table-filter-row">

views/usersettings.blade.php

@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<hr class="my-2 py-1">
+<hr class="my-2">
 
 <div class="row">
 	<div class="col-lg-6 col-xs-12">