Zebra look on list view and moving _mixins to src/app (#243)

* fix: move _mixins to src/app

* fix: update dependencies

* fix: tuning list view layout

package.json

@@ -69,8 +69,7 @@
     "primeicons": "^7.0.0",
     "primeng": "^17.18.9",
     "rxjs": "7.8.1",
-    "tslib": "^2.7.0",
-    "zone.js": "~0.14.10"
+    "tslib": "^2.7.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.1.2",
@@ -89,16 +88,16 @@
     "@openapitools/openapi-generator-cli": "^2.13.9",
     "@schematics/angular": "18.2.1",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "~22.6.1",
+    "@types/node": "~22.7.2",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "husky": "^9.1.5",
-    "jasmine-core": "~5.2.0",
+    "husky": "^9.1.6",
+    "jasmine-core": "~5.3.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
@@ -115,8 +114,7 @@
     "postcss-url": "~10.1.3",
     "prettier": "^3.3.3",
     "sonar-scanner": "^3.1.0",
-    "sonarqube-scanner": "^4.0.1",
-    "style-loader": "^4.0.0",
+    "sonarqube-scanner": "^4.2.3",
     "ts-node": "10.9.2",
     "typescript": "5.5",
     "url-loader": "^4.1.1",

src/_ps_mixins.scss → src/app/_ps-mixins.scss

@@ -383,6 +383,25 @@
     }
   }
 }
+@mixin dataview-list-zebra-rows-4 {
+  :host ::ng-deep {
+    .p-dataview-list .p-dataview-content .p-grid > div {
+      &:nth-child(4n + 1),
+      &:nth-child(4n + 2) {
+        background-color: #f8f9fa;
+      }
+    }
+  }
+}
+@mixin dataview-list-flex-zebra-rows {
+  :host ::ng-deep {
+    .p-dataview-list .p-dataview-content > div {
+      &:nth-child(odd) {
+        background-color: #f8f9fa;
+      }
+    }
+  }
+}
 @mixin dropdown-zebra-rows {
   :host ::ng-deep {
     .p-dropdown-panel .p-dropdown-items *:nth-child(odd) .p-dropdown-item {

src/app/product-store/app-detail/app-detail.component.scss

@@ -1,4 +1,4 @@
-@import '/src/_ps_mixins.scss';
+@import '/src/app/_ps-mixins.scss';
 
 @include tabview-reduce-padding;
 @include table-zebra-rows;

src/app/product-store/app-search/app-search.component.scss

@@ -1,4 +1,4 @@
-@import '/src/_ps_mixins.scss';
+@import '/src/app/_ps-mixins.scss';
 
 @include displaying-text-responsive;
 @include correct-data-view-control;

src/app/product-store/product-detail/product-apps/product-apps.component.scss

@@ -1,4 +1,4 @@
-@import '/src/_ps_mixins.scss';
+@import '/src/app/_ps-mixins.scss';
 
 @include card-badges;
 @include danger-action;

src/app/product-store/product-detail/product-detail.component.scss

@@ -1,4 +1,4 @@
-@import '/src/_ps_mixins.scss';
+@import '/src/app/_ps-mixins.scss';
 
 @include danger-action;
 @include dropdown-zebra-rows;

src/app/product-store/product-detail/product-props/product-props.component.scss

@@ -1,4 +1,4 @@
-@import '/src/_ps_mixins.scss';
+@import '/src/app/_ps-mixins.scss';
 
 @include readable-disabled-form-controls;
 @include prepare-inputgroup;

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'"

src/app/product-store/product-search/product-search.component.scss

@@ -1,8 +1,32 @@
-@import '/src/_ps_mixins.scss';
+@import '/src/app/_ps-mixins.scss';
 
 @include correct-data-view-control;
 @include correct-search-criteria;
 @include correct-select-button;
 @include displaying-text-responsive;
 @include card-badges;
 @include danger-action;
+
+@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;
+      }
+    }
+  }
+}

src/app/product-store/slot-delete/slot-delete.component.scss

@@ -1,3 +1,3 @@
-@import '/src/_ps_mixins.scss';
+@import '/src/app/_ps-mixins.scss';
 
 @include dialog-footer-buttons;

src/app/product-store/slot-search/slot-search.component.scss

@@ -1,4 +1,4 @@
-@import '/src/_ps_mixins.scss';
+@import '/src/app/_ps-mixins.scss';
 
 @include displaying-text-responsive;
 @include correct-data-view-control;