[HIMA-33] Product details page update

Implemented latest QA feedback and comments.

src/app/components/product-details/product-details.component.html

@@ -1,7 +1,7 @@
 <div class="product-detail-container" *ngIf="product">
   <div class="general-details">
-    <div class="product-image">
-      <img [src]="product.productIcon$ | async">
+    <div class="product-image" [ngStyle]="{'background-image':'url(' + (product.productIcon$ | async)  + ')'}">
+      <!-- <img [src]="product.productIcon$ | async"> -->
     </div>
     <div class="product-info-container">
       <div class="product-info">
@@ -43,8 +43,8 @@
             </div>
           </div>
         </div>
-        <div class="category align-right" *ngIf="product.quantity > 0">
-          <span>{{product.category}}</span>
+        <div class="category align-right" *ngIf="product.assortment">
+          <span>{{product.assortment}}</span>
         </div>
         <div class="languages standart-text">
           <span>{{product.locale}}</span>
@@ -112,7 +112,9 @@
       <div>E-Book 13,95€</div>
     </div>
   </div>
-  <div class="recommandations"></div>
+  <div class="recommandations">
+    <app-recommendations></app-recommendations>
+  </div>
 </div>
 
 

src/app/components/product-details/product-details.component.scss

@@ -4,13 +4,16 @@
     display: grid;
     grid-template-columns: auto;
     background-color: white;
-    padding: 20px;
-    margin-top: 10px;
+    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;
+    }
 }
 
 .general-details {
@@ -22,6 +25,7 @@
 .product-details {
     display: grid;
     grid-template-columns: auto;
+    margin-top: 20px;
 }
 
 .recommandations {
@@ -31,14 +35,10 @@
 
 .details {
     height: 68px;
-    -webkit-transition: all .3s ease-out;
-    transition: all .3s ease-out;
 }
 
 .details-full {
-    padding-top: 10px;
-    -webkit-transition: all .3s ease-out;
-    transition: all .3s ease-out;
+    height: auto;
 }
 
 .details span {
@@ -46,8 +46,10 @@
     line-height: 21px;
 }
 
-.product-image img {
-    width: 187px;
+.product-image {
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
 }
 
 .product-info {
@@ -55,8 +57,6 @@
     grid-template-columns: auto;
 }
 
-
-
 .title {
     width: 90%;
     display: flex;
@@ -86,7 +86,7 @@
     }
 
     .divider {
-        padding: 0 15px;
+        padding: 0 8px;
     }
 }
 
@@ -177,12 +177,6 @@
     height: 3px;
 }
 
-.product-details {
-    display: grid;
-    grid-template-columns: auto;
-    margin-top: 10px;
-}
-
 .actions {
     display: inline;
     padding-top: 20px;
@@ -220,6 +214,7 @@
     grid-template-columns: max-content max-content auto;
     grid-gap: 20px;
     padding-top: 35px;
+    margin: 30px 0;
 }
 
 .other-format-label {
@@ -259,12 +254,15 @@
     margin-bottom: 10px;
 }
 
-.visible {
-    display: inline-block;
+.recommandations {
+    background-color: #ffffff;
+    border-radius: 5px;
+    box-shadow: 0px -2px 18px 0px #dce2e9;
+    padding: 25px 15px !important;
 }
 
-.hidden {
-    display: none;
+app-recommendations{
+    padding: 0;
 }
 
 /* Portrait */
@@ -273,8 +271,8 @@
   and (max-device-width: 1024px) 
   and (orientation: portrait) 
   and (-webkit-min-device-pixel-ratio: 2) {
-    .product-image img {
-        width: 190px;
+    .product-image {
+        width: 200px;
     }
 
     .price {
@@ -292,8 +290,8 @@
   and (max-device-width: 1024px) 
   and (orientation: landscape) 
   and (-webkit-min-device-pixel-ratio: 2) {
-    .product-image img {
-        width: 190px;
+    .product-image {
+        width: 200px;
     }
 
     .price {
@@ -313,8 +311,8 @@
   and (max-device-width: 1024px) 
   and (orientation: portrait) 
   and (-webkit-min-device-pixel-ratio: 2) {
-    .product-image img {
-        width: 188px;
+    .product-image {
+        width: 205px;
     }
 
     .price {
@@ -325,6 +323,10 @@
         bottom: 21px;
     }
 
+    .opened {
+        bottom: 5px;
+    }
+
     .details {
         min-height: 68px;
     }
@@ -338,8 +340,8 @@
   and (max-device-width: 1366px) 
   and (orientation: landscape) 
   and (-webkit-min-device-pixel-ratio: 2) {
-    .product-image img {
-        width: 166px;
+    .product-image {
+        width: 205px;
     }
 
     .price {
@@ -350,6 +352,10 @@
         bottom: 21px;
     }
 
+    .opened {
+        bottom: 5px;
+    }
+
     .details {
         min-height: 68px;
     }

src/app/components/product-details/product-details.component.ts

@@ -86,6 +86,7 @@ export class ProductDetailsComponent implements OnInit {
     let category: string;
     let price: string;
     let publisher: string;
+    let assortment: string;
 
     // product object mapping
     if (item.pr) {
@@ -122,6 +123,10 @@ export class ProductDetailsComponent implements OnInit {
       }
     }
 
+    if (item.sh) {
+      assortment = item.sh[0].assortment;
+    }
+
     return {
       author: author,
       title: title,
@@ -136,7 +141,8 @@ export class ProductDetailsComponent implements OnInit {
       price: price,
       publisher: publisher,
       productIcon$: productIcon$,
-      fullDescription: fullDescription
+      fullDescription: fullDescription,
+      assortment: assortment
     };
   }
 

src/app/modules/components.module.ts

@@ -26,6 +26,7 @@ import { SharedModule } from '../shared/shared.module';
 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';
 
 @NgModule({
   declarations: [
@@ -54,7 +55,8 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
     DashboardModule,
     CustomerSearchModule,
     CartModule,
-    ProcessModule
+    ProcessModule,
+    RecommendationsdModule
   ],
   exports: [
     HeaderComponent,