A new approach so that the elements of the ds-file-dropzone-no-upload…

…er component don't overlap the navbar and make it inaccessible
DSpace · Jul 30, 2024 · 2c259f5 · 2c259f5
1 parent 351abaa
commit 2c259f5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html b/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html
@@ -1,12 +1,12 @@
 <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)"
      [uploader]="uploader"
      (onFileDrop)="setFile($event)"
      (fileOver)="fileOverDocument($event)">
 </div>
 <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
     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>

diff --git a/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.scss b/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.scss
@@ -6,10 +6,16 @@
   top: 0;
   left: 0;
   z-index: -1;
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .ds-document-drop-zone-active {
   z-index: var(--ds-drop-zone-area-z-index) !important;
+  opacity: 1;
+  visibility: visible;
 }
 
 .ds-document-drop-zone-inner {