mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
[HIMA-12] First version of product details page
This commit is contained in:
Eraldo Hasanaj
@@ -5,7 +5,7 @@
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
width: 97%;
|
||||
// width: 97%;
|
||||
-moz-box-shadow: 0 0 3px $hima-content-shadow-color;
|
||||
-webkit-box-shadow: 0 0 3px $hima-content-shadow-color;
|
||||
box-shadow: 0 0 3px $hima-content-shadow-color;
|
||||
|
||||
@@ -80,14 +80,36 @@
|
||||
</div>
|
||||
<div class="product-staus-info"></div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="product-details">
|
||||
<div class="details">
|
||||
<span>{{getShortDescription(product.fullDescription)}}</span>
|
||||
</div>
|
||||
<div class="actions align-right">
|
||||
<button class="btn align-right reserve">Reservieren</button>
|
||||
<button class="btn btn-active align-right" (click)="openModal()">Kaufoptionen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="other-formats">
|
||||
<div class="other-format-label">
|
||||
<span>Weitere verfügbare Formate</span>
|
||||
</div>
|
||||
<div class="other-format">
|
||||
<div>
|
||||
<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">
|
||||
</div>
|
||||
<div>E-Book 13,95€</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommandations"></div>
|
||||
</div>
|
||||
<button class="btn" (click)="openModal()">Open checkout</button>
|
||||
|
||||
|
||||
<ng-container *ngIf="item">
|
||||
<app-checkout #checkout (closed)="cartActionCompleted($event)" [book]="item"></app-checkout>
|
||||
|
||||
@@ -121,4 +121,67 @@
|
||||
|
||||
.publisher {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
background-color: $hima-content-color;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: inline;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #f70400;
|
||||
width: 149px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
//position: absolute;
|
||||
//bottom: 25px;
|
||||
|
||||
|
||||
&-active, &:hover {
|
||||
background-color: #f70400;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.reserve {
|
||||
padding-right: 150px;
|
||||
}
|
||||
|
||||
.other-formats {
|
||||
display: grid;
|
||||
grid-template-columns: max-content max-content auto;
|
||||
grid-gap: 20px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.other-format-label {
|
||||
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;
|
||||
}
|
||||
@@ -50,7 +50,10 @@ export class ProductDetailsComponent implements OnInit {
|
||||
params => this.id = params['id']
|
||||
);
|
||||
this.productService.getItemById(this.id).subscribe(
|
||||
(item: ItemDTO) => this.product = this.productDetailMapper(item)
|
||||
(item: ItemDTO) => {
|
||||
this.item = item;
|
||||
return this.product = this.productDetailMapper(item);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
11
src/assets/images/E-Book_Icon_grey.svg
Normal file
11
src/assets/images/E-Book_Icon_grey.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="15px" height="19px" viewBox="0 0 15 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>E-Book_Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="UC1_08_01_Hugendubel_Instoreapp_Kunden_Artikeldetailseite" transform="translate(-443.000000, -781.000000)" fill="#5A728A" fill-rule="nonzero" stroke="#5A728A" stroke-width="0.6">
|
||||
<path d="M456.030769,782 L445.569231,782 C444.706154,782 444,782.706154 444,783.569231 L444,797.169231 C444,798.032308 444.706154,798.738462 445.569231,798.738462 L456.030769,798.738462 C456.893846,798.738462 457.6,798.032308 457.6,797.169231 L457.6,783.569231 C457.6,782.68 456.893846,782 456.030769,782 Z M456.553846,797.169231 C456.553846,797.456923 456.318462,797.692308 456.030769,797.692308 L445.569231,797.692308 C445.281538,797.692308 445.046154,797.456923 445.046154,797.169231 L445.046154,783.569231 C445.046154,783.281538 445.281538,783.046154 445.569231,783.046154 L456.030769,783.046154 C456.318462,783.046154 456.553846,783.281538 456.553846,783.569231 L456.553846,797.169231 Z M450.8,794.076923 C450.224615,794.076923 449.753846,794.547692 449.753846,795.123077 C449.753846,795.698462 450.224615,796.169231 450.8,796.169231 C451.375385,796.169231 451.846154,795.698462 451.846154,795.123077 C451.846154,794.521538 451.375385,794.076923 450.8,794.076923 Z M451.730769,784.569231 L449.730769,784.569231 C449.455769,784.569231 449.230769,784.804615 449.230769,785.092308 C449.230769,785.38 449.455769,785.615385 449.730769,785.615385 L451.730769,785.615385 C452.005769,785.615385 452.230769,785.38 452.230769,785.092308 C452.230769,784.778462 452.005769,784.569231 451.730769,784.569231 Z" id="E-Book_Icon"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
11
src/assets/images/Headphone_Icon_grey.svg
Normal file
11
src/assets/images/Headphone_Icon_grey.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Headphone_Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="UC1_08_01_Hugendubel_Instoreapp_Kunden_Artikeldetailseite" transform="translate(-268.000000, -781.000000)" fill="#5A728A" fill-rule="nonzero" stroke="#5A728A" stroke-width="0.7">
|
||||
<path d="M283.164811,790.377728 L283.040089,790.377728 L283.040089,788.093541 C283.040089,784.733185 280.338976,782 277.017817,782 C273.696659,782 270.995546,784.733185 270.995546,788.093541 L270.995546,790.377728 L270.870824,790.377728 C269.848107,790.377728 269,791.200891 269,792.230735 L269,795.035189 C269,796.065033 269.848107,796.898886 270.870824,796.898886 L272.763029,796.898886 C273.058797,796.898886 273.311804,796.663697 273.311804,796.367929 L273.311804,790.897996 C273.311804,790.602227 273.058797,790.377728 272.763029,790.377728 L272.064588,790.377728 L272.064588,788.093541 C272.064588,785.321158 274.284633,783.069042 277.017817,783.069042 C279.751002,783.069042 281.971047,785.324722 281.971047,788.093541 L281.971047,790.377728 L281.272606,790.377728 C280.976837,790.377728 280.723831,790.602227 280.723831,790.897996 L280.723831,796.367929 C280.723831,796.663697 280.976837,796.898886 281.272606,796.898886 L283.164811,796.898886 C284.187528,796.898886 285,796.065033 285,795.035189 L285,792.230735 C285,791.200891 284.187528,790.377728 283.164811,790.377728 Z M272.242762,795.829844 L270.870824,795.829844 C270.439644,795.829844 270.069042,795.47706 270.069042,795.035189 L270.069042,792.230735 C270.069042,791.788864 270.439644,791.446771 270.870824,791.446771 L272.242762,791.446771 L272.242762,795.829844 Z M283.930958,795.035189 C283.930958,795.47706 283.595991,795.829844 283.164811,795.829844 L281.792873,795.829844 L281.792873,791.446771 L283.164811,791.446771 C283.595991,791.446771 283.930958,791.792428 283.930958,792.230735 L283.930958,795.035189 Z" id="Headphone_Icon"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
Reference in New Issue
Block a user