fix: improve product tile actions visibility + improve compare icon (#…

…1082) * add layer for button row of product tile * change icon for compare
intershop · Mar 24, 2022 · dc36f5c · dc36f5c
1 parent fe9b875
commit dc36f5c
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 12 deletions.
diff --git a/src/app/core/icon.module.ts b/src/app/core/icon.module.ts
@@ -8,13 +8,13 @@ import {
   faAngleUp,
   faArrowAltCircleRight,
   faArrowsAlt,
+  faBalanceScale,
   faBan,
   faBars,
   faCheck,
   faCheckCircle,
   faCog,
   faCogs,
-  faColumns,
   faEnvelope,
   faFastForward,
   faFax,
@@ -62,13 +62,13 @@ export class IconModule {
       faAngleUp,
       faArrowsAlt,
       faArrowAltCircleRight,
+      faBalanceScale,
       faBan,
       faBars,
       faCheck,
       faCheckCircle,
       faCog,
       faCogs,
-      faColumns,
       faGlobeAmericas,
       faHome,
       faInbox,

diff --git a/src/app/pages/product/product-detail-actions/product-detail-actions.component.html b/src/app/pages/product/product-detail-actions/product-detail-actions.component.html
@@ -13,7 +13,7 @@
       <ng-container *ishFeature="'compare'">
         <li *ngIf="configuration$('addToCompare') | async" [attr.data-testing-id]="'compare-' + product.sku">
           <a routerLink="/compare" (click)="addToCompare()" rel="nofollow">
-            <fa-icon [icon]="['fas', 'columns']"></fa-icon>
+            <fa-icon [icon]="['fas', 'balance-scale']"></fa-icon>
             <span class="share-label">{{ 'product.compare.link' | translate }}</span>
           </a>
         </li>

diff --git a/src/app/pages/product/product-detail-actions/product-detail-actions.component.spec.ts b/src/app/pages/product/product-detail-actions/product-detail-actions.component.spec.ts
@@ -69,9 +69,9 @@ describe('Product Detail Actions Component', () => {
     it(`should show "compare" link when product information is available`, () => {
       translate.set('product.compare.link', 'Compare');
       fixture.detectChanges();
-      expect(element.querySelector('fa-icon[ng-reflect-icon="fas,columns"]').nextElementSibling.textContent).toContain(
-        'Compare'
-      );
+      expect(
+        element.querySelector('fa-icon[ng-reflect-icon="fas,balance-scale"]').nextElementSibling.textContent
+      ).toContain('Compare');
     });
 
     it('should not show "compare" link when product information is available and productMaster = true', () => {

diff --git a/...pp/shared/components/product/product-add-to-compare/product-add-to-compare.component.html b/...pp/shared/components/product/product-add-to-compare/product-add-to-compare.component.html
@@ -7,7 +7,7 @@
   (click)="toggleCompare()"
 >
   <ng-container *ngIf="displayType === 'icon'; else defaultButton">
-    <fa-icon [icon]="['fas', 'columns']"></fa-icon>
+    <fa-icon [icon]="['fas', 'balance-scale']"></fa-icon>
   </ng-container>
 
   <ng-template #defaultButton> {{ 'product.compare.link' | translate }} </ng-template>

diff --git a/src/app/shell/header/product-compare-status/product-compare-status.component.html b/src/app/shell/header/product-compare-status/product-compare-status.component.html
@@ -1,5 +1,5 @@
 <a class="compare-status item-count-container" routerLink="/compare" rel="nofollow">
-  <fa-icon class="header-icon" [icon]="['fas', 'columns']"></fa-icon>
+  <fa-icon class="header-icon" [icon]="['fas', 'balance-scale']"></fa-icon>
   <span class="badge badge-pill" data-testing-id="product-compare-count">{{ productCompareCount$ | async }}</span>
   <span [ngClass]="{ 'd-none': view === 'auto' || view === 'small', 'd-md-inline': view === 'auto' }">{{
     'product.compare.link' | translate

diff --git a/src/app/shell/header/product-compare-status/product-compare-status.component.spec.ts b/src/app/shell/header/product-compare-status/product-compare-status.component.spec.ts
@@ -60,7 +60,7 @@ describe('Product Compare Status Component', () => {
         class="compare-status item-count-container"
         ng-reflect-router-link="/compare"
         href="/compare"
-        ><fa-icon class="header-icon" ng-reflect-icon="fas,columns"></fa-icon
+        ><fa-icon class="header-icon" ng-reflect-icon="fas,balance-scale"></fa-icon
         ><span data-testing-id="product-compare-count" class="badge badge-pill">123456789</span
         ><span class="d-none d-md-inline">product.compare.link</span></a
       >

diff --git a/src/styles/pages/category/product-list.scss b/src/styles/pages/category/product-list.scss
@@ -128,11 +128,20 @@
     position: absolute;
     top: 0;
     right: 0;
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    background-color: $white;
 
     .btn,
     a {
       padding: 3px 6px;
       font-size: $font-size-lg;
+
+      @media (hover: none) {
+        padding-bottom: 0;
+        margin-bottom: 0;
+      }
     }
 
     .add-to-cart,
@@ -318,17 +327,17 @@
     transition: opacity 0.5s ease-in-out;
 
     @media (hover: none) {
-      opacity: 1;
+      opacity: 0.85;
     }
 
     @media (-moz-touch-enabled) {
-      opacity: 1;
+      opacity: 0.85;
     }
   }
 
   &:hover {
     .product-tile-actions {
-      opacity: 1;
+      opacity: 0.85;
     }
 
     .product-image {