From df5666e52f2693b7ea5e4e525001c6745c81003f Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Fri, 12 Mar 2021 11:25:54 +0100
Subject: [PATCH] sticky progress bar for uploads in submission

---
 .../form/submission-form.component.html       | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/app/submission/form/submission-form.component.html b/src/app/submission/form/submission-form.component.html
index a8e963d8ea..33b5d4be12 100644
--- a/src/app/submission/form/submission-form.component.html
+++ b/src/app/submission/form/submission-form.component.html
@@ -1,35 +1,36 @@
 <div class="container-fluid">
-  <div *ngIf="!(isLoading() | async) && (uploadEnabled$ | async)">
-    <ds-submission-upload-files [submissionId]="submissionId"
-                                [collectionId]="collectionId"
-                                [sectionId]="'upload'"
-                                [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
-    <div class="clearfix"></div>
-  </div>
-  <div *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
-      <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
-        <ds-submission-form-collection [currentCollectionId]="collectionId"
-                                       [currentDefinition]="definitionId"
-                                       [submissionId]="submissionId"
-                                       (collectionChange)="onCollectionChange($event)">
-        </ds-submission-form-collection>
-      </div>
-      <div class="submission-form-header-item text-right">
-        <ds-submission-form-section-add [collectionId]="collectionId"
-                                        [submissionId]="submissionId">
-        </ds-submission-form-section-add>
-      </div>
-  </div>
+    <div *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
+        <div *ngIf="(uploadEnabled$ | async)" class="w-100">
+            <ds-submission-upload-files [submissionId]="submissionId"
+                                        [collectionId]="collectionId"
+                                        [sectionId]="'upload'"
+                                        [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
+            <div class="clearfix"></div>
+        </div>
 
-  <div class="submission-form-content">
-    <ds-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-loading>
-    <ng-container *ngFor="let object of (submissionSections | async)">
-      <ds-submission-section-container [collectionId]="collectionId"
-                                       [submissionId]="submissionId"
-                                       [sectionData]="object"></ds-submission-section-container>
-    </ng-container>
-  </div>
-  <div *ngIf="!(isLoading() | async)" class="submission-form-footer mt-3 mb-3 position-sticky">
-    <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
-  </div>
+        <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
+            <ds-submission-form-collection [currentCollectionId]="collectionId"
+                                           [currentDefinition]="definitionId"
+                                           [submissionId]="submissionId"
+                                           (collectionChange)="onCollectionChange($event)">
+            </ds-submission-form-collection>
+        </div>
+        <div class="submission-form-header-item text-right">
+            <ds-submission-form-section-add [collectionId]="collectionId"
+                                            [submissionId]="submissionId">
+            </ds-submission-form-section-add>
+        </div>
+    </div>
+
+    <div class="submission-form-content">
+        <ds-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-loading>
+        <ng-container *ngFor="let object of (submissionSections | async)">
+            <ds-submission-section-container [collectionId]="collectionId"
+                                             [submissionId]="submissionId"
+                                             [sectionData]="object"></ds-submission-section-container>
+        </ng-container>
+    </div>
+    <div *ngIf="!(isLoading() | async)" class="submission-form-footer mt-3 mb-3 position-sticky">
+        <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
+    </div>
 </div>