mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -24,6 +24,10 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.isa-font-size-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.isa-font-size-24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user