Commit 38646e3a authored by Florent POITTEVIN's avatar Florent POITTEVIN
Browse files

style: fix display cart when archive title is long

parent 28a0031c
<lib-empty-container cdkTrapFocus
[solidifyFocusFirstElement]="true"
>
<h1 mat-dialog-title>{{'app.cart.title' | translate}}</h1>
<div mat-dialog-content
[dlcmSpinner]="isLoadingArchiveObs | async"
>
<ng-container *ngIf="(listArchiveObs | async) && (listArchiveObs | async).length > 0; else emptyCart">
<mat-list class="list">
<mat-list-item *ngFor="let archive of (listArchiveObs | async)">
{{metadataUtil.getTitle(searchScopeEnum.public, archive.metadata)}}
<div>
{{metadataUtil.getSize(archive.metadata) | filesize}}
<button mat-icon-button
mat-button
class="trash"
[matTooltip]="'app.cart.button.placeholder.remove' | translate"
[matTooltipPosition]="'right'"
solidifyShortCuts
(onEnter)="remove(archive.resId)"
(click)="remove(archive.resId)"
<h1 mat-dialog-title>{{'app.cart.title' | translate}}</h1>
<div mat-dialog-content
[dlcmSpinner]="isLoadingArchiveObs | async"
>
<ng-container *ngIf="(listArchiveObs | async) && (listArchiveObs | async).length > 0; else emptyCart">
<mat-list class="list">
<mat-list-item *ngFor="let archive of (listArchiveObs | async)">
<div *ngIf="metadataUtil.getTitle(searchScopeEnum.public, archive.metadata) as title"
class="label"
[matTooltip]="title"
>
<mat-icon>delete</mat-icon>
</button>
</div>
</mat-list-item>
</mat-list>
</ng-container>
{{title}}
</div>
<div class="size-and-delete">
{{metadataUtil.getSize(archive.metadata) | filesize}}
<button mat-icon-button
mat-button
class="trash"
[matTooltip]="'app.cart.button.placeholder.remove' | translate"
[matTooltipPosition]="'right'"
solidifyShortCuts
(onEnter)="remove(archive.resId)"
(click)="remove(archive.resId)"
>
<mat-icon>delete</mat-icon>
</button>
</div>
</mat-list-item>
</mat-list>
</ng-container>
<ng-template #emptyCart>
<div class="empty-cart">
<mat-icon class="icon">archive</mat-icon>
<span>{{'app.cart.body.empty' | translate}}</span>
</div>
</ng-template>
</div>
<div mat-dialog-actions>
<button mat-button
[mat-dialog-close]=""
>{{'app.cart.button.close' | translate}}</button>
<button mat-flat-button
color="primary"
[dlcmButtonSpinner]="(isLoadingCartObs | async)"
[disabled]="!(listArchiveObs | async) || (listArchiveObs | async).length === 0"
solidifyShortCuts
(onEnter)="submit()"
(click)="submit()"
>{{'app.cart.button.submit' | translate}}</button>
</div>
<ng-template #emptyCart>
<div class="empty-cart">
<mat-icon class="icon">archive</mat-icon>
<span>{{'app.cart.body.empty' | translate}}</span>
</div>
</ng-template>
</div>
<div mat-dialog-actions>
<button mat-button
[mat-dialog-close]=""
>{{'app.cart.button.close' | translate}}</button>
<button mat-flat-button
color="primary"
[dlcmButtonSpinner]="(isLoadingCartObs | async)"
[disabled]="!(listArchiveObs | async) || (listArchiveObs | async).length === 0"
solidifyShortCuts
(onEnter)="submit()"
(click)="submit()"
>{{'app.cart.button.submit' | translate}}</button>
</div>
</lib-empty-container>
@import "./src/sass/abstracts/variables";
@import "./src/sass/abstracts/mixins";
$size-icon: 50px;
......@@ -7,6 +8,16 @@ $size-icon: 50px;
.mat-list-item .mat-list-item-content {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
.label {
@include truncate-with-ellipsis;
padding-right: 10px;
}
.size-and-delete {
flex-shrink: 0;
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment