Fixed navigation menu and full screen recipe smooth scrolling on iOS (#397)

* fixed barcode button on iOS and made nicer on the desktop

* fixed indentation

* fixed indentation

* fixed recipe ingredient layout issue in safari

* fixed navigation menu and full screen recipe smooth scrolling on iOS

public/css/grocy.css

@@ -50,7 +50,7 @@ a.discrete-link:focus {
 }
 
 .fullscreen {
-	z-index: 9999;
+	z-index: 8888;
 	width: 100%;
 	height: 100%;
 	position: fixed;
@@ -59,6 +59,19 @@ a.discrete-link:focus {
 	overflow: auto;
  }
 
+ /* Fixes smooth scrolling on iOS */
+#sidebarResponsive, .fullscreen {
+    -webkit-overflow-scrolling: touch;
+}
+
+.fullscreen-card .card-header {
+    z-index: 9999;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+ 
  body.fullscreen-card {
 	 overflow: hidden;
  }

views/recipes.blade.php

@@ -129,7 +129,6 @@
 
 	@if($selectedRecipe !== null)
 	<div class="col-xs-12 col-md-6">
-		<div id="selectedRecipeCard" class="card">
 		<div class="card-header">
 			<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 }}">
@@ -148,7 +147,7 @@
 				<i class="fas fa-expand-arrows-alt"></i>
 			</a>
 		</div>
-
+		<div id="selectedRecipeCard" class="card">
 			<div class="card-body mb-0 pb-0">
 				<div class="row">
 					<div class="col-4">