#1488 Zwischenstand Styling Bestellbestaetigung

This commit is contained in:
Andreas Schickinger
2021-03-04 10:21:01 +01:00
committed by Lorenz Hilpert
parent e952691a4a
commit 83eaf8e1e8
3 changed files with 34 additions and 15 deletions

View File

@@ -25,11 +25,11 @@
</div>
<div class="sub-row between" *ngIf="displayOrder?.features?.orderType !== 'Download'">
<span>Zielfiliale</span>
<strong>{{ displayOrder.targetBranch?.name }}</strong>
<strong class="value">{{ displayOrder.targetBranch?.name }}</strong>
</div>
<div class="sub-row between" *ngIf="displayOrder?.features?.orderType === 'Download'">
<span>E-Mail</span>
<strong>{{ displayOrder.buyer?.communicationDetails?.email }}</strong>
<strong class="value">{{ displayOrder.buyer?.communicationDetails?.email }}</strong>
</div>
</div>
<div class="row">
@@ -39,24 +39,29 @@
</div>
<div class="sub-row between">
<span>Adresse</span>
<strong>{{ displayOrder.targetBranch | branchAddress }}</strong>
<strong class="value">{{ displayOrder.targetBranch | branchAddress }}</strong>
</div>
</div>
<hr class="top-line" />
<ng-container *ngFor="let order of displayOrder.items">
<div class="row between">
<img class="thumbnail" [src]="order.product?.ean | productImage: 30:50:true" />
<span class="name">{{ order.product?.name }}</span>
<div class="product-name">
<img class="thumbnail" [src]="order.product?.ean | productImage: 30:50:true" />
<span class="name">{{ order.product?.name }}</span>
</div>
<div class="product-details">
<img class="order-icon" [src]="'/assets/images/Icon_' + order?.product?.format + '.svg'" alt="book-icon" />
<span class="format">{{ order.product?.format }}</span>
<span class="separator">|</span>
<span class="contributors">{{ order?.product?.contributors }}</span>
<span class="separator">|</span>
<span class="order-type">{{ order?.features?.orderType || '' }} </span>
<div class="info-row">
<img class="order-icon" [src]="'/assets/images/Icon_' + order?.product?.format + '.svg'" alt="book-icon" />
<span class="format">{{ order.product?.format }}</span>
<span class="separator">|</span>
<span class="contributors">{{ order?.product?.contributors }}</span>
</div>
<div class="delivery-row">
<!-- <span class="separator">|</span> -->
<span class="order-type">{{ order?.features?.orderType || '' }} </span>
</div>
</div>
<span class="quantity">{{ order.quantity }}x</span>

View File

@@ -46,6 +46,10 @@
.label {
@apply w-px-150;
}
.value {
@apply ml-1;
}
}
.thumbnail {
@@ -55,12 +59,20 @@
.name {
@apply font-bold whitespace-nowrap overflow-ellipsis overflow-hidden mx-2;
width: 300px;
width: 200px;
}
.product-name {
@apply flex flex-row;
}
.product-details {
@apply flex flex-row;
@apply flex flex-col whitespace-nowrap overflow-ellipsis overflow-hidden;
width: 300px;
.info-row {
@apply whitespace-nowrap overflow-ellipsis overflow-hidden;
}
}
.order-icon {

View File

@@ -41,7 +41,9 @@ export class CheckoutSummaryComponent {
)
);
constructor(private domainCheckoutService: DomainCheckoutService, private uiModal: UiModalService) {}
constructor(private domainCheckoutService: DomainCheckoutService, private uiModal: UiModalService) {
// this.displayOrders$.subscribe((o) => console.log(o));
}
openPrintModal(id: number) {
this.uiModal.open({