fix: (CXSPA-9382) improve phone layout

The list item layout was bad. The search icon was mispositioned. The spare parts tab layout also needed some tweaks. JIRA: https://jira.tools.sap/browse/CXSPA-9382, https://jira.tools.sap/browse/CXSPA-9265
SAP · Feb 7, 2025 · f7fec15 · f7fec15
1 parent b0d19eb
commit f7fec15
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 10 deletions.
diff --git a/...visual-picking/visual-picking-tab/product-list/visual-picking-product-list.component.html b/...visual-picking/visual-picking-tab/product-list/visual-picking-product-list.component.html
@@ -38,7 +38,7 @@
     [class.selected]="item.selected"
   >
     <!-- Item Description -->
-    <div class="col-6 flex-row">
+    <div class="col-6 flex-row thumbnail-and-product-info">
       <!-- Thumbnail -->
       <div class="thumbnail-container">
         <div class="thumbnail" [class.selected]="item.selected">
@@ -50,7 +50,7 @@
       </div>
 
       <!-- Name -->
-      <div class="flex-column">
+      <div class="flex-column product-info">
         <div *ngIf="item.product.name" class="cx-name">
           <a
             class="cx-link"
@@ -72,7 +72,7 @@
     </div>
 
     <!-- Item Price -->
-    <div class="col-4 flex-column">
+    <div class="col-4 flex-column price">
       <div *ngIf="item.product.price" class="cx-price">
         {{ item.product.price?.formattedValue }}
       </div>
@@ -87,6 +87,7 @@
         "
       >
         <div
+          class="add-to-cart"
           (click)="addToCartComponent.addToCart(); $event.preventDefault()"
           (keydown.enter)="
             addToCartComponent.addToCart(); $event.preventDefault()

diff --git a/...sualization/styles/components/visual-picking/visual-picking-product-filter.component.scss b/...sualization/styles/components/visual-picking/visual-picking-product-filter.component.scss
@@ -35,6 +35,10 @@
       @include media-breakpoint-down(lg) {
         top: 10px;
       }
+
+      @include media-breakpoint-down(sm) {
+        top: 26px;
+      }
     }
 
     .disabled-action {

diff --git a/...visualization/styles/components/visual-picking/visual-picking-product-list.component.scss b/...visualization/styles/components/visual-picking/visual-picking-product-list.component.scss
@@ -29,6 +29,25 @@
     height: 48px;
   }
 
+  .list-panel,
+  .slides,
+  .slide,
+  .item,
+  .thumbnail-and-product-info,
+  .cx-code,
+  .price,
+  .add-to-cart {
+    @include media-breakpoint-down(sm) {
+      padding: 0 !important;
+    }
+  }
+
+  .product-info {
+    @include media-breakpoint-down(sm) {
+      padding: 3px !important;
+    }
+  }
+
   .list-header {
     @include type('8');
     justify-content: space-between;
@@ -46,6 +65,10 @@
     align-items: center;
 
     padding: 0.5rem;
+    @include media-breakpoint-down(sm) {
+      padding: 0 !important;
+    }
+
     border-width: 1px;
     border-style: solid;
     border-color: transparent transparent var(--cx-color-light) transparent;
@@ -64,6 +87,9 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    @include media-breakpoint-down(sm) {
+      padding: 0 !important;
+    }
   }
 
   .thumbnail {
@@ -102,7 +128,7 @@
     padding: 1.125rem 0;
 
     @include media-breakpoint-down(sm) {
-      padding: 1rem 0;
+      padding: 0 !important;
     }
 
     text-transform: uppercase;
@@ -125,7 +151,7 @@
   .cx-name {
     @include type('5');
     overflow-wrap: break-word;
-    padding: 0;
+    padding: 0 !important;
 
     @include media-breakpoint-down(lg) {
       @include type('7');
@@ -145,15 +171,18 @@
     @include type('7');
     color: var(--cx-color-secondary);
     overflow-wrap: break-word;
-    padding: 0.625rem 0 0 0;
+    padding: 0.625rem 0 0 0 !important;
+    @include media-breakpoint-down(sm) {
+      padding: 0 !important;
+    }
   }
 
   .cx-price {
     display: flex;
     justify-content: flex-end;
     text-align: end;
     overflow-wrap: break-word;
-    padding: 0 1em 0 0; // rtl equivalent in in html[dir='rtl'] section at end
+    padding: 0 1em 0 0 !important; // rtl equivalent in in html[dir='rtl'] section at end
 
     @include type('5', $font-weight-normal);
 
@@ -175,6 +204,9 @@
     flex-direction: column;
     justify-content: center;
     text-align: center;
+    @include media-breakpoint-down(sm) {
+      padding: 0 !important;
+    }
   }
 
   .flex-column {
@@ -197,11 +229,11 @@
 
 html[dir='rtl'] cx-epd-visualization-product-list {
   .cx-item-list-price {
-    padding: 0 0 0 1em;
+    padding: 0 0 0 1em !important;
   }
 
   .cx-price {
-    padding: 0 0 0 1em;
+    padding: 0 0 0 1em !important;
   }
 
   .thumbnail {

diff --git a/...libs/epd-visualization/styles/components/visual-picking/visual-picking-tab.component.scss b/...libs/epd-visualization/styles/components/visual-picking/visual-picking-tab.component.scss
@@ -1,13 +1,17 @@
 %cx-epd-visualization-visual-picking-tab {
   .container-fluid:not(.no-product-references),
   .container:not(.no-product-references) {
-    padding: 1em 0;
+    padding: 0em;
     background-color: $body-bg;
 
     display: flex;
     justify-content: space-between;
     flex-direction: column;
 
+    @include media-breakpoint-up(sm) {
+      padding: 1em;
+    }
+
     @include media-breakpoint-up(md) {
       flex-direction: row;
     }

diff --git a/...ation-libs/epd-visualization/styles/components/visual-viewer/visual-viewer.component.scss b/...ation-libs/epd-visualization/styles/components/visual-viewer/visual-viewer.component.scss
@@ -19,6 +19,13 @@
     border-color: var(--cx-color-secondary);
   }
 
+  .toolbarHBox,
+  .toolbarButtonsHBox {
+    @include media-breakpoint-down(sm) {
+      padding: 0 !important;
+    }
+  }
+
   .sapVizKitViewport {
     grid-row: 1;
     grid-column: 1;