From 6679e6bac0ba0fb5b25af09fe898ecb355bf0f71 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Tue, 28 Mar 2023 11:37:44 +0300
Subject: [PATCH] restrict result title in 3 rows for search page and 5 rows
 for landing page (included tooltip for landing)

---
 .../landing-utils/showTitle.component.ts      | 81 ++++++++++---------
 .../result-preview.component.html             | 24 +++---
 2 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/landingPages/landing-utils/showTitle.component.ts b/landingPages/landing-utils/showTitle.component.ts
index dd688386..02025e65 100644
--- a/landingPages/landing-utils/showTitle.component.ts
+++ b/landingPages/landing-utils/showTitle.component.ts
@@ -1,52 +1,55 @@
-import {Component, Input} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {Component, ElementRef, Input, ViewChild} from '@angular/core';
 
 @Component({
-    selector: 'showTitle',
-    template: `
-        <h1 [ngClass]="classNames" class="uk-h6">
-          <ng-container *ngTemplateOutlet="_title;"></ng-container>
-        </h1>
-          <ng-template #_title>
-          <div *ngIf="title != undefined" class="landingTitle uk-text-break">
-              <span *ngIf="title['url'] != undefined && title['url'] != null && title['url'] != ''"
-                      class="custom-external">
-                  <a *ngIf="title['name'] != undefined && title['name'] != ''"
-                      href="{{title['url']}}" target="_blank"
-                      [innerHTML]="title['name']">
-                  </a>
-                  <a *ngIf="title['name'] == undefined || title['name'] == ''"
-                      href="{{title['url']}}" target="_blank">
-                      [no title available]
-                  </a>
-              </span>
-              <span *ngIf="(title['name'] != undefined && title['name'] != '') &&
-                      (title['url'] == undefined || title['url'] == null || title['url'] == '')"
-                      [innerHTML]="title['name']">
-              </span>
-              <span *ngIf="(title['name'] == undefined || title['name'] == '') &&
-                      (title['url'] == undefined || title['url'] == null || title['url'] == '')"
-                       >
-                  [no title available]
-              </span>
-          </div>
-          <div *ngIf="titleName" class="uk-text-break">
-            <span [innerHTML]="titleName"></span>
-          </div>
-          <div *ngIf="!titleName && !title">
-            <span>No title available</span>
-          </div>
-          </ng-template>
-    `
+  selector: 'showTitle',
+  template: `
+    <h1 [ngClass]="classNames" class="uk-h6">
+      <ng-container *ngTemplateOutlet="_title;"></ng-container>
+    </h1>
 
-    })
+    <ng-template #_title>
+      <div *ngIf="title != undefined" class="landingTitle uk-text-break">
+        <span *ngIf="title['url'] != undefined && title['url'] != null && title['url'] != ''"
+          class="custom-external">
+          <a *ngIf="title['name'] != undefined && title['name'] != ''"
+            href="{{title['url']}}" target="_blank"
+            [innerHTML]="title['name']">
+          </a>
+          <a *ngIf="title['name'] == undefined || title['name'] == ''"
+            href="{{title['url']}}" target="_blank">
+            [no title available]
+          </a>
+        </span>
+        <span *ngIf="(title['name'] != undefined && title['name'] != '') &&
+          (title['url'] == undefined || title['url'] == null || title['url'] == '')"
+          [innerHTML]="title['name']">
+        </span>
+        <span *ngIf="(title['name'] == undefined || title['name'] == '') &&
+          (title['url'] == undefined || title['url'] == null || title['url'] == '')">
+          [no title available]
+        </span>
+      </div>
+      <div *ngIf="titleName" #titleDiv class="uk-text-break multi-line-ellipsis lines-5">
+        <span [innerHTML]="titleName" [attr.uk-tooltip]="showTitleTooltip ? 'cls: uk-active uk-width-large' : 'cls: uk-invisible'"
+          [title]="titleName"></span>
+      </div>
+      <div *ngIf="!titleName && !title">
+        <span>No title available</span>
+      </div>
+    </ng-template>
+  `
+})
 
 export class ShowTitleComponent {
   @Input() titleName: string;
   @Input() title: { [key: string]: string };
   @Input() iconClass:string;
   @Input() classNames: string = "";
+  @ViewChild("titleDiv") titleDiv: ElementRef;
 
   constructor () {}
 
+  get showTitleTooltip():boolean {
+		return !!this.titleDiv && (this.titleDiv.nativeElement.clientHeight >= 5 * 21);
+	}
 }
diff --git a/utils/result-preview/result-preview.component.html b/utils/result-preview/result-preview.component.html
index ecf40866..86538ab0 100644
--- a/utils/result-preview/result-preview.component.html
+++ b/utils/result-preview/result-preview.component.html
@@ -19,14 +19,14 @@
           <!-- 1st section (title, metadata) -->
           <div class="uk-margin-small-bottom">
             <!-- Title -->
-            <div>
+            <div class="multi-line-ellipsis lines-3">
               <h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
                 <a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="createParam()"
-                   [routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
+                  [routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
                   <div *ngIf="(result.title) || result.acronym">
-									<span *ngIf="result.acronym">
-										{{result.acronym}}
-									</span>
+                    <span *ngIf="result.acronym">
+                      {{result.acronym}}
+                    </span>
                     <span *ngIf="result.acronym && (result.title)"> (</span>
                     <span *ngIf="result.title" [innerHTML]="result.title"></span>
                     <span *ngIf="result.acronym && result.title">)</span>
@@ -36,8 +36,8 @@
                   </div>
                 </a>
                 <a *ngIf="externalUrl && result.id" (click)="onClick()"
-                   target="_blank" [href]="externalUrl+result.id"
-                   class="custom-external uk-link uk-text-decoration-none uk-width-expand">
+                  target="_blank" [href]="externalUrl+result.id"
+                  class="custom-external uk-link uk-text-decoration-none uk-width-expand">
                   <span *ngIf="(result.title) || result.acronym">
                     <span *ngIf="result.acronym">
                       {{result.acronym}}
@@ -47,14 +47,14 @@
                     <span *ngIf="result.acronym && result.title">)</span>
                   </span>
                   <span *ngIf="!result.title && !result.acronym">
-                  [no title available]
-                </span>
+                    [no title available]
+                  </span>
                 </a>
                 <div *ngIf="!result.id" class="uk-width-expand">
                   <div *ngIf="(result.title) || result.acronym">
-						<span *ngIf="result.acronym">
-							{{result.acronym}}
-						</span>
+                    <span *ngIf="result.acronym">
+                      {{result.acronym}}
+                    </span>
                     <span *ngIf="result.acronym && (result.title)"> (</span>
                     <span *ngIf="result.title" [innerHTML]="result.title"></span>
                     <span *ngIf="result.acronym && result.title">)</span>