fix: tuning list view layout

onecx · Sep 26, 2024 · 44813bf · 44813bf
1 parent 1d60b99
commit 44813bf
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/src/app/product-store/product-search/product-search.component.html b/src/app/product-store/product-search/product-search.component.html
@@ -100,19 +100,18 @@
           <div *ngFor="let product of products; index as i" class="col-12 md:col-6">
             <div
               [id]="'product_search_data_list_row_' + i"
-              class="flex flex-row flex-nowrap justify-content-start align-items-center column-gap-3 py-1 px-3 hover:bg-gray-200 cursor-pointer"
+              class="flex flex-row flex-nowrap justify-content-start align-items-center column-gap-3 py-1 sm:px-3 hover:bg-gray-200 cursor-pointer"
               [routerLink]="['./' + product.name]"
             >
-              <div class="p-0 col-4 sm:col-2 text-center">
+              <div class="p-0 col-3 text-center">
                 <app-image-container
                   [id]="'product_search_data_list_row_' + i + '_image'"
                   [small]="true"
                   styleClass="h-2rem sm:h-3rem max-h-2rem sm:max-h-3rem max-w-5rem"
                   [imageUrl]="getLogoUrl(product)"
                 ></app-image-container>
               </div>
-              <div class="p-0 hidden sm:block col-1"></div>
-              <div class="p-0 col-8 sm:col-9">
+              <div class="p-0 col-9">
                 <div class="flex flex-column justify-content-center gap-1">
                   <div
                     [id]="'product_search_data_list_row_' + i + '_product_display_name'"

diff --git a/src/app/product-store/product-search/product-search.component.scss b/src/app/product-store/product-search/product-search.component.scss
@@ -6,4 +6,27 @@
 @include displaying-text-responsive;
 @include card-badges;
 @include danger-action;
-@include dataview-list-zebra-rows-4;
+
+@media screen and (min-width: 768px) {
+  :host ::ng-deep {
+    .p-dataview-list .p-dataview-content .p-grid > div {
+      &:nth-child(4n + 1),
+      &:nth-child(4n + 2) {
+        background-color: #f8f9fa;
+      }
+      &:nth-child(4n + 1),
+      &:nth-child(4n + 3) {
+        border-right: var(--data-view-list-item-border);
+      }
+    }
+  }
+}
+@media screen and (max-width: 768px) {
+  :host ::ng-deep {
+    .p-dataview-list .p-dataview-content .p-grid > div {
+      &:nth-child(odd) {
+        background-color: #f8f9fa;
+      }
+    }
+  }
+}