Improved form spacing

localization/strings.pot

@@ -1076,7 +1076,7 @@ msgstr ""
 msgid "Product count"
 msgstr ""
 
-msgid "Type a new product name or barcode and hit TAB to start a workflow"
+msgid "Type a new product name or barcode and hit TAB or ENTER to start a workflow"
 msgstr ""
 
 msgid "This will be used as the default setting when adding this product as a recipe ingredient"

public/viewjs/components/productpicker.js

@@ -123,6 +123,7 @@ if (addBarcode !== undefined)
 	$('#addbarcodetoselection').text(addBarcode);
 	$('#flow-info-addbarcodetoselection').removeClass('d-none');
 	$('#barcode-lookup-disabled-hint').removeClass('d-none');
+	$('#barcode-lookup-hint').addClass('d-none');
 }
 
 Grocy.Components.ProductPicker.PopupOpen = false;

public/viewjs/consume.js

@@ -55,6 +55,7 @@
 							{
 								$("#flow-info-addbarcodetoselection").addClass("d-none");
 								$('#barcode-lookup-disabled-hint').addClass('d-none');
+								$('#barcode-lookup-hint').removeClass('d-none');
 								window.history.replaceState({}, document.title, U("/consume"));
 							},
 							function(xhr)

public/viewjs/inventory.js

@@ -53,6 +53,7 @@
 							{
 								$("#flow-info-addbarcodetoselection").addClass("d-none");
 								$('#barcode-lookup-disabled-hint').addClass('d-none');
+								$('#barcode-lookup-hint').removeClass('d-none');
 								window.history.replaceState({}, document.title, U("/inventory"));
 							},
 							function(xhr)

public/viewjs/purchase.js

@@ -74,6 +74,7 @@
 							{
 								$("#flow-info-addbarcodetoselection").addClass("d-none");
 								$('#barcode-lookup-disabled-hint').addClass('d-none');
+								$('#barcode-lookup-hint').removeClass('d-none');
 								window.history.replaceState({}, document.title, U("/purchase"));
 							},
 							function(xhr)

public/viewjs/transfer.js

@@ -40,6 +40,7 @@
 							{
 								$("#flow-info-addbarcodetoselection").addClass("d-none");
 								$('#barcode-lookup-disabled-hint').addClass('d-none');
+								$('#barcode-lookup-hint').removeClass('d-none');
 								window.history.replaceState({}, document.title, U("/transfer"));
 							},
 							function(xhr)

views/components/datetimepicker.blade.php

@@ -67,7 +67,7 @@
 		<div id="datetimepicker-earlier-than-info"
 			class="form-text text-info font-italic d-none">{{ $earlierThanInfoText }}</div>
 		@if(isset($shortcutValue) && isset($shortcutLabel))
-		<div class="form-group my-0">
+		<div class="form-group mt-n2 mb-0">
 			<div class="custom-control custom-checkbox">
 				<input type="hidden"
 					name="datetimepicker-shortcut"

views/components/datetimepicker2.blade.php

@@ -63,13 +63,23 @@
 		<div id="datetimepicker2-earlier-than-info"
 			class="form-text text-info font-italic d-none">{{ $earlierThanInfoText }}</div>
 		@if(isset($shortcutValue) && isset($shortcutLabel))
-		<div class="form-check w-100">
+		<div class="form-group mt-n2 mb-0>
-			<input class="form-check-input"
+			<div class="
+			custom-control
+			custom-checkbox">
+			<input type="hidden"
+				name="datetimepicker2-shortcut"
+				value="0">
+			<input class="form-check-input custom-control-input"
 				type="checkbox"
 				id="datetimepicker2-shortcut"
+				name="datetimepicker2-shortcut"
+				value="1"
 				data-datetimepicker2-shortcut-value="{{ $shortcutValue }}">
-			<label class="form-check-label"
+			<label class="form-check-label custom-control-label"
-				for="datetimepicker2-shortcut">{{ $__t($shortcutLabel) }}</label>
+				for="datetimepicker2-shortcut">{{ $__t($shortcutLabel) }}
+			</label>
+		</div>
 	</div>
 	@endif
 </div>

views/components/locationpicker.blade.php

@@ -12,8 +12,13 @@
 	data-next-input-selector="{{ $nextInputSelector }}"
 	data-prefill-by-name="{{ $prefillByName }}"
 	data-prefill-by-id="{{ $prefillById }}">
-	<label for="location_id">{{ $__t('Location') }}&nbsp;&nbsp;<span @if(!empty($hintId))id="{{ $hintId }}" @endif
+	<label for="location_id">{{ $__t('Location') }}
-			class="small text-muted">{{ $hint }}</span></label>
+		@if(!empty($hint))
+		<i class="fas fa-question-circle"
+			data-toggle="tooltip"
+			title="{{ $hint }}"></i>
+		@endif
+	</label>
 	<select class="form-control location-combobox"
 		id="location_id"
 		name="location_id"

views/components/productamountpicker.blade.php

@@ -5,11 +5,11 @@
 @php if(empty($additionalGroupCssClasses)) { $additionalGroupCssClasses = ''; } @endphp
 @php if(empty($additionalHtmlContextHelp)) { $additionalHtmlContextHelp = ''; } @endphp
 
-<div class="form-group row mb-0 {{ $additionalGroupCssClasses }}">
+<div class="form-group row {{ $additionalGroupCssClasses }}">
 	<div class="col">
 		{!! $additionalHtmlContextHelp !!}
 
-		<div class="row my-0">
+		<div class="row">
 
 			@include('components.numberpicker', array(
 			'id' => 'display_amount',
@@ -18,12 +18,12 @@
 			'decimals' => $userSettings['stock_decimal_places_amounts'],
 			'value' => $value,
 			'invalidFeedback' => $__t('This cannot be negative and must be an integral number'),
-			'additionalGroupCssClasses' => 'col-5 mb-1',
+			'additionalGroupCssClasses' => 'col-sm-5 col-xs-12 my-0',
 			'additionalCssClasses' => 'input-group-productamountpicker',
 			'additionalHtmlContextHelp' => ''
 			))
 
-			<div class="form-group col-7 mb-1">
+			<div class="col-sm-7 col-xs-12">
 				<label for="qu_id">{{ $__t('Quantity unit') }}</label>
 				<select required
 					class="form-control input-group-productamountpicker"

views/components/productpicker.blade.php

@@ -18,10 +18,18 @@
 	data-disallow-all-product-workflows="{{ BoolToString($disallowAllProductWorkflows) }}"
 	data-prefill-by-name="{{ $prefillByName }}"
 	data-prefill-by-id="{{ $prefillById }}">
-	<label for="product_id">
+	<label class="w-100"
-		{{ $__t($label) }}&nbsp;<i class="fas fa-barcode"></i>&nbsp;
+		for="product_id">
+		{{ $__t($label) }}
+		@if(!$disallowAllProductWorkflows)
+		<i class="fas fa-question-circle"
+			data-toggle="tooltip"
+			title="{{ $__t('Type a new product name or barcode and hit TAB or ENTER to start a workflow') }}"></i>
+		@endif
 		<span id="barcode-lookup-disabled-hint"
-			class="small text-muted d-none"> {{ $__t('Barcode lookup is disabled') }}</span>&nbsp;
+			class="small text-muted d-none float-right"> {{ $__t('Barcode lookup is disabled') }}</span>
+		<i id="barcode-lookup-hint"
+			class="fas fa-barcode float-right mt-1"></i>
 	</label>
 	<select class="form-control product-combobox barcodescanner-input"
 		id="product_id"
@@ -47,11 +55,8 @@
 	<div class="invalid-feedback">{{ $__t('You have to select a product') }}</div>
 	<div id="custom-productpicker-error"
 		class="form-text text-danger d-none"></div>
-	@if(!$disallowAllProductWorkflows)
-	<div class="form-text text-info small">{{ $__t('Type a new product name or barcode and hit TAB to start a workflow') }}</div>
-	@endif
 	<div id="flow-info-addbarcodetoselection"
-		class="form-text text-muted small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $__t('will be added to the list of barcodes for the selected product on submit') }}</div>
+		class="form-text text-info small d-none"><strong><span id="addbarcodetoselection"></span></strong> {{ $__t('will be added to the list of barcodes for the selected product on submit') }}</div>
 </div>
 
 @include('components.barcodescanner')

views/components/recipepicker.blade.php

@@ -14,7 +14,7 @@
 	data-prefill-by-id="{{ $prefillById }}">
 	<label for="recipe_id">{{ $__t('Recipe') }}
 		@if(!empty($hint))
-		&nbsp;<i class="fas fa-question-circle"
+		<i class="fas fa-question-circle"
 			data-toggle="tooltip"
 			title="{{ $hint }}"></i>
 		@endif

views/inventory.blade.php

@@ -86,7 +86,9 @@
 			'decimals' => $userSettings['stock_decimal_places_prices'],
 			'value' => '',
 			'hint' => $__t('in %s per purchase quantity unit', GROCY_CURRENCY),
-			'additionalHtmlContextHelp' => '<br><span class="small text-muted">' . $__t('This will apply to added products') . '</span>',
+			'additionalHtmlContextHelp' => '<i class="fas fa-question-circle"
+				data-toggle="tooltip"
+				title="' . $__t('This will apply to added products') . '"></i>',
 			'invalidFeedback' => $__t('The price cannot be lower than %s', '0'),
 			'isRequired' => false
 			))

views/recipeposform.blade.php

@@ -46,9 +46,7 @@
 			'nextInputSelector' => '#amount'
 			))
 
-			<div class="row">
+			<div class="form-group mb-1">
-				<div class="col">
-					<div class="form-group">
 				<div class="custom-control custom-checkbox">
 					<input type="hidden"
 						name="only_check_single_unit_in_stock"
@@ -60,8 +58,6 @@
 						for="only_check_single_unit_in_stock">{{ $__t('Only check if a single unit is in stock (a different quantity can then be used below)') }}</label>
 				</div>
 			</div>
-				</div>
-			</div>
 
 			@php if($mode == 'edit') { $value = $recipePos->amount; } else { $value = 1; } @endphp
 			@php if($mode == 'edit') { $initialQuId = $recipePos->qu_id; } else { $initialQuId = ''; } @endphp