From 7ba6fc875be579b793e80f88caf1472e42ce49be Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Wed, 3 Oct 2018 19:05:00 +0200
Subject: [PATCH] Improve responsive embeds (references #25)

---
 public/js/grocy.js             | 19 +++++++++++++++++++
 public/viewjs/equipment.js     |  3 +++
 public/viewjs/equipmentform.js |  2 ++
 views/equipment.blade.php      | 16 ++++------------
 views/equipmentform.blade.php  |  2 +-
 5 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/public/js/grocy.js b/public/js/grocy.js
index f0257cf5..2f6c171d 100644
--- a/public/js/grocy.js
+++ b/public/js/grocy.js
@@ -322,3 +322,22 @@ if ($(".custom-file-label").length > 0)
 {
 	$("<style>").html('.custom-file-label::after { content: "' + L("Select file") + '"; }').appendTo("head");
 }
+
+ResizeResponsiveEmbeds = function(fillEntireViewport = false)
+{
+	if (!fillEntireViewport)
+	{
+		var maxHeight = $("body").height() - $("#mainNav").outerHeight() - 62;
+	}
+	else
+	{
+		var maxHeight = $("body").height();
+	}
+	
+	$(".embed-responsive").attr("height", maxHeight.toString() + "px");
+}
+$(window).on('resize', function()
+{
+	console.log($("body").hasClass("fullscreen-responsive-embed-active"));
+	ResizeResponsiveEmbeds($("body").hasClass("fullscreen-responsive-embed-active"));
+});
diff --git a/public/viewjs/equipment.js b/public/viewjs/equipment.js
index d6599309..88c46f4c 100644
--- a/public/viewjs/equipment.js
+++ b/public/viewjs/equipment.js
@@ -50,6 +50,7 @@ function DisplayEquipment(id)
 				$("#selected-equipment-has-no-instruction-manual-hint").addClass("d-none");
 
 				$("a[href='#instruction-manual-tab']").tab("show");
+				ResizeResponsiveEmbeds();
 			}
 			else
 			{
@@ -118,6 +119,8 @@ $("#selectedEquipmentInstructionManualToggleFullscreenButton").on('click', funct
 	$("#selectedEquipmentInstructionManualCard").toggleClass("fullscreen");
 	$("#selectedEquipmentInstructionManualCard .card-header").toggleClass("fixed-top");
 	$("#selectedEquipmentInstructionManualCard .card-body").toggleClass("mt-5");
+	$("body").toggleClass("fullscreen-responsive-embed-active");
+	ResizeResponsiveEmbeds(true);
 });
 
 $("#selectedEquipmentDescriptionToggleFullscreenButton").on('click', function(e)
diff --git a/public/viewjs/equipmentform.js b/public/viewjs/equipmentform.js
index b4d0e0e9..aa5895c1 100644
--- a/public/viewjs/equipmentform.js
+++ b/public/viewjs/equipmentform.js
@@ -124,5 +124,7 @@ $('#description').summernote({
 	lang: L('summernote_locale')
 });
 
+ResizeResponsiveEmbeds();
+
 $('#name').focus();
 Grocy.FrontendHelpers.ValidateForm('equipment-form');
diff --git a/views/equipment.blade.php b/views/equipment.blade.php
index 5079f48e..10a5be71 100644
--- a/views/equipment.blade.php
+++ b/views/equipment.blade.php
@@ -6,26 +6,18 @@
 
 @section('content')
 <div class="row">
-	<div class="col">
+
+	<div class="col-xs-12 col-md-4 pb-3">
 		<h1>
 			@yield('title')
 			<a class="btn btn-outline-dark" href="{{ $U('/equipment/new') }}">
 				<i class="fas fa-plus"></i>&nbsp;{{ $L('Add') }}
 			</a>
 		</h1>
-	</div>
-</div>
 
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-6 col-xl-3">
 		<label for="search">{{ $L('Search') }}</label> <i class="fas fa-search"></i>
 		<input type="text" class="form-control" id="search">
-	</div>
-</div>
 
-<div class="row">
-
-	<div class="col-xs-12 col-md-3 pb-3">
 		<table id="equipment-table" class="table table-sm table-striped dt-responsive">
 			<thead>
 				<tr>
@@ -53,7 +45,7 @@
 		</table>
 	</div>
 
-	<div class="col-xs-12 col-md-9">
+	<div class="col-xs-12 col-md-8">
 		<ul class="nav nav-tabs">
 			<li class="nav-item">
 				<a class="nav-link active" data-toggle="tab" href="#instruction-manual-tab">{{ $L('Instruction manual') }}</a>
@@ -73,7 +65,7 @@
 					</div>
 					<div class="card-body py-0 px-0">
 						<p id="selected-equipment-has-no-instruction-manual-hint" class="text-muted font-italic d-none">{{ $L('The selected equipment has no instruction manual') }}</p>
-						<embed id="selected-equipment-instruction-manual" class="embed-responsive embed-responsive-4by3" width="100%" height="800px" src="" type="application/pdf">
+						<embed id="selected-equipment-instruction-manual" class="embed-responsive embed-responsive-4by3" src="" type="application/pdf">
 					</div>
 				</div>
 			</div>
diff --git a/views/equipmentform.blade.php b/views/equipmentform.blade.php
index f551dd55..bc9d093d 100644
--- a/views/equipmentform.blade.php
+++ b/views/equipmentform.blade.php
@@ -64,7 +64,7 @@
 		<label class="mt-2">{{ $L('Current instruction manual') }}</label>
 		<button id="delete-current-instruction-manual-button" class="btn btn-sm btn-danger @if(empty($equipment->instruction_manual_file_name)) disabled @endif"><i class="fas fa-trash"></i> {{ $L('Delete') }}</button>
 		@if(!empty($equipment->instruction_manual_file_name))
-			<embed id="current-equipment-instruction-manual" class="embed-responsive embed-responsive-4by3" width="100%" height="800px" src="{{ $U('/api/file/equipmentmanuals?file_name=' . $equipment->instruction_manual_file_name) }}" type="application/pdf">
+			<embed id="current-equipment-instruction-manual" class="embed-responsive embed-responsive-4by3" src="{{ $U('/api/file/equipmentmanuals?file_name=' . $equipment->instruction_manual_file_name) }}" type="application/pdf">
 			<p id="delete-current-instruction-manual-on-save-hint" class="form-text text-muted font-italic d-none">{{ $L('The current instruction manual will be deleted when you save the equipment') }}</p>
 		@else
 			<p id="no-current-instruction-manual-hint" class="form-text text-muted font-italic">{{ $L('No instruction manual available') }}</p>