Merged in bugfix/HIMA-33-implement-product-details-feed (pull request #43)

[HIMA-33] QA feedback

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

@@ -25,25 +25,25 @@
               <span>{{product.format}}</span>
             </div>
           </div>
-          <div class="stock-info align-right">
+          <div class="stock-info align-right" *ngIf="product.quantity > 0">
             <div class="ship-icon">
               <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">
             </div>
-            <div class="stock-label">
+            <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">
             </div>
             <div class="stock-quantity" *ngIf="product.quantity > 0">
-              <span>{{product.quantity}}</span>
+              <span>{{product.quantity}}x</span>
             </div>
           </div>
         </div>
-        <div class="category align-right">
+        <div class="category align-right" *ngIf="product.quantity > 0">
           <span>{{product.category}}</span>
         </div>
         <div class="languages standart-text">
@@ -57,10 +57,10 @@
         </div>
         <div class="publication-format-pages standart-text">
           <div class="publication">
-            <span>{{formatDate(product.publicationDate)}}</span>
+            <span>{{product.publicationDate}}</span>
           </div>
           <div>
-            <span>|</span>
+            <span class="divider">I</span>
           </div>
           <div class="format">
             <span>{{product.format}}</span>
@@ -82,8 +82,13 @@
   </div>
   <div class="separator"></div>
   <div class="product-details">
-    <div class="details">
-      <span>{{getShortDescription(product.fullDescription)}}</span>
+    <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>
+    </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>
     </div>
     <div class="actions align-right">
         <button class="btn align-right reserve">Reservieren</button>

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

@@ -29,14 +29,25 @@
     grid-template-columns: auto;
 }
 
+.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;
+}
+
 .details span {
     font-size: 16px;
     line-height: 21px;
 }
 
 .product-image img {
-    width: 169px;
-    height: 275px;
+    width: 187px;
 }
 
 .product-info {
@@ -44,9 +55,18 @@
     grid-template-columns: auto;
 }
 
-.title span {
-    font-size: 26px;
-    font-weight: bold;
+
+
+.title {
+    width: 90%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    span {
+        font-size: 26px;
+        font-weight: bold;
+    }
+    
 }
 
 .standart-text {
@@ -54,10 +74,20 @@
 }
 
 .publication-format-pages {
-    display: grid;
-    grid-template-columns: auto auto auto auto auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
     margin-top: 20px;
-    width: 70%;
+
+    .publication {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .divider {
+        padding: 0 15px;
+    }
 }
 
 .type-stock-info {
@@ -67,9 +97,13 @@
 }
 
 .stock-info {
-    display: grid;
-    grid-template-columns: auto auto auto auto auto;
-    grid-gap: 2px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    img {
+        padding-right: 8px;
+    }
 }
 
 .title-price {
@@ -94,9 +128,16 @@
     margin-top: 4px;
 }
 
+.home-icon {
+    padding-left: 15px;
+}
+
 .stock-label span {
     font-size: 18px;
     font-weight: bold;
+    padding-left: 8px;
+    position: relative;
+    bottom: 1px;
 }
 
 .stock-quantity span {
@@ -105,7 +146,7 @@
 }
 
 .category {
-    margin-top: 15px;
+    margin-top: 10px;
     font-size: 16px;
     color: #a7b9cb;
 }
@@ -114,13 +155,21 @@
     margin-top: 17px;
 }
 
-.price span{
-    font-size: 20px;
-    font-weight: bold;
+.price {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    padding-top: 7px;
+
+    span {
+        font-size: 20px;
+        font-weight: bold;
+    }
+    
 }
 
 .publisher {
-    margin-top: 20px;
+    margin-top: 15px;
 }
 
 .separator {
@@ -136,7 +185,7 @@
 
 .actions {
     display: inline;
-    padding-top: 25px;
+    padding-top: 20px;
 }
 
 .btn {
@@ -154,6 +203,8 @@
       border: none;
       border-radius: 25px;
       color: #ffffff;
+      width: 174px;
+      text-align: center;
     }
 }
 
@@ -168,7 +219,7 @@
     display: grid;
     grid-template-columns: max-content max-content auto;
     grid-gap: 20px;
-    padding-top: 25px;
+    padding-top: 35px;
 }
 
 .other-format-label {
@@ -185,4 +236,121 @@
     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;
+
+    img {
+        padding-left: 8px;
+    }
+}
+
+.opened {
+    bottom: 0px;
+    margin-bottom: 10px;
+}
+
+.visible {
+    display: inline-block;
+}
+
+.hidden {
+    display: none;
+}
+
+/* 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 img {
+        width: 190px;
+    }
+
+    .price {
+        padding-top: 5px;
+    }
+
+    .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 img {
+        width: 190px;
+    }
+
+    .price {
+        padding-top: 5px;
+    }
+
+    .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 img {
+        width: 188px;
+    }
+
+    .price {
+        padding-top: 6px;
+    }
+
+    .more-btn {
+        bottom: 21px;
+    }
+
+    .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 img {
+        width: 166px;
+    }
+
+    .price {
+        padding-top: 8px;
+    }
+
+    .more-btn {
+        bottom: 21px;
+    }
+
+    .details {
+        min-height: 68px;
+    }
+}

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

@@ -4,12 +4,8 @@ import { CheckoutComponent } from '../checkout/checkout.component';
 import { ProductService } from 'src/app/core/services/product.service';
 import { ItemDTO, CatImageService } from 'cat-service';
 import { Observable } from 'rxjs';
-import { getFormatedPublicationDate } from 'src/app/core/utils/product.util';
-import { ProcessState, ProcessStateModel } from 'src/app/core/store/state/process.state';
+import { ProcessState } from 'src/app/core/store/state/process.state';
 import { Select, Store } from '@ngxs/store';
-import { stateNameErrorMessage } from '@ngxs/store/src/decorators/state';
-import { Process } from 'src/app/core/models/process.model';
-import { formatDate } from '@angular/common';
 import { UpdateBreadcrump } from 'src/app/core/store/actions/process.actions';
 
 @Component({
@@ -24,6 +20,8 @@ export class ProductDetailsComponent implements OnInit {
   item: ItemDTO;
   selectedItem: ItemDTO;
   @Select(ProcessState.getSelectedProduct) selectedItem$: Observable<ItemDTO>;
+  moreBtn = false;
+  shortenText = null;
 
   readonly FULL_DESCRIPTION_LABEL = 'Klappentext';
   readonly AUTOR = 'Autor';
@@ -69,7 +67,7 @@ export class ProductDetailsComponent implements OnInit {
       }
     );
     this.selectedItem$.subscribe(
-      (data: ItemDTO) => this.selectedItem = data
+      (data: ItemDTO) =>  this.selectedItem = data
     );
   }
 
@@ -96,7 +94,8 @@ export class ProductDetailsComponent implements OnInit {
       eanTag = ean;
       productIcon$ = this.catImageService.getImageUrl(ean, { width: 469, height: 575 });
       locale = item.pr.locale;
-      publicationDate = getFormatedPublicationDate(item.pr.publicationDate);
+      // publicationDate = getFormatedPublicationDate(item.pr.publicationDate);
+      publicationDate = this.formatDate(item.pr.publicationDate);
       format = this.selectedItem ? this.selectedItem.pr.formatDetail : null;
       formatIcon = this.selectedItem ? this.selectedItem.pr.format : null;
       category = item.pr.productGroup;
@@ -154,8 +153,36 @@ export class ProductDetailsComponent implements OnInit {
     // Logic if needed
   }
 
-  formatDate(date: string): string {
+  formatDate(date: Date): string {
     const dateToFormat = new Date(date);
     return `${dateToFormat.getMonth()}/${dateToFormat.getFullYear()}`;
   }
+
+  descriptionText(text: string) {
+    const container = document.getElementById('details-container');
+    let el = document.getElementById('details-text');
+    el.innerHTML = text;
+    let wordArray = el.innerHTML.split(' ');
+   
+
+    if (el.offsetHeight > container.offsetHeight && !this.shortenText) {
+      while(el.offsetHeight > container.offsetHeight) {
+          wordArray.pop();
+          el.innerHTML = wordArray.join(' ') + '...';
+      }
+
+      // Make room for the more button
+      wordArray.pop();
+      wordArray.pop();
+      this.shortenText = wordArray.join(' ') + '...';
+      el.innerHTML = wordArray.join(' ') + '...';
+
+    } else {
+      el.innerHTML = this.shortenText;
+    }
+  } 
+
+  toggleMore() {
+    this.moreBtn = !this.moreBtn;
+  }
 }