fix: tuning overview layout (#197)

* fix: tuning overview layout * fix: update dependencies
onecx · Jan 14, 2025 · dd1c81a · dd1c81a
1 parent 47f62c1
commit dd1c81a
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "scripts": {
     "build": "ng build",
     "check": "ng lint --cache=true && npx prettier -c --cache .",
-    "clean": "npm cache clean --force && ng cache clean && rm -f .eslintcache && rm -f ./node_modules/.cache/prettier/.prettier-cache",
+    "clean": "npm cache clean --force && ng cache clean && rm -rf *.log dist reports .angular.eslintcache && rm -f ./node_modules/.cache/prettier/.prettier-cache",
     "lint": "ng lint --cache=true",
     "format": "ng lint --fix",
     "eslint": "eslint --quiet --ext .js,.ts src",
@@ -69,7 +69,7 @@
     "primeicons": "^7.0.0",
     "primeng": "^17.18.11",
     "rxjs": "7.8.1",
-    "tslib": "^2.8.0"
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.1.2",
@@ -88,7 +88,7 @@
     "@openapitools/openapi-generator-cli": "^2.15.3",
     "@schematics/angular": "^18.2.10",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "~22.9.0",
+    "@types/node": "~22.10.6",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "css-loader": "^7.1.2",
@@ -98,7 +98,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-deprecation": "^3.0.0",
     "husky": "^9.1.6",
-    "jasmine-core": "~5.4.0",
+    "jasmine-core": "~5.5.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",

diff --git a/src/app/welcome/welcome-overview/welcome-overview.component.html b/src/app/welcome/welcome-overview/welcome-overview.component.html
@@ -1,11 +1,11 @@
 <ocx-portal-page helpArticleId="PAGE_WELCOME_VIEW" permission="IMAGE#VIEW">
   <!-- BACKGROUND (below the content) -->
   <div class="absolute top-0 left-0 w-full h-full">
-    <!-- Bachground Image -->
+    <!-- Background Image -->
     <ng-container *ngFor="let image of imageData$ | async; let i = index">
       <img
         *ngIf="!loading && i === currentSlide"
-        class="w-full h-full"
+        class="w-full h-full wc-background-image"
         @carouselAnimation
         [src]="this.buildImageSrc(image)"
         [alt]="'LANDING.PIC' | translate"
@@ -14,41 +14,36 @@
     </ng-container>
   </div>
   <!-- CONTENT -->
-  <div class="content relative z-1 w-full flex flex-column row-gap-3 sm:px-2">
+  <div class="relative z-1 w-full flex flex-column row-gap-5 sm:px-2">
     <!-- INFO -->
-    <div class="m-0 sm:my-1 md:my-2 lg:my-3 flex flex-row flex-wrap justify-content-between text-white">
-      <div>
-        <div id="wc_overview_info_title" class="mb-1 sm:mb-2 md:mb-4 text-xl sm:text-2xl md:text-4xl">
+    <div class="flex flex-row flex-wrap justify-content-between">
+      <div class="flex flex-column gap-2 sm:gap-3 wc_overview_info text-white">
+        <div id="wc_overview_info_title" class="text-xl sm:text-2xl md:text-4xl">
           {{ 'LANDING.TITLE' | translate }} {{ (user$ | async)?.person?.firstName }}
         </div>
-        <div id="wc_overview_info_date" class="text-sm sm:text-lg md:text-xl">{{ currentDate | date }}</div>
-        <div id="wc_overview_info_workspace" class="text-xs sm:text-sm mt-0 sm:mt-1">
-          Workspace: {{ workspace?.displayName }}
-        </div>
-      </div>
-      <div>
-        <p-button
-          *ocxIfPermission="'IMAGE#EDIT'"
-          id="wc_overview_info_configure"
-          styleClass="p-button-text text-white text-xs sm:text-base"
-          icon="pi pi-pencil"
-          [text]="true"
-          [routerLink]="['./configure']"
-          [label]="'GENERAL.CONFIGURE' | translate"
-          [ariaLabel]="'GENERAL.CONFIGURE' | translate"
-          [pTooltip]="'GENERAL.TOOLTIPS.CONFIGURE' | translate"
-          tooltipPosition="top"
-          tooltipEvent="hover"
-        ></p-button>
+        <div id="wc_overview_info_workspace" class="text-sm sm:text-base">Workspace: {{ workspace?.displayName }}</div>
       </div>
+      <p-button
+        *ocxIfPermission="'IMAGE#EDIT'"
+        id="wc_overview_info_configure"
+        styleClass="p-button-text text-white text-xs sm:text-base"
+        icon="pi pi-pencil"
+        [text]="true"
+        [routerLink]="['./configure']"
+        [label]="'GENERAL.CONFIGURE' | translate"
+        [ariaLabel]="'GENERAL.CONFIGURE' | translate"
+        [pTooltip]="'GENERAL.TOOLTIPS.CONFIGURE' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      ></p-button>
     </div>
 
     <div class="grid flex-column-reverse sm:flex-row justify-content-between row-gap-5 mt-3 sm:mt-0">
       <!-- SLOT: Bookmarks -->
       <div class="col-12 sm:col-6 md:col-5 xl:col-4 py-0 sm:p-2">
         <div
           *ngIf="isBookmarkListComponentAvailable$ | async"
-          class="w-full max-h-25rem overflow-hidden border-round-lg border-solid border-1 border-transparent"
+          class="w-full max-h-26rem overflow-hidden border-round-lg border-solid border-1 border-transparent"
         >
           <ocx-slot [name]="bookmarkListSlotName"></ocx-slot>
         </div>

diff --git a/src/app/welcome/welcome-overview/welcome-overview.component.ts b/src/app/welcome/welcome-overview/welcome-overview.component.ts
@@ -1,12 +1,13 @@
-import { animate, style, transition, trigger } from '@angular/animations'
 import { Component, OnInit } from '@angular/core'
+import { animate, style, transition, trigger } from '@angular/animations'
 import { catchError, map, Observable, of, Subject, Subscription, takeUntil, timer } from 'rxjs'
 
 import { Workspace } from '@onecx/integration-interface'
-import { AppStateService, UserProfile, UserService } from '@onecx/portal-integration-angular'
 import { SlotService } from '@onecx/angular-remote-components'
+import { AppStateService, UserProfile, UserService } from '@onecx/portal-integration-angular'
 
 import { ImageDataResponse, ImageInfo, ImagesInternalAPIService } from 'src/app/shared/generated'
+
 @Component({
   selector: 'app-welcome-overview',
   templateUrl: './welcome-overview.component.html',
@@ -20,7 +21,7 @@ import { ImageDataResponse, ImageInfo, ImagesInternalAPIService } from 'src/app/
 export class WelcomeOverviewComponent implements OnInit {
   private readonly destroy$ = new Subject()
   public loading = true
-  readonly CAROUSEL_SPEED: number = 15000
+  readonly CAROUSEL_SPEED: number = 15000 // ms
   workspace: Workspace | undefined
   currentSlide = 0
   user$: Observable<UserProfile>

diff --git a/src/assets/images/onecx_watermark_dark.png b/src/assets/images/onecx_watermark_dark.png
diff --git a/src/styles.scss b/src/styles.scss
@@ -11,6 +11,7 @@
 @import 'node_modules/@onecx/portal-integration-angular/assets/styles.scss';
 
 .layout-content {
+  overflow: hidden;
   background-size: 500px !important;
   background-color: var(--surface-600) !important;
   background-image: url(assets/images/onecx_watermark_dark.png);