Merged PR 346: #1084 Trefferliste PCL

Related work items: #1084
This commit is contained in:
Sebastian Neumair
2020-10-08 12:29:18 +00:00
committed by Lorenz Hilpert
3 changed files with 90 additions and 20 deletions

View File

@@ -1,22 +1,50 @@
<div class="tags" *ngIf="item.features">
<lib-icon *ngIf="item.features?.prebooked" name="tag_icon_preorder" height="48px"></lib-icon>
<lib-icon
*ngIf="item.features?.prebooked && item.processingStatus !== 256"
name="tag_icon_preorder"
height="48px"
></lib-icon>
</div>
<div class="feature-spacing" *ngIf="item.features"></div>
<div class="isa-text-right isa-mb-9 isa-font-size-24" *ngIf="item.compartmentCode && displayCompartmentCode">
<strong>{{ item.compartmentCode }}{{ item.compartmentInfo && '_' + item.compartmentInfo }} </strong>
<div class="feature-spacing" *ngIf="item.features?.prebooked"></div>
<div
class="isa-text-right isa-mb-9 isa-font-size-18"
*ngIf="item.compartmentCode && displayCompartmentCode"
>
<strong
>{{ item.compartmentCode
}}{{ item.compartmentInfo && '_' + item.compartmentInfo }}
</strong>
</div>
<div class="paid isa-mt-9 isa-mb-9" *ngIf="item.features?.paid">
<lib-icon height="24px" width="24px" name="Check_green_circle" class="isa-mr-10"></lib-icon>
<strong> {{ item.features?.paid }} </strong>
<lib-icon
height="24px"
width="24px"
name="Check_green_circle"
class="isa-mr-10"
></lib-icon>
<strong class="isa-font-size-18"> {{ item.features?.paid }} </strong>
</div>
<div class="grid-container">
<div class="cover">
<img class="thumbnail" src="https://produktbilder.ihugendubel.de/{{ item.product.ean }}.jpg?showDummy=true" alt="item.product.name" />
<img
class="thumbnail"
src="https://produktbilder.ihugendubel.de/{{
item.product.ean
}}.jpg?showDummy=true"
alt="item.product.name"
/>
</div>
<div class="title">
<strong class="product-name"> {{ [item.product.contributors, item.product.name] | title }}</strong>
<strong class="product-name">
{{ [item.product.contributors, item.product.name] | title }}</strong
>
<strong class="processing-status">
<lib-icon class="isa-mr-9" *ngIf="item.processingStatus | processingStatus: 'icon'; let icon" [name]="icon" [ngClass]="icon">
<lib-icon
class="isa-mr-9"
*ngIf="item.processingStatus | processingStatus: 'icon'; let icon"
[name]="icon"
[ngClass]="icon"
>
</lib-icon>
{{ item.processingStatus | processingStatus }}
</strong>
@@ -26,21 +54,57 @@
</div>
<div class="details">
<div class="item-type">
<lib-icon class="isa-mr-9" name="Icon_{{ item.product.format }}"></lib-icon>
<strong>{{ item.product.formatDetail }}</strong>
<lib-icon
class="isa-mr-9"
name="Icon_{{ item.product.format }}"
></lib-icon>
<strong class="item-type-text">{{ item.product.formatDetail }}</strong>
</div>
<ng-container [ngSwitch]="item.processingStatus">
<div class="order-date spec" *ngSwitchCase="256">
<span>Geändert</span>
<strong>{{ item.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</strong>
<strong
>{{
item.processingStatusDate | date: 'dd.MM.yy | HH:mm'
}}
Uhr</strong
>
</div>
<div class="order-date spec" *ngSwitchCase="512">
<span>Geändert</span>
<strong>{{ item.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</strong>
<strong
>{{
item.processingStatusDate | date: 'dd.MM.yy | HH:mm'
}}
Uhr</strong
>
</div>
<div class="order-date spec" *ngSwitchCase="1024">
<span>Geändert</span>
<strong
>{{
item.processingStatusDate | date: 'dd.MM.yy | HH:mm'
}}
Uhr</strong
>
</div>
<div class="order-date spec" *ngSwitchCase="2048">
<span>Geändert</span>
<strong>{{ item.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</strong>
<strong
>{{
item.processingStatusDate | date: 'dd.MM.yy | HH:mm'
}}
Uhr</strong
>
</div>
<div class="order-date spec" *ngSwitchCase="4096">
<span>Geändert</span>
<strong
>{{
item.processingStatusDate | date: 'dd.MM.yy | HH:mm'
}}
Uhr</strong
>
</div>
<div class="order-date spec" *ngSwitchDefault>
<span>Bestelldatum</span>

View File

@@ -1,6 +1,7 @@
:host {
display: block;
position: relative;
cursor: pointer;
}
.grid-container {
@@ -35,9 +36,6 @@
display: flex;
justify-content: space-between;
.product-name {
}
.processing-status {
color: #557596;
display: flex;
@@ -61,6 +59,13 @@
.item-type {
grid-area: item-type;
position: relative;
.item-type-text {
// For Centering Text while maintaining full wrap
position: relative;
top: -3px;
}
}
.order-date {
@@ -89,9 +94,6 @@
*:nth-child(1) {
width: 150px;
}
// *:nth-child(2) {
// }
}
.paid {

View File

@@ -24,6 +24,10 @@
text-align: right;
}
.isa-font-size-18 {
font-size: 18px;
}
.isa-font-size-24 {
font-size: 24px;
}