fix: improve responsive layout in list view (#210)

onecx · Aug 8, 2024 · 730011f · 730011f
1 parent cbcabdf
commit 730011f
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 89 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 echo "[Husky] Running lint check:"
 npm run lint
 echo "[Husky] Running prettier check:"
-npx prettier -c .
+npx prettier --cache -c .
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,7 @@
   },
   "scripts": {
     "build": "ng build",
-    "clean": "npm cache clean --force && npm run clean-angular && ng cache clean && rm .eslintcache",
-    "clean-angular": "ng cache clean",
+    "clean": "npm cache clean --force && ng cache clean && rm -f .eslintcache && rm -f ./node_modules/.cache/prettier/.prettier-cache",
     "start": "ng serve --configuration=development --proxy-config=proxy.conf.js",
     "prepare": "husky",
     "lint": "ng lint --cache=true",
@@ -53,17 +52,17 @@
     "@ngrx/router-store": "^18.0.1",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "@onecx/accelerator": "^5.3.0",
-    "@onecx/angular-accelerator": "^5.3.0",
-    "@onecx/angular-auth": "^5.3.0",
-    "@onecx/angular-integration-interface": "^5.3.0",
-    "@onecx/angular-remote-components": "^5.3.0",
-    "@onecx/angular-webcomponents": "^5.3.0",
-    "@onecx/angular-testing": "^5.3.0",
-    "@onecx/integration-interface": "^5.3.0",
-    "@onecx/keycloak-auth": "^5.3.0",
-    "@onecx/portal-integration-angular": "^5.3.0",
-    "@onecx/portal-layout-styles": "^5.3.0",
+    "@onecx/accelerator": "^5.3.1",
+    "@onecx/angular-accelerator": "^5.3.1",
+    "@onecx/angular-auth": "^5.3.1",
+    "@onecx/angular-integration-interface": "^5.3.1",
+    "@onecx/angular-remote-components": "^5.3.1",
+    "@onecx/angular-webcomponents": "^5.3.1",
+    "@onecx/angular-testing": "^5.3.1",
+    "@onecx/integration-interface": "^5.3.1",
+    "@onecx/keycloak-auth": "^5.3.1",
+    "@onecx/portal-integration-angular": "^5.3.1",
+    "@onecx/portal-layout-styles": "^5.3.1",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "file-saver": "^2.0.5",
     "i18n-iso-countries": "^7.11.3",
@@ -109,7 +108,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-prettier": "^5.2.1",
-    "husky": "^9.1.2",
+    "husky": "^9.1.4",
     "jasmine-core": "~5.2.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.4",

diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -101,7 +101,7 @@
 
 @mixin dataview-list-zebra-rows {
   :host ::ng-deep {
-    .p-dataview-list .p-dataview-content .p-grid > div {
+    .p-dataview-list .p-dataview-content > div {
       &:nth-child(odd) {
         background-color: #f8f9fa;
       }

diff --git a/src/app/shared/theme-color-box/theme-color-box.component.html b/src/app/shared/theme-color-box/theme-color-box.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="properties" [class]="'p-inputtext theme-color-box flex p-0 w-14rem ' + styleClass">
+<div *ngIf="properties" [class]="'p-inputtext theme-color-box flex p-0 ' + styleClass">
   <div
     *ngIf="properties.general && properties.topbar"
     class="theme-color"

diff --git a/src/app/shared/theme-color-box/theme-color-box.component.ts b/src/app/shared/theme-color-box/theme-color-box.component.ts
@@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core'
   templateUrl: './theme-color-box.component.html'
 })
 export class ThemeColorBoxComponent {
-  @Input() public styleClass = 'h-1rem'
+  @Input() public styleClass = 'h-1rem w-14rem '
   @Input() public properties = {
     general: {
       'primary-color': 'lightgray',

diff --git a/src/app/theme/theme-search/theme-search.component.html b/src/app/theme/theme-search/theme-search.component.html
@@ -43,32 +43,49 @@
         ></ng-template>
 
         <!-- LIST -->
-        <ng-template let-themes pTemplate="listItem">
-          <div class="p-grid p-nogutter grid grid-nogutter">
-            <div
-              *ngFor="let theme of themes"
-              class="col-12 grid grid-nogutter align-items-center row-gap-1 listview-row p-1 hover:bg-gray-200 cursor-pointer"
-              [routerLink]="['./', theme.name]"
-            >
-              <div class="col-12 md:col-2 lg:col-2 xl:col-2 text-center">
-                <div class="flex flex-column justify-content-center align-items-center gap-1 md:gap-2 h-full">
-                  <app-image-container
-                    id="theme_search_logo"
-                    [imageUrl]="getLogoUrl(theme)"
-                    [small]="true"
-                  ></app-image-container>
+        <ng-template let-themes let-row="rowIndex" pTemplate="listItem">
+          <div
+            *ngFor="let theme of themes"
+            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"
+            [routerLink]="['./', theme.name]"
+          >
+            <div class="p-0 col-3 sm:col-3 md:col-2 flex justify-content-around align-items-center">
+              <app-image-container
+                [id]="'theme_search_data_row_' + row + '_logo'"
+                [small]="true"
+                styleClass="h-2rem sm:h-3rem md:h-4rem max-h-2rem sm:max-h-3rem md:max-h-4rem max-w-4rem sm:max-w-8rem"
+                [imageUrl]="getLogoUrl(theme)"
+              ></app-image-container>
+            </div>
+            <div class="p-0 col-5 sm:col-6 xl:col-6">
+              <div class="flex flex-column row-gap-1 justify-content-center">
+                <div
+                  class="sm:font-bold word-break-all"
+                  [id]="'theme_search_data_row_' + row + '_display_name'"
+                  [pTooltip]="theme.displayName.length < 40 ? '' : theme.displayName"
+                  tooltipPosition="top"
+                  tooltipEvent="hover"
+                >
+                  {{ limitText(theme.displayName, 40) }}
                 </div>
-              </div>
-              <div class="col-12 md:col-5 lg:col-5 xl:col-6">
-                <div class="flex flex-column justify-content-center gap-1 text-center md:text-left">
-                  <div class="font-bold">{{ theme.displayName }}</div>
-                  <div>{{ limitText(theme.description, 75) }}</div>
+                <div
+                  class="hidden md:block"
+                  [id]="'theme_search_data_row_' + row + '_description'"
+                  [pTooltip]="theme.description.length < 75 ? '' : theme.description"
+                  tooltipPosition="top"
+                  tooltipEvent="hover"
+                >
+                  {{ limitText(theme.description, 75) }}
                 </div>
               </div>
-              <div class="col-12 md:col-5 lg:col-5 xl:col-4 text-center">
-                <div class="flex flex-column justify-content-center align-items-center h-full">
-                  <app-theme-color-box [properties]="theme.properties" styleClass="h-1rem md:h-2rem" />
-                </div>
+            </div>
+            <div class="p-0 sm:col-3 md:col-4 lg:col-4 xl:col-4">
+              <div class="flex flex-column justify-content-center align-items-center h-full">
+                <app-theme-color-box
+                  [id]="'theme_search_data_row_' + row + '_properties'"
+                  [properties]="theme.properties"
+                  styleClass="h-1rem md:h-1rem w-6rem sm:w-10rem md:w-14rem"
+                />
               </div>
             </div>
           </div>

diff --git a/src/app/theme/theme-search/theme-search.component.scss b/src/app/theme/theme-search/theme-search.component.scss
@@ -9,4 +9,7 @@
   .h-05rem {
     height: 0.5rem;
   }
+  .word-break-all {
+    word-break: break-all;
+  }
 }