kenmirrors/grocy
1
0
Fork 0
mirror of https://github.com/grocy/grocy.git synced 2025-08-08 07:19:32 +00:00
Code Issues Projects Releases Wiki Activity

Add possibility to show equipment notes/instruction manuals also in fullscreen mode (references #25)

Browse Source
This commit is contained in:
Bernd Bestel 2018-10-03 16:40:40 +02:00
parent b242a5de52
commit ebd9b1b851
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
2 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/viewjs/equipment.js
View File

@ -39,7 +39,8 @@ function DisplayEquipment(id)
Grocy.Api.Get('get-object/equipment/' + id, Grocy.Api.Get('get-object/equipment/' + id,
function(equipmentItem) function(equipmentItem)
{ {
$("#description-tab").html(equipmentItem.description); $(".selected-equipment-name").text(equipmentItem.name);
$("#description-tab-content").html(equipmentItem.description);
if (equipmentItem.instruction_manual_file_name !== null && !equipmentItem.instruction_manual_file_name.isEmpty()) if (equipmentItem.instruction_manual_file_name !== null && !equipmentItem.instruction_manual_file_name.isEmpty())
{ {
@ -111,3 +112,17 @@ $(document).on('click', '.equipment-delete-button', function (e)
} }
}); });
}); });
$("#selectedEquipmentInstructionManualToggleFullscreenButton").on('click', function(e)
{
$("#selectedEquipmentInstructionManualCard").toggleClass("fullscreen");
$("#selectedEquipmentInstructionManualCard .card-header").toggleClass("fixed-top");
$("#selectedEquipmentInstructionManualCard .card-body").toggleClass("mt-5");
});
$("#selectedEquipmentDescriptionToggleFullscreenButton").on('click', function(e)
{
$("#selectedEquipmentDescriptionCard").toggleClass("fullscreen");
$("#selectedEquipmentDescriptionCard .card-header").toggleClass("fixed-top");
$("#selectedEquipmentDescriptionCard .card-body").toggleClass("mt-5");
});

28
views/equipment.blade.php
View File

@ -62,13 +62,33 @@
<a class="nav-link" data-toggle="tab" href="#description-tab">{{ $L('Notes') }}</a> <a class="nav-link" data-toggle="tab" href="#description-tab">{{ $L('Notes') }}</a>
</li> </li>
</ul> </ul>
<div class="tab-content border-left border-right border-bottom py-2 px-2"> <div class="tab-content">
<div class="tab-pane fade show active" id="instruction-manual-tab"> <div class="tab-pane fade show active" id="instruction-manual-tab">
<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> <div id="selectedEquipmentInstructionManualCard" class="card">
<embed id="selected-equipment-instruction-manual" class="embed-responsive embed-responsive-4by3" width="100%" height="800px" src="" type="application/pdf"> <div class="card-header">
<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>
<a id="selectedEquipmentInstructionManualToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 float-right" href="#" data-toggle="tooltip" title="{{ $L('Expand to fullscreen') }}">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</div>
<div class="card-body">
<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">
</div>
</div>
</div> </div>
<div class="tab-pane fade" id="description-tab"> <div class="tab-pane fade" id="description-tab">
<div id="selectedEquipmentDescriptionCard" class="card">
<div class="card-header">
<i class="fas fa-toolbox"></i> <span class="selected-equipment-name"></span>
<a id="selectedEquipmentDescriptionToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 float-right" href="#" data-toggle="tooltip" title="{{ $L('Expand to fullscreen') }}">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</div>
<div class="card-body">
<div id="description-tab-content" class="mb-0"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>