Implemented bottom-sticky save buttons for product and chore edit forms (closes #1589)

changelog/64_UNRELEASED_xxxx.xx.xx.md

@@ -1,6 +1,7 @@
 - Fixed that the "Add all list items to stock" shopping list workflow did not work for more than ~6 items (thanks @tjhowse)
 - Fixed that plural form handling (e.g. for quantity units) was wrong for negative numbers
 - Fixed that the context menu entries Consume and Transfer on the stock overview page were disabled when the amount in stock was < 1
+- The product and chore edit pages now have bottom-sticky save buttons
 
 ### API
 - Fixed that international characters were not allowed in API query filters

public/css/grocy.css

@@ -134,6 +134,19 @@ input::-webkit-inner-spin-button {
 	-webkit-appearance: none;
 }
 
+.sticky-form-footer {
+	border-top: 1px solid #d6d6d6;
+	background-color: white;
+	bottom: 0;
+	position: fixed;
+	width: 100%;
+	z-index: 5000;
+}
+
+form.has-sticky-form-footer .form-group:nth-last-child(2) {
+	padding-bottom: 2rem;
+}
+
 /* Navigation style customizations */
 #mainNav {
 	line-height: 1;

public/css/grocy_night_mode.css

@@ -1,4 +1,5 @@
-body.night-mode {
+body.night-mode,
+.night-mode .sticky-form-footer {
 	color: #c1c1c1;
 	background-color: #333131;
 }

views/choreform.blade.php

@@ -30,6 +30,7 @@
 		@endif
 
 		<form id="chore-form"
+			class="has-sticky-form-footer"
 			novalidate>
 
 			<div class="form-group">
@@ -284,8 +285,10 @@
 			'entity' => 'chores'
 			))
 
+			<div class="sticky-form-footer pt-1">
 				<button id="save-chore-button"
 					class="btn btn-success">{{ $__t('Save') }}</button>
+			</div>
 
 		</form>
 	</div>
@@ -293,7 +296,7 @@
 	<div class="col-lg-6 col-12 @if($mode == 'create') d-none @endif">
 		<div class="row">
 			<div class="col clearfix">
-				<div class="title-related-links">
+				<div class="title-related-links pb-4">
 					<h4>
 						<span class="ls-n1">{{ $__t('grocycode') }}</span>
 						<i class="fas fa-question-circle text-muted"

views/productform.blade.php

@@ -36,6 +36,7 @@
 		@endif
 
 		<form id="product-form"
+			class="has-sticky-form-footer"
 			novalidate>
 
 			<div class="form-group">
@@ -420,11 +421,6 @@
 			'additionalCssClasses' => 'locale-number-input locale-number-quantity-amount'
 			))
 
-			@include('components.userfieldsform', array(
-			'userfields' => $userfields,
-			'entity' => 'products'
-			))
-
 			@if(GROCY_FEATURE_FLAG_LABEL_PRINTER)
 			<div class="form-group">
 				<div class="custom-control custom-checkbox">
@@ -477,6 +473,11 @@
 			</div>
 			@endif
 
+			@include('components.userfieldsform', array(
+			'userfields' => $userfields,
+			'entity' => 'products'
+			))
+
 			<div class="form-group">
 				<div class="custom-control custom-checkbox">
 					<input @if($mode=='edit'
@@ -491,14 +492,16 @@
 				</div>
 			</div>
 
+			<div class="sticky-form-footer pt-1">
 				<small id="save-hint"
-				class="my-2 form-text text-muted @if($mode == 'edit') d-none @endif">{{ $__t('Save & continue to add quantity unit conversions & barcodes') }}</small>
+					class="my-1 form-text text-muted @if($mode == 'edit') d-none @endif">{{ $__t('Save & continue to add quantity unit conversions & barcodes') }}</small>
 
 				<button id="save-product-button"
 					class="save-product-button btn btn-success mb-2 default-submit-button"
 					data-location="continue">{{ $__t('Save & continue') }}</button>
 				<button class="save-product-button btn btn-info mb-2"
 					data-location="return">{{ $__t('Save & return to products') }}</button>
+			</div>
 		</form>
 
 	</div>