A new approach so that the elements of the ds-file-dropzone-no-uploader component don't overlap the navbar and make it inaccessible

This commit is contained in:
root
2024-07-30 17:20:47 -03:00
parent 351abaa5c2
commit 2c259f5ae9
2 changed files with 8 additions and 2 deletions

View File

@@ -1,12 +1,12 @@
<div ng2FileDrop <div ng2FileDrop
class="ds-document-drop-zone h-100 w-100" class="ds-document-drop-zone position-fixed h-100 w-100"
[class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)" [class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)"
[uploader]="uploader" [uploader]="uploader"
(onFileDrop)="setFile($event)" (onFileDrop)="setFile($event)"
(fileOver)="fileOverDocument($event)"> (fileOver)="fileOverDocument($event)">
</div> </div>
<div *ngIf="(isOverDocumentDropZone | async)" <div *ngIf="(isOverDocumentDropZone | async)"
class="ds-document-drop-zone-inner h-100 w-100 p-2"> class="ds-document-drop-zone-inner position-fixed h-100 w-100 p-2">
<div <div
class="ds-document-drop-zone-inner-content position-relative d-flex flex-column justify-content-center text-center h-100 w-100"> class="ds-document-drop-zone-inner-content position-relative d-flex flex-column justify-content-center text-center h-100 w-100">
<p class="text-primary">{{ dropMessageLabel | translate}}</p> <p class="text-primary">{{ dropMessageLabel | translate}}</p>

View File

@@ -6,10 +6,16 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
display: block;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
} }
.ds-document-drop-zone-active { .ds-document-drop-zone-active {
z-index: var(--ds-drop-zone-area-z-index) !important; z-index: var(--ds-drop-zone-area-z-index) !important;
opacity: 1;
visibility: visible;
} }
.ds-document-drop-zone-inner { .ds-document-drop-zone-inner {