From 20ac4950135d09608c1441df96e1f3f9866dd1e5 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Mon, 16 Oct 2023 11:47:45 +0300
Subject: [PATCH] [Explore | develop]: funders.component.html: [Bug fix]
 Updated height-match cases and added uk-grid-match to fix and align heights
 of cards and their contents | funders.component.ts: Added check to not show
 when there is just one project for a funder (it is the custom unidentified
 project added for the data).

---
 .../src/app/funders/funders.component.html    | 125 +++++++++---------
 explore/src/app/funders/funders.component.ts  |  32 ++---
 2 files changed, 81 insertions(+), 76 deletions(-)

diff --git a/explore/src/app/funders/funders.component.html b/explore/src/app/funders/funders.component.html
index 8759e2ea..0fac80e9 100644
--- a/explore/src/app/funders/funders.component.html
+++ b/explore/src/app/funders/funders.component.html
@@ -74,7 +74,7 @@
     </div>
   </ng-container>
   <ng-container *ngIf="!showLoading && funders?.length">
-    <div class="uk-container uk-container-large" uk-height-match="target: .percentage;">
+    <div class="uk-container uk-container-large">
       <div id="target" class="uk-section uk-padding-remove-top uk-margin-top" uk-height-match="target: .alias;">
         <div>
           <div *ngIf="funders" class="uk-padding-small uk-padding-remove-vertical uk-margin-medium-bottom uk-flex uk-flex-wrap uk-flex-middle uk-flex-between">
@@ -120,14 +120,15 @@
           <div *ngIf="!displayedFunders || displayedFunders?.length == 0" class="uk-text-center uk-margin-large-top">
             No funders available
           </div>
-          <div class="uk-grid uk-padding-small" [ngClass]="gridView ? 'uk-child-width-1-2@m uk-child-width-1-3@l' : 'uk-child-width-1-1'"
+          <div class="uk-grid uk-grid-match uk-padding-small" [ngClass]="gridView ? 'uk-child-width-1-2@m uk-child-width-1-3@l' : 'uk-child-width-1-1'"
             uk-grid uk-height-match="target: .info;">
             <div *ngFor="let funder of displayedFunders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
               <!-- funder's card for GRID view -->
               <ng-container *ngIf="gridView || isMobile; else elseBlock">
-                <div class="uk-card uk-card-default uk-card-hover uk-card-body funder-grid">
+                <div class="uk-card uk-card-default uk-card-hover funder-grid">
                   <!-- OA % -->
-                  <div class="percentage uk-flex uk-flex-right uk-margin-bottom">
+<!--                  <div class="percentage uk-flex uk-flex-right uk-margin-bottom">-->
+                  <div class="uk-position-top-right uk-padding-small">
                     <div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-text-center">
                       <div class="uk-flex uk-flex-middle uk-flex-center">
                         <span class="uk-margin-xsmall-right open-access">
@@ -138,66 +139,68 @@
                       <span class="uk-h6 uk-text-small">Open Access</span>
                     </div>
                   </div>
-                  <!-- funder logo  -->
-                  <div class="uk-card-media-top uk-padding-large uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
-                    <img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply">
-                    <ng-template #elseBlock>
-                      <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply">
-                    </ng-template>
-                  </div>
-                  <!-- funder alias -->
-                  <div class="alias uk-text-uppercase uk-text-small uk-margin-top type">
-                    <ng-container *ngIf="funder.alias">
-                      {{funder.alias}}
-                    </ng-container>
-                  </div>
-                  <!-- funder name -->
-                  <div class="name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
-                    <ng-container *ngIf="funder.name" >
-                      {{funder.name}}
-                    </ng-container>
-                  </div>
-                  <div class="info uk-margin-medium-top">
-                    <!-- Monitor dashboard -->
-                    <div>
-                      <!-- PUBLIC status -->
-                      <a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
-                        class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
-                        target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
-                        <span class="uk-flex uk-flex-middle">
+                  <div class="uk-card-body">
+                    <!-- funder logo  -->
+                    <div class="uk-card-media-top uk-margin-medium-top uk-padding-large uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
+                      <img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply">
+                      <ng-template #elseBlock>
+                        <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply">
+                      </ng-template>
+                    </div>
+                    <!-- funder alias -->
+                    <div class="alias uk-text-uppercase uk-text-small uk-margin-top type">
+                      <ng-container *ngIf="funder.alias">
+                        {{funder.alias}}
+                      </ng-container>
+                    </div>
+                    <!-- funder name -->
+                    <div class="name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
+                      <ng-container *ngIf="funder.name" >
+                        {{funder.name}}
+                      </ng-container>
+                    </div>
+                    <div class="info uk-margin-medium-top">
+                      <!-- Monitor dashboard -->
+                      <div class="monitor-dashboard">
+                        <!-- PUBLIC status -->
+                        <a *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus != 'PRIVATE' && funder.monitorDashboardStatus != 'RESTRICTED'"
+                          class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
+                          target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
+                          <span class="uk-flex uk-flex-middle">
+                            <img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
+                              class="uk-margin-xsmall-right" style="width: 17px; height: 17px;">
+                            <span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
+                          </span>
+                        </a>
+                        <!-- RESTRICTED status -->
+                        <span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
+                          class="uk-flex uk-flex-middle">
                           <img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
                             class="uk-margin-xsmall-right" style="width: 17px; height: 17px;">
-                          <span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
+                          <span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
+                          <icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
                         </span>
-                      </a>
-                      <!-- RESTRICTED status -->
-                      <span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
-                        class="uk-flex uk-flex-middle">
-                        <img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
-                          class="uk-margin-xsmall-right" style="width: 17px; height: 17px;">
-                        <span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
-                        <icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
-                      </span>
-                    </div>
-                    <!-- Projects -->
-                    <div>
-                      <a *ngIf="funder.projects"
-                        class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
-                        [routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
-                        <span class="uk-flex uk-flex-middle">
-                          <span>Projects ({{funder.projects | number}})</span>
-                        </span>
-                      </a>
-                    </div>
-                    <!-- Research products -->
-                    <div>
-                      <a *ngIf="funder.researchProducts"
-                        class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
-                        [routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
-                        <span class="uk-flex uk-flex-middle">
-                          <span>Research Products ({{funder.researchProducts | number}})</span>
-                        </span>
-                      </a>
+                      </div>
+                      <!-- Projects -->
+                      <div>
+                        <a *ngIf="funder.projects"
+                          class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
+                          [routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
+                          <span class="uk-flex uk-flex-middle">
+                            <span>Projects ({{funder.projects | number}})</span>
+                          </span>
+                        </a>
+                      </div>
+                      <!-- Research products -->
+                      <div>
+                        <a *ngIf="funder.researchProducts"
+                          class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
+                          [routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
+                          <span class="uk-flex uk-flex-middle">
+                            <span>Research Products ({{funder.researchProducts | number}})</span>
+                          </span>
+                        </a>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/explore/src/app/funders/funders.component.ts b/explore/src/app/funders/funders.component.ts
index d68147ce..b08f1622 100644
--- a/explore/src/app/funders/funders.component.ts
+++ b/explore/src/app/funders/funders.component.ts
@@ -164,21 +164,23 @@ export class FundersComponent implements OnInit {
         // 3rd call
         let queriedFunders3 = data[2][1][0].values;
         queriedFunders3.forEach(queriedFunder => {
-          if(this.fundersMap.has(queriedFunder.id)) {
-            this.fundersMap.get(queriedFunder.id).projects = +queriedFunder.number;
-          } else {
-            this.fundersMap.set(queriedFunder.id, {
-              "id": queriedFunder.id,
-              "name": queriedFunder.name,
-              "alias": '',
-              "researchProducts": 0, 
-              "openAccessResearchProducts": 0, 
-              "openAccessPercentage": 0, 
-              "projects": +queriedFunder.number, 
-              "monitorDashboard": '', 
-              "monitorDashboardStatus": '', 
-              "logoUrl": ''
-            });
+          if(+queriedFunder.number > 1) {
+            if (this.fundersMap.has(queriedFunder.id)) {
+              this.fundersMap.get(queriedFunder.id).projects = +queriedFunder.number;
+            } else {
+              this.fundersMap.set(queriedFunder.id, {
+                "id": queriedFunder.id,
+                "name": queriedFunder.name,
+                "alias": '',
+                "researchProducts": 0,
+                "openAccessResearchProducts": 0,
+                "openAccessPercentage": 0,
+                "projects": +queriedFunder.number,
+                "monitorDashboard": '',
+                "monitorDashboardStatus": '',
+                "logoUrl": ''
+              });
+            }
           }
         });