mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
[HIMA-114] added photo-gallery component to ui library
This commit is contained in:
Eraldo Hasanaj
@@ -39,7 +39,6 @@ import { NotifierState } from './core/store/state/notifier.state';
|
||||
import { environment } from '../environments/environment';
|
||||
import { ModalModule } from '@libs/ui';
|
||||
|
||||
|
||||
const states = [
|
||||
FeedState,
|
||||
ProcessState,
|
||||
|
||||
@@ -1,69 +1,81 @@
|
||||
<div class="product-detail-container" *ngIf="product">
|
||||
<div class="general-details">
|
||||
<div class="product-image" [ngStyle]="{'background-image':'url(' + (product.productIcon$ | async) + ')'}">
|
||||
<div
|
||||
class="product-image"
|
||||
(click)="openGallery()"
|
||||
[ngStyle]="{
|
||||
'background-image': 'url(' + (product.productIcon$ | async) + ')'
|
||||
}"
|
||||
>
|
||||
<!-- <img [src]="product.productIcon$ | async"> -->
|
||||
</div>
|
||||
<div class="product-info-container">
|
||||
<div class="product-info">
|
||||
<div class="autor standart-text">
|
||||
<span>{{product.author}}</span>
|
||||
<span>{{ product.author }}</span>
|
||||
</div>
|
||||
<div class="title-price">
|
||||
<div class="title align-left">
|
||||
<span>{{product.title}}</span>
|
||||
<span>{{ product.title }}</span>
|
||||
</div>
|
||||
<div class="price align-right">
|
||||
<span>{{product.price}}</span>
|
||||
<span>{{ product.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-stock-info">
|
||||
<div class="type align-left">
|
||||
<div>
|
||||
<img class="icon" src="../../../assets/images/Icon_{{product.formatIcon}}.svg">
|
||||
<img
|
||||
class="icon"
|
||||
src="../../../assets/images/Icon_{{ product.formatIcon }}.svg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{product.format}}</span>
|
||||
<span>{{ product.format }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stock-info align-right" *ngIf="product.quantity > 0">
|
||||
<div class="ship-icon">
|
||||
<img class="icon" src="../../../assets/images/Truck_Icon_2.svg">
|
||||
<img class="icon" src="../../../assets/images/Truck_Icon_2.svg" />
|
||||
</div>
|
||||
<div class="send-icon">
|
||||
<img class="icon" src="../../../assets/images/Package_Icon_2.svg">
|
||||
<img
|
||||
class="icon"
|
||||
src="../../../assets/images/Package_Icon_2.svg"
|
||||
/>
|
||||
</div>
|
||||
<div class="stock-label" *ngIf="product.quantity > 0">
|
||||
<span>Lieferbar</span>
|
||||
</div>
|
||||
<div class="home-icon" *ngIf="product.quantity > 0">
|
||||
<img class="icon" src="../../../assets/images/Icon_House.svg">
|
||||
<img class="icon" src="../../../assets/images/Icon_House.svg" />
|
||||
</div>
|
||||
<div class="stock-quantity" *ngIf="product.quantity > 0">
|
||||
<span>{{product.quantity}}x</span>
|
||||
<span>{{ product.quantity }}x</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category align-right" *ngIf="product.assortment">
|
||||
<span>{{product.assortment}}</span>
|
||||
<span>{{ product.assortment }}</span>
|
||||
</div>
|
||||
<div class="languages standart-text">
|
||||
<span>{{product.locale}}</span>
|
||||
<span>{{ product.locale }}</span>
|
||||
</div>
|
||||
<div class="ean standart-text">
|
||||
<span>{{product.eanTag}}</span>
|
||||
<span>{{ product.eanTag }}</span>
|
||||
</div>
|
||||
<div class="publisher standart-text">
|
||||
<span>{{product.publisher}}</span>
|
||||
<span>{{ product.publisher }}</span>
|
||||
</div>
|
||||
<div class="publication-format-pages standart-text">
|
||||
<div class="publication">
|
||||
<span>{{product.publicationDate}}</span>
|
||||
<span>{{ product.publicationDate }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="divider">I</span>
|
||||
</div>
|
||||
<div class="format">
|
||||
<span>{{product.format}}</span>
|
||||
<span>{{ product.format }}</span>
|
||||
</div>
|
||||
<!---<div>
|
||||
<span>|</span>
|
||||
@@ -73,33 +85,45 @@
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-staus-info"></div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="product-details">
|
||||
<ng-container *ngIf="product.fullDescription.length > 0; else noDescription">
|
||||
<ng-container
|
||||
*ngIf="product.fullDescription.length > 0; else noDescription"
|
||||
>
|
||||
<div class="details" id="details-container" *ngIf="!moreBtn">
|
||||
<span id="details-text">{{descriptionText(product.fullDescription)}}</span>
|
||||
<span class="more-btn" (click)="toggleMore()">Mehr<img src="../../../assets/images/Arrow_Next-with-body.svg" alt="more"></span>
|
||||
<span id="details-text">{{
|
||||
descriptionText(product.fullDescription)
|
||||
}}</span>
|
||||
<span class="more-btn" (click)="toggleMore()"
|
||||
>Mehr<img
|
||||
src="../../../assets/images/Arrow_Next-with-body.svg"
|
||||
alt="more"
|
||||
/></span>
|
||||
</div>
|
||||
<div class="details-full" id="details-container" *ngIf="moreBtn">
|
||||
<span id="details-text">{{product.fullDescription}}</span>
|
||||
<span class="more-btn opened" (click)="toggleMore()">Weniger<img src="../../../assets/images/Arrow_back.svg" alt="less"></span>
|
||||
<span id="details-text">{{ product.fullDescription }}</span>
|
||||
<span class="more-btn opened" (click)="toggleMore()"
|
||||
>Weniger<img src="../../../assets/images/Arrow_back.svg" alt="less"
|
||||
/></span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-template #noDescription>
|
||||
<div class="details" id="details-container">
|
||||
<span id="details-text">Für diesen Artikel ist keine Beschreibung verfügbar</span>
|
||||
<span id="details-text"
|
||||
>Für diesen Artikel ist keine Beschreibung verfügbar</span
|
||||
>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div class="actions align-right">
|
||||
<app-button>Reservieren</app-button>
|
||||
<app-button [primary]="true" (action)="openModal()">Kaufoptionen</app-button>
|
||||
<app-button>Reservieren</app-button>
|
||||
<app-button [primary]="true" (action)="openModal()"
|
||||
>Kaufoptionen</app-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="other-formats">
|
||||
@@ -108,13 +132,13 @@
|
||||
</div>
|
||||
<div class="other-format">
|
||||
<div>
|
||||
<img src="../../../assets/images/E-Book_Icon_grey.svg">
|
||||
<img src="../../../assets/images/E-Book_Icon_grey.svg" />
|
||||
</div>
|
||||
<div>Hörbuch 12,95€</div>
|
||||
</div>
|
||||
<div class="other-format align-left">
|
||||
<div>
|
||||
<img src="../../../assets/images/Headphone_Icon_grey.svg">
|
||||
<img src="../../../assets/images/Headphone_Icon_grey.svg" />
|
||||
</div>
|
||||
<div>E-Book 13,95€</div>
|
||||
</div>
|
||||
@@ -122,9 +146,14 @@
|
||||
<div class="recommandations">
|
||||
<app-recommendations></app-recommendations>
|
||||
</div>
|
||||
<lib-photo-gallery #photoGallery></lib-photo-gallery>
|
||||
</div>
|
||||
<app-loading loading="true" *ngIf="!product"></app-loading>
|
||||
|
||||
<ng-container *ngIf="item">
|
||||
<app-checkout #checkout (closed)="cartActionCompleted($event)" [book]="item"></app-checkout>
|
||||
</ng-container>
|
||||
<app-checkout
|
||||
#checkout
|
||||
(closed)="cartActionCompleted($event)"
|
||||
[book]="item"
|
||||
></app-checkout>
|
||||
</ng-container>
|
||||
|
||||
@@ -1,342 +1,328 @@
|
||||
@import "../../../assets/scss/variables";
|
||||
@import '../../../assets/scss/variables';
|
||||
|
||||
.product-detail-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
background-color: white;
|
||||
padding: 20px 0 0 0;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px 0px #dce2e9;
|
||||
-moz-box-shadow: 0px 0px 10px 0px #dce2e9;;
|
||||
-webkit-box-shadow: 0px 0px 10px 0px #dce2e9;
|
||||
box-shadow: 0px 0px 10px 0px #dce2e9;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
background-color: white;
|
||||
padding: 20px 0 0 0;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px 0px #dce2e9;
|
||||
-moz-box-shadow: 0px 0px 10px 0px #dce2e9;
|
||||
-webkit-box-shadow: 0px 0px 10px 0px #dce2e9;
|
||||
box-shadow: 0px 0px 10px 0px #dce2e9;
|
||||
|
||||
& > div {
|
||||
padding: 0 20px;
|
||||
}
|
||||
& > div {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.general-details {
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-gap: 37px;
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-gap: 37px;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.recommandations {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.details {
|
||||
height: 68px;
|
||||
height: 68px;
|
||||
}
|
||||
|
||||
.details-full {
|
||||
height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.details span {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.product-image:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.standart-text {
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.publication-format-pages {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.publication {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.publication {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.divider {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.divider {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.type-stock-info {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
margin-top: 15px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.stock-info {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
padding-right: 8px;
|
||||
}
|
||||
img {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-price {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-gap: 2px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-gap: 2px;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-gap: 13px;
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-gap: 13px;
|
||||
}
|
||||
|
||||
.type span {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 17px;
|
||||
margin-top: 4px;
|
||||
height: 17px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.home-icon {
|
||||
padding-left: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.stock-label span {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-left: 8px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-left: 8px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.stock-quantity span {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.category {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #a7b9cb;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #a7b9cb;
|
||||
}
|
||||
|
||||
.languages {
|
||||
margin-top: 17px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding-top: 7px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding-top: 7px;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.publisher {
|
||||
margin-top: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
background-color: $hima-content-color;
|
||||
height: 3px;
|
||||
background-color: $hima-content-color;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: inline;
|
||||
padding-top: 20px;
|
||||
display: inline;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.other-formats {
|
||||
display: grid;
|
||||
grid-template-columns: max-content max-content auto;
|
||||
grid-gap: 20px;
|
||||
padding-top: 35px;
|
||||
margin: 30px 0;
|
||||
display: grid;
|
||||
grid-template-columns: max-content max-content auto;
|
||||
grid-gap: 20px;
|
||||
padding-top: 35px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.other-format-label {
|
||||
font-size: 16px;
|
||||
color: #a7b9cb;
|
||||
line-height: 21px;
|
||||
font-size: 16px;
|
||||
color: #a7b9cb;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.other-format {
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-gap: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #5a728a;
|
||||
line-height: 21px;
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
grid-gap: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #5a728a;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #5a728a;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
bottom: 22px;
|
||||
// right: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #5a728a;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
bottom: 22px;
|
||||
// right: 10px;
|
||||
|
||||
margin-top: 1px;
|
||||
align-self: right;
|
||||
background-color: white;
|
||||
width: 10%;
|
||||
position: relative;
|
||||
right: -91%;
|
||||
margin-top: 1px;
|
||||
align-self: right;
|
||||
background-color: white;
|
||||
width: 10%;
|
||||
position: relative;
|
||||
right: -91%;
|
||||
|
||||
img {
|
||||
padding-left: 8px;
|
||||
}
|
||||
img {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.opened {
|
||||
bottom: 0px;
|
||||
margin-bottom: 10px;
|
||||
bottom: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.recommandations {
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px -2px 18px 0px #dce2e9;
|
||||
padding: 25px 15px !important;
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px -2px 18px 0px #dce2e9;
|
||||
padding: 25px 15px !important;
|
||||
}
|
||||
|
||||
app-recommendations{
|
||||
padding: 0;
|
||||
app-recommendations {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Portrait */
|
||||
@media only screen
|
||||
and (min-device-width: 768px)
|
||||
and (max-device-width: 1024px)
|
||||
and (orientation: portrait)
|
||||
and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.product-image {
|
||||
width: 200px;
|
||||
}
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.product-image {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.price {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.details {
|
||||
height: 85px;
|
||||
}
|
||||
.details {
|
||||
height: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape */
|
||||
@media only screen
|
||||
and (min-device-width: 768px)
|
||||
and (max-device-width: 1024px)
|
||||
and (orientation: landscape)
|
||||
and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.product-image {
|
||||
width: 200px;
|
||||
}
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.product-image {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.price {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.details {
|
||||
min-height: 85px;
|
||||
}
|
||||
.details {
|
||||
min-height: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Portrait */
|
||||
/* Declare the same value for min- and max-width to avoid colliding with desktops */
|
||||
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
|
||||
@media only screen
|
||||
and (min-device-width: 1024px)
|
||||
and (max-device-width: 1024px)
|
||||
and (orientation: portrait)
|
||||
and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.product-image {
|
||||
width: 205px;
|
||||
}
|
||||
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.product-image {
|
||||
width: 205px;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.price {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
bottom: 21px;
|
||||
}
|
||||
.more-btn {
|
||||
bottom: 21px;
|
||||
}
|
||||
|
||||
.opened {
|
||||
bottom: 5px;
|
||||
}
|
||||
.opened {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.details {
|
||||
min-height: 68px;
|
||||
}
|
||||
.details {
|
||||
min-height: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape */
|
||||
/* Declare the same value for min- and max-width to avoid colliding with desktops */
|
||||
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
|
||||
@media only screen
|
||||
and (min-device-width: 1366px)
|
||||
and (max-device-width: 1366px)
|
||||
and (orientation: landscape)
|
||||
and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.product-image {
|
||||
width: 205px;
|
||||
}
|
||||
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.product-image {
|
||||
width: 205px;
|
||||
}
|
||||
|
||||
.price {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.price {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
bottom: 21px;
|
||||
}
|
||||
.more-btn {
|
||||
bottom: 21px;
|
||||
}
|
||||
|
||||
.opened {
|
||||
bottom: 5px;
|
||||
}
|
||||
.opened {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.details {
|
||||
min-height: 68px;
|
||||
}
|
||||
.details {
|
||||
min-height: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,9 +7,8 @@ import { Observable } from 'rxjs';
|
||||
import { ProcessState } from 'apps/sales/src/app/core/store/state/process.state';
|
||||
import { Select, Store } from '@ngxs/store';
|
||||
import { UpdateBreadcrump } from 'apps/sales/src/app/core/store/actions/process.actions';
|
||||
import { NotifierState } from 'apps/sales/src/app/core/store/state/notifier.state';
|
||||
import { Notify } from 'apps/sales/src/app/core/store/actions/notifier.actions';
|
||||
import { Process } from 'apps/sales/src/app/core/models/process.model';
|
||||
import { PhotoGalleryComponent } from '@libs/ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-details',
|
||||
@@ -18,6 +17,7 @@ import { Process } from 'apps/sales/src/app/core/models/process.model';
|
||||
})
|
||||
export class ProductDetailsComponent implements OnInit {
|
||||
@ViewChild('checkout') checkoutDialog: CheckoutComponent;
|
||||
@ViewChild('photoGallery') photoGallery: PhotoGalleryComponent;
|
||||
|
||||
id: number;
|
||||
item: ItemDTO;
|
||||
@@ -230,4 +230,8 @@ export class ProductDetailsComponent implements OnInit {
|
||||
toggleMore() {
|
||||
this.moreBtn = !this.moreBtn;
|
||||
}
|
||||
|
||||
openGallery() {
|
||||
this.photoGallery.openDialog();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,12 @@ import { ProcessModule } from './process/process.module';
|
||||
import { ProductCardLoadingComponent } from '../components/product-card-loading/product-card-loading.component';
|
||||
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||||
import { RecommendationsdModule } from './recommendations/recommendations.module';
|
||||
import { LoadingModule, ModalModule, ButtonModule } from '@libs/ui';
|
||||
import {
|
||||
LoadingModule,
|
||||
ModalModule,
|
||||
ButtonModule,
|
||||
PhotoGalleryModule
|
||||
} from '@libs/ui';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -41,7 +46,7 @@ import { LoadingModule, ModalModule, ButtonModule } from '@libs/ui';
|
||||
ProductCardComponent,
|
||||
ProductDetailsComponent,
|
||||
CheckoutComponent,
|
||||
ProductCardLoadingComponent,
|
||||
ProductCardLoadingComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
@@ -60,7 +65,8 @@ import { LoadingModule, ModalModule, ButtonModule } from '@libs/ui';
|
||||
RecommendationsdModule,
|
||||
LoadingModule,
|
||||
ModalModule,
|
||||
ButtonModule
|
||||
ButtonModule,
|
||||
PhotoGalleryModule
|
||||
],
|
||||
exports: [
|
||||
HeaderComponent,
|
||||
@@ -70,7 +76,7 @@ import { LoadingModule, ModalModule, ButtonModule } from '@libs/ui';
|
||||
MenuComponent,
|
||||
BreadcrumbsComponent,
|
||||
InfiniteScrollModule,
|
||||
ProcessModule,
|
||||
ProcessModule
|
||||
]
|
||||
})
|
||||
export class ComponentsModule {}
|
||||
|
||||
Reference in New Issue
Block a user