diff --git a/src/app/features/deposit/components/containers/deposit-file/deposit-file.container.html b/src/app/features/deposit/components/containers/deposit-file/deposit-file.container.html index f5b903bb5104b7d35183cedbf19c74486b21c30c..3e637fc33119d8177661e6ae62e5fb0bb776eb3b 100644 --- a/src/app/features/deposit/components/containers/deposit-file/deposit-file.container.html +++ b/src/app/features/deposit/components/containers/deposit-file/deposit-file.container.html @@ -1,25 +1,27 @@ -<div *ngIf="!readonly" - class="file-upload" -> - <h1>{{'deposit.file.title.inProgressUpload' | translate}}</h1> - <dlcm-deposit-files-upload-in-progress *ngIf="readonly === false" - [listFilesUploading]="uploadStatusObs | async" - (cancelChange)="cancel($event)" - (retryChange)="retry($event)" - (uploadChange)="upload($event)" - ></dlcm-deposit-files-upload-in-progress> -</div> +<div class="form"> + <div *ngIf="!readonly" + class="file-upload" + > + <h1>{{'deposit.file.title.inProgressUpload' | translate}}</h1> + <dlcm-deposit-files-upload-in-progress *ngIf="readonly === false" + [listFilesUploading]="uploadStatusObs | async" + (cancelChange)="cancel($event)" + (retryChange)="retry($event)" + (uploadChange)="upload($event)" + ></dlcm-deposit-files-upload-in-progress> + </div> -<h1>{{'deposit.file.title.filesOfDeposit' | translate}}</h1> -<dlcm-deposit-file-tree *ngIf="(listDataFileObs | async) | isNonEmptyArray; else noFile" - [listDepositDataFile]="listDataFileObs | async" - [isLoading]="isLoadingDataFileObs | async" - [readonly]="readonly" - (resumeChange)="resume($event)" - (deleteChange)="delete($event)" - (downloadChange)="download($event)" - (refreshChange)="refresh()" -></dlcm-deposit-file-tree> -<ng-template #noFile> - <label>{{'deposit.file.tree.noFile' | translate}}</label> -</ng-template> + <h1>{{'deposit.file.title.filesOfDeposit' | translate}}</h1> + <dlcm-deposit-file-tree *ngIf="(listDataFileObs | async) | isNonEmptyArray; else noFile" + [listDepositDataFile]="listDataFileObs | async" + [isLoading]="isLoadingDataFileObs | async" + [readonly]="readonly" + (resumeChange)="resume($event)" + (deleteChange)="delete($event)" + (downloadChange)="download($event)" + (refreshChange)="refresh()" + ></dlcm-deposit-file-tree> + <ng-template #noFile> + <label>{{'deposit.file.tree.noFile' | translate}}</label> + </ng-template> +</div> diff --git a/src/app/features/deposit/components/containers/deposit-file/deposit-file.container.scss b/src/app/features/deposit/components/containers/deposit-file/deposit-file.container.scss index 5b640f3178988a264a18d2074cefcc15291cf4a9..b8192c1824ac111e05e96484b31506d10581daed 100644 --- a/src/app/features/deposit/components/containers/deposit-file/deposit-file.container.scss +++ b/src/app/features/deposit/components/containers/deposit-file/deposit-file.container.scss @@ -1,3 +1,29 @@ -.file-upload { - padding-bottom: 25px; +@import "../../../../../../sass/abstracts/variables"; +@import "../../../../../../sass/abstracts/mixins"; + +.form { + display: flex; + flex-direction: column; + align-items: center; + + > * { + width: 30%; + + @include respond-to-breakpoint('xs') { + width: 85%; + } + + @include respond-to-breakpoint('sm') { + width: 50%; + } + + @include respond-to-breakpoint('md') { + width: 40%; + } + } + + .file-upload { + padding-bottom: 25px; + } } +