Added a compact view for shopping list (for mobile shopping) (closes #453)

changelog/55_UNRELEASED_2019-xx-xx.md

@@ -18,7 +18,8 @@
 - Fixed that the productcard did not load correctly when `FEATURE_FLAG_STOCK_LOCATION_TRACKING` was set to `false` (thanks @kriddles)
 - Fixed that the "Add as barcode to existing product" workflow did not work twice when not switching the page inbetween
 
-### Shopping list fixes
+### Shopping list improvements/fixes
+- Added a compact view to have better shopping list for shopping trips (new button "Compact view" in the header, additionally this is automatically enabled on mobile devices / when screen width is < 768 px)
 - Fixed that when `FEATURE_FLAG_SHOPPINGLIST_MULTIPLE_LISTS` was set to `false`, the shopping list appeared empty after some actions
 
 ### Recipe improvements

localization/strings.pot

@@ -1642,3 +1642,9 @@ msgstr ""
 
 msgid "per day"
 msgstr ""
+
+msgid "Compact view"
+msgstr ""
+
+msgid "Normal view"
+msgstr ""

public/css/grocy.css

@@ -57,6 +57,7 @@ a.discrete-link:focus {
 	top: 0;
 	left: 0;
 	overflow: auto;
+	background-color: #ffffff;
  }
 
  /* Fixes smooth scrolling on iOS */
@@ -65,7 +66,7 @@ a.discrete-link:focus {
 	-webkit-overflow-scrolling: touch;
 }
 
-.fullscreen-card .card-header {
+.fullscreen-card .card-header-fullscreen {
 	z-index: 9999;
 	width: 100%;
 	position: fixed;

public/viewjs/recipes.js

@@ -219,7 +219,14 @@ $("#selectedRecipeToggleFullscreenButton").on('click', function(e)
 	$("#selectedRecipeCard .card-header").toggleClass("fixed-top");
 	$("#selectedRecipeCard .card-body").toggleClass("mt-5");
 
-	window.location.hash = "fullscreen";
+	if ($("body").hasClass("fullscreen-card"))
+	{
+		window.location.hash = "#fullscreen";
+	}
+	else
+	{
+		window.history.replaceState(null, null, " ");
+	}
 });
 
 $('#servings-scale').keyup(function(event)

public/viewjs/shoppinglist.js

@@ -340,5 +340,35 @@ $(document).on("click", "#clear-description-button", function(e)
 	$("#save-description-button").click();
 });
 
+$(".fullscreen-shopping-list-button").on('click', function(e)
+{
+	e.preventDefault();
+
+	$("#shoppinglist-main").toggleClass("fullscreen");
+	$("body").toggleClass("fullscreen-card");
+	$("#shopping-list-normal-view-button").toggleClass("d-none");
+	$("#mainNav").toggleClass("d-none");
+
+	if ($("body").hasClass("fullscreen-card"))
+	{
+		window.location.hash = "#fullscreen";	
+	}
+	else
+	{
+		window.history.replaceState(null, null, " ");
+	}
+});
+
 $("#description").trigger("summernote.change");
 $("#save-description-button").addClass("disabled");
+
+if (window.location.hash === "#fullscreen")
+{
+	$("#shopping-list-compact-view-button").click();
+}
+
+// Auto switch to compact view on mobile
+if ($(window).width() < 768)
+{
+	$("#shopping-list-compact-view-button").click();
+}

views/equipment.blade.php

@@ -59,7 +59,7 @@
 		<div class="tab-content">
 			<div class="tab-pane fade show active" id="instruction-manual-tab">
 				<div id="selectedEquipmentInstructionManualCard" class="card">
-					<div class="card-header">
+					<div class="card-header card-header-fullscreen">
 						<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>&nbsp;&nbsp;
 						<a class="btn btn-sm btn-outline-info py-0 equipment-edit-button hide-on-fullscreen-card" href="#">
 							<i class="fas fa-edit"></i>
@@ -79,7 +79,7 @@
 			</div>
 			<div class="tab-pane fade" id="description-tab">
 				<div id="selectedEquipmentDescriptionCard" class="card">
-					<div class="card-header">
+					<div class="card-header card-header-fullscreen">
 						<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>&nbsp;&nbsp;
 						<a class="btn btn-sm btn-outline-info py-0 equipment-edit-button hide-on-fullscreen-card" href="#">
 							<i class="fas fa-edit"></i>

views/recipes.blade.php

@@ -129,7 +129,7 @@
 
 	@if($selectedRecipe !== null)
 	<div class="col-xs-12 col-md-6">
-		<div class="card-header">
+		<div class="card-header card-header-fullscreen">
 			<i class="fas fa-cocktail"></i> {{ $selectedRecipe->name }}&nbsp;&nbsp;
 			<a id="selectedRecipeConsumeButton" class="btn btn-sm btn-outline-success py-0 hide-when-embedded hide-on-fullscreen-card @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $selectedRecipe->id)->need_fulfilled == 0) disabled @endif" href="#" data-toggle="tooltip" title="{{ $__t('Consume all ingredients needed by this recipe') }}" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
 				<i class="fas fa-utensils"></i>

views/shoppinglist.blade.php

@@ -17,7 +17,7 @@
 
 @section('content')
 @if(GROCY_FEATURE_FLAG_SHOPPINGLIST_MULTIPLE_LISTS)
-<div class="row border-bottom pb-2 mb-2 d-print-none">
+<div class="row border-bottom pb-2 mb-2 d-print-none hide-on-fullscreen-card">
 	<div class="col-xs-12 col-md-4">
 		<label for="selected-shopping-list">{{ $__t('Selected shopping list') }}</label>
 		<select class="form-control" id="selected-shopping-list">
@@ -37,6 +37,9 @@
 		<a id="print-shopping-list-button" class="btn btn-outline-dark responsive-button" href="#">
 			<i class="fas fa-print"></i> {{ $__t('Print') }}
 		</a>
+		<a id="shopping-list-compact-view-button" class="btn btn-outline-dark responsive-button float-right fullscreen-shopping-list-button" href="#">
+			<i class="fas fa-compress-arrows-alt"></i> {{ $__t('Compact view') }}
+		</a>
 		<!--<div class="dropdown d-inline-block">
 			<button class="btn btn-outline-dark responsive-button dropdown-toggle" data-toggle="dropdown"><i class="fas fa-file-export"></i> {{ $__t('Output') }}</button>
 			<div class="dropdown-menu">
@@ -49,7 +52,7 @@
 <input type="hidden" name="selected-shopping-list" id="selected-shopping-list" value="1">
 @endif
 
-<div class="row d-print-none">
+<div class="row d-print-none hide-on-fullscreen-card">
 	<div class="col">
 		<h1>
 			@yield('title')
@@ -70,7 +73,7 @@
 	</div>
 </div>
 
-<div class="row mt-3 d-print-none">
+<div class="row mt-3 d-print-none hide-on-fullscreen-card">
 	<div class="col-xs-12 col-md-4">
 		<label for="search">{{ $__t('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
@@ -84,8 +87,11 @@
 	</div>
 </div>
 
-<div class="row d-print-none">
+<div id="shoppinglist-main" class="row d-print-none">
 	<div class="col-xs-12 col-md-8 pb-3">
+		<a id="shopping-list-normal-view-button" class="btn btn-outline-dark btn-block fullscreen-shopping-list-button d-none" href="#">
+			<i class="fas fa-expand-arrows-alt"></i> {{ $__t('Normal view') }}
+		</a>
 		<table id="shoppinglist-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
@@ -149,7 +155,7 @@
 	</div>
 </div>
 
-<div class="row mt-3 d-print-none">
+<div class="row mt-3 d-print-none hide-on-fullscreen-card">
 	<div class="col-xs-12 col-md-8">
 		<div class="form-group">
 			<label class="text-larger font-weight-bold" for="notes">{{ $__t('Notes') }}</label>