UI test/review

public/css/grocy.css

@@ -239,6 +239,10 @@ input::-webkit-inner-spin-button {
 	width: 96vw; /* Set width of popup menu to screen size */
 }
 
+a:not([href]) {
+    color: inherit;
+    text-decoration: none;
+}
 
 /* Set width of popup menu to fixed value on larger devices */
 @media (min-width: 400px) {

public/viewjs/equipment.js

@@ -1,6 +1,14 @@
 var equipmentTable = $('#equipment-table').DataTable({
 	'order': [[0, 'asc']],
-	'select': 'single',
+	'columnDefs': [
+		{ 'orderable': false, 'targets': 0 },
+		{ 'searchable': false, "targets": 0 },
+		{ 'orderData': 2, 'targets': 1 }
+	],
+	select: {
+		style: 'single',
+		selector: 'tr td:not(:first-child)'
+	},
 	'initComplete': function()
 	{
 		this.api().row({ order: 'current' }, 0).select();
@@ -29,8 +37,6 @@ function DisplayEquipment(id)
 			$(".selected-equipment-name").text(equipmentItem.name);
 			$("#description-tab-content").html(equipmentItem.description);
 			$(".equipment-edit-button").attr("href", U("/equipment/" + equipmentItem.id.toString()));
-			$(".equipment-delete-button").attr("data-equipment-id", equipmentItem.id);
-			$(".equipment-delete-button").attr("data-equipment-name", equipmentItem.name);
 
 			if (equipmentItem.instruction_manual_file_name !== null && !equipmentItem.instruction_manual_file_name.isEmpty())
 			{

public/viewjs/equipmentform.js

@@ -137,3 +137,12 @@ ResizeResponsiveEmbeds();
 Grocy.Components.UserfieldsForm.Load();
 $('#name').focus();
 Grocy.FrontendHelpers.ValidateForm('equipment-form');
+
+$("#instruction-manual").on("change", function(e)
+{
+	$("#instruction-manual-label").removeClass("d-none");
+	$("#instruction-manual-label-none").addClass("d-none");
+	$("#delete-current-instruction-manual-on-save-hint").addClass("d-none");
+	$("#current-instruction-manuale").addClass("d-none");
+	Grocy.DeleteProductPictureOnSave = false;
+});

views/equipment.blade.php

@@ -58,9 +58,10 @@
 		</div>
 
 		<table id="equipment-table"
-			class="table table-striped nowrap w-100">
+			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
+					<th class="border-right"></th>
 					<th>{{ $__t('Name') }}</th>
 
 					@include('components.userfields_thead', array(
@@ -72,6 +73,18 @@
 			<tbody class="d-none">
 				@foreach($equipment as $equipmentItem)
 				<tr data-equipment-id="{{ $equipmentItem->id }}">
+					<td class="fit-content border-right">
+						<a class="btn btn-info btn-sm hide-when-embedded hide-on-fullscreen-card"
+							href="{{ $U('/equipment/') }}{{ $equipmentItem->id }}">
+							<i class="fas fa-edit"></i>
+						</a>
+						<a class="btn btn-sm btn-danger hide-when-embedded hide-on-fullscreen-card equipment-delete-button"
+							href="#"
+							data-equipment-id="{{ $equipmentItem->id }}"
+							data-equipment-name="{{ $equipmentItem->name }}">
+							<i class="fas fa-trash"></i>
+						</a>
+					</td>
 					<td>
 						{{ $equipmentItem->name }}
 					</td>
@@ -88,7 +101,7 @@
 	</div>
 
 	<div class="col-xs-12 col-md-8">
-		<ul class="nav nav-tabs">
+		<ul class="nav nav-tabs grocy-tabs">
 			<li class="nav-item">
 				<a class="nav-link active"
 					data-toggle="tab"
@@ -100,23 +113,13 @@
 					href="#description-tab">{{ $__t('Notes') }}</a>
 			</li>
 		</ul>
-		<div class="tab-content">
+		<div class="tab-content grocy-tabs">
 			<div class="tab-pane fade show active"
 				id="instruction-manual-tab">
 				<div id="selectedEquipmentInstructionManualCard"
 					class="card">
 					<div class="card-header card-header-fullscreen">
-						<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>&nbsp;&nbsp;
+						<span class="selected-equipment-name"></span>
-						<a class="btn btn-sm btn-outline-info py-0 equipment-edit-button hide-on-fullscreen-card"
-							href="#">
-							<i class="fas fa-edit"></i>
-						</a>
-						<a class="btn btn-sm btn-outline-danger py-0 equipment-delete-button hide-on-fullscreen-card"
-							href="#"
-							data-equipment-id="{{ $equipmentItem->id }}"
-							data-equipment-name="{{ $equipmentItem->name }}">
-							<i class="fas fa-trash"></i>
-						</a>
 						<a id="selectedEquipmentInstructionManualToggleFullscreenButton"
 							class="btn btn-sm btn-outline-secondary py-0 float-right"
 							href="#"
@@ -140,17 +143,7 @@
 				<div id="selectedEquipmentDescriptionCard"
 					class="card">
 					<div class="card-header card-header-fullscreen">
-						<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>&nbsp;&nbsp;
+						<span class="selected-equipment-name"></span>
-						<a class="btn btn-sm btn-outline-info py-0 equipment-edit-button hide-on-fullscreen-card"
-							href="#">
-							<i class="fas fa-edit"></i>
-						</a>
-						<a class="btn btn-sm btn-outline-danger py-0 equipment-delete-button hide-on-fullscreen-card"
-							href="#"
-							data-equipment-id="{{ $equipmentItem->id }}"
-							data-equipment-name="{{ $equipmentItem->name }}">
-							<i class="fas fa-trash"></i>
-						</a>
 						<a id="selectedEquipmentDescriptionToggleFullscreenButton"
 							class="btn btn-sm btn-outline-secondary py-0 float-right"
 							href="#"

views/equipmentform.blade.php

@@ -49,20 +49,6 @@
 				<div class="invalid-feedback">{{ $__t('A name is required') }}</div>
 			</div>
 
-			<div class="form-group">
-				<label for="instruction-manual">{{ $__t('Instruction manual') }} (PDF)
-					<span class="text-muted small">{{ $__t('If you don\'t select a file, the current instruction manual will not be altered') }}</span>
-				</label>
-				<div class="custom-file">
-					<input type="file"
-						class="custom-file-input"
-						id="instruction-manual"
-						accept="application/pdf">
-					<label class="custom-file-label"
-						for="instruction-manual">{{ $__t('No file selected') }}</label>
-				</div>
-			</div>
-
 			<div class="form-group">
 				<label for="description">{{ $__t('Notes') }}</label>
 				<textarea class="form-control wysiwyg-editor"
@@ -82,20 +68,50 @@
 	</div>
 
 	<div class="col-lg-6 col-xs-12">
-		<label class="mt-2">{{ $__t('Instruction manual') }}</label>
+		<div class="row">
-		<button id="delete-current-instruction-manual-button"
+			<div class="col">
-			class="btn btn-sm btn-danger mb-1 @if(empty($equipment->instruction_manual_file_name)) disabled @endif"><i class="fas fa-trash"></i> {{ $__t('Delete') }}</button>
+				<div class="title-related-links mb-3">
-		@if(!empty($equipment->instruction_manual_file_name))
+					<h4>
-		<embed id="current-equipment-instruction-manual"
+						{{ $__t('Instruction manual') }}
-			class="embed-responsive embed-responsive-4by3"
+					</h4>
-			src="{{ $U('/api/files/equipmentmanuals/' . base64_encode($equipment->instruction_manual_file_name)) }}"
+					<div class="form-group w-75 m-0">
-			type="application/pdf">
+						<div class="input-group">
-		<p id="delete-current-instruction-manual-on-save-hint"
+							<div class="custom-file">
-			class="form-text text-muted font-italic d-none">{{ $__t('The current instruction manual will be deleted when you save the equipment') }}</p>
+								<input type="file"
-		@else
+									class="custom-file-input"
-		<p id="no-current-instruction-manual-hint"
+									id="instruction-manual"
-			class="form-text text-muted font-italic">{{ $__t('No instruction manual available') }}</p>
+									accept="application/pdf">
-		@endif
+								<label id="instruction-manual-label"
+									class="custom-file-label @if(empty($equipment->instruction_manual_file_name)) d-none @endif"
+									for="instruction-manual">
+									{{ $equipment->instruction_manual_file_name }}
+								</label>
+								<label id="instruction-manual-label-none"
+									class="custom-file-label @if(!empty($equipment->instruction_manual_file_name)) d-none @endif"
+									for="instruction-manual">
+									{{ $__t('No file selected') }}
+								</label>
+							</div>
+							<div class="input-group-append">
+								<span class="input-group-text"><i class="fas fa-trash"
+										id="delete-current-instruction-manual-button"></i></span>
+							</div>
+						</div>
+					</div>
+				</div>
+				@if(!empty($equipment->instruction_manual_file_name))
+				<embed id="current-equipment-instruction-manual"
+					class="embed-responsive embed-responsive-4by3"
+					src="{{ $U('/api/files/equipmentmanuals/' . base64_encode($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">{{ $__t('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">{{ $__t('No instruction manual available') }}</p>
+				@endif
+			</div>
+		</div>
 	</div>
 </div>
 @stop

views/recipes.blade.php

@@ -243,6 +243,7 @@
 										<i class="fas fa-cart-plus"></i>
 									</a>
 									<a class="recipe-fullscreen hide-when-embedded"
+										id="selectedRecipeToggleFullscreenButton"
 										href="#"
 										data-toggle="tooltip"
 										title="{{ $__t('Expand to fullscreen') }}">