From 09b7435243d947906cc79139482cc04fb2e6daae Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Mon, 8 Apr 2024 19:10:44 +0300
Subject: [PATCH] [develop | DONE | ADDED] funders page: update cards and lists
 to prepare for new data to be shown

---
 .../src/app/funders/funders.component.html    | 240 +++++++++++-------
 .../src/app/funders/funders.component.less    |  16 +-
 explore/src/app/openaireLibrary               |   2 +-
 explore/src/assets/openaire-theme             |   2 +-
 4 files changed, 153 insertions(+), 107 deletions(-)

diff --git a/explore/src/app/funders/funders.component.html b/explore/src/app/funders/funders.component.html
index 24667eab..b00053cf 100644
--- a/explore/src/app/funders/funders.component.html
+++ b/explore/src/app/funders/funders.component.html
@@ -121,88 +121,105 @@
             No funders available
           </div>
           <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;">
+            uk-grid uk-height-match="target: .data;">
             <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 funder-grid">
-                  <!-- OA % -->
-<!--                  <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">
-                          <icon name="open_access" [flex]="true" [ratio]="1"></icon>
-                        </span>
-                        <h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6>
+                  <!-- <div class="uk-position-top-left uk-padding-small">
+                    <span class="uk-text-xsmall">flag</span>
+                  </div> -->
+                  <!-- <div class="uk-position-top-right uk-padding-small">
+                    <div class="uk-flex uk-flex-middle uk-text-xsmall uk-text-meta">
+                      <div class="uk-icon-bg uk-icon-bg-small">
+                        <icon name="done" [flex]="true"></icon>
                       </div>
-                      <span class="uk-h6 uk-text-small">Open Access</span>
+                      <span class="uk-margin-xsmall-left">Registered</span>
                     </div>
+                  </div> -->
+                  <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" loading="lazy">
+                    <ng-template #elseBlock>
+                      <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
+                    </ng-template>
                   </div>
-                  <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" loading="lazy">
-                      <ng-template #elseBlock>
-                        <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
-                      </ng-template>
-                    </div>
-                    <!-- funder alias -->
+                  <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-left uk-margin-medium-left">
+                    <!-- 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 class="uk-flex">
+                      <div class="uk-width-expand name uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
+                        <ng-container *ngIf="funder.name" >
+                          <span>{{funder.name}}</span>
+                        </ng-container>
+                      </div>
+                      <!-- <div class="uk-width-auto uk-margin-left">
+                        <a href="" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
+                          <icon name="payment" [flex]="true"></icon>
+                        </a>
+                      </div> -->
                     </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;" loading="lazy">
-                            <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;" loading="lazy">
-                          <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>
+                  <div class="data uk-background-muted uk-flex uk-flex-middle uk-padding-small uk-padding-remove-left uk-margin-top">
+                    <div class="uk-flex uk-flex-middle uk-width-1-1 uk-child-width-1-2 uk-margin-medium-left">
                       <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>
+                        <!-- Projects -->
+                        <div *ngIf="funder.projects" class="uk-flex uk-flex-column" [class.uk-margin-small-bottom]="funder.researchProducts">
+                          <span class="uk-text-meta uk-text-xsmall">
+                            Projects
                           </span>
-                        </a>
+                          <a
+                            class="uk-link-text uk-text-large uk-text-bold"
+                            [routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
+                            <span>
+                              {{funder.projects | number}}
+                            </span>
+                          </a>
+                        </div>
+                        <!-- Research products -->
+                        <div *ngIf="funder.researchProducts" class="uk-flex uk-flex-column">
+                          <span class="uk-text-meta uk-text-xsmall">
+                            Research Products
+                          </span>
+                          <a 
+                            class="uk-link-text uk-text-large uk-text-bold"
+                            [routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
+                            <span>
+                              {{funder.researchProducts | number}}
+                            </span>
+                          </a>
+                        </div>
                       </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 class="uk-flex uk-flex-column uk-flex-middle uk-flex-center">
+                        <div class="uk-progress-semicircle uk-progress-semicircle-small" [attr.percentage]="funder.openAccessPercentage" [style]="'--percentage:' + funder.openAccessPercentage"></div>
+                        <div class="uk-flex uk-flex-middle uk-margin-top">
+                          <icon class="open-access" [name]="'open_access'" [flex]="true" [ratio]="0.8"></icon>
+                          <span class="uk-text-xsmall uk-margin-xsmall-left">Open Access</span>
+                        </div>
                       </div>
                     </div>
                   </div>
+                  <div class="monitor-dashboard uk-padding-small uk-padding-remove-left uk-margin-medium-left">
+                    <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;" loading="lazy">
+                        <span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
+                      </span>
+                    </a>
+                    <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;" loading="lazy">
+                      <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>
                 </div>
               </ng-container>
               <!-- funder's card for LIST view -->
@@ -216,19 +233,22 @@
                           <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
                         </ng-template>
                       </div>
-                      <div class="uk-width-expand uk-margin-medium-left">
-                        <div class="name uk-h6 uk-text-truncate">
-                          <ng-container *ngIf="funder.name">
-                            {{funder.name}}
-                          </ng-container>
-                          <ng-container *ngIf="funder.alias" >
-                            <span class="uk-text-uppercase">
-                              ({{funder.alias}})
-                            </span>
-                          </ng-container>
-                        </div>
-                        <div class="uk-grid uk-grid-divider uk-flex-nowrap" uk-grid>
-                          <div *ngIf="funder.monitorDashboard">
+                      <div class="uk-width-expand uk-grid uk-grid-divider uk-child-width-1-2 uk-margin-left" uk-grid>
+                        <div class="uk-flex uk-flex-column uk-flex-center">
+                          <div class="uk-flex uk-flex-middle">
+                            <!-- <span class="uk-text-xsmall uk-margin-small-right">flag</span> -->
+                            <div class="uk-h6 uk-margin-remove uk-text-truncate">
+                              <ng-container *ngIf="funder.name">
+                                <span>{{funder.name}}</span>
+                              </ng-container>
+                              <ng-container *ngIf="funder.alias" >
+                                <span class="uk-text-uppercase">
+                                  ({{funder.alias}})
+                                </span>
+                              </ng-container>
+                            </div>
+                          </div>
+                          <div *ngIf="funder.monitorDashboard" class="uk-margin-top">
                             <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">
@@ -246,44 +266,70 @@
                               <icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
                             </span>
                           </div>
+                        </div>
+                        <div class="uk-flex uk-flex-middle uk-child-width-1-3">
                           <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>
+                            <div *ngIf="funder.projects" class="uk-flex uk-flex-column">
+                              <span class="uk-text-meta uk-text-xsmall">
+                                Projects
                               </span>
-                            </a>
+                              <a 
+                                class="uk-link-text uk-text-large uk-text-bold"
+                                [routerLink]="properties.searchLinkToProjects" [queryParams]="{'funder': urlEncodeAndQuote(funder.id)}">
+                                <span>
+                                  {{funder.projects | number}}
+                                </span>
+                              </a>
+                            </div>
                           </div>
                           <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>
+                            <div *ngIf="funder.researchProducts" class="uk-flex uk-flex-column">
+                              <span class="uk-text-meta uk-text-xsmall">
+                                Research Products
                               </span>
-                            </a>
+                              <a
+                                class="uk-link-text uk-text-large uk-text-bold"
+                                [routerLink]="properties.searchLinkToResults" [queryParams]="{'relfunder': urlEncodeAndQuote(funder.id)}">
+                                <span>
+                                  {{funder.researchProducts | number}}
+                                </span>
+                              </a>
+                            </div>
+                          </div>
+                          <div>
+                            <div *ngIf="funder.openAccessResearchProducts && funder.researchProducts" class="uk-flex uk-flex-column">
+                              <span class="uk-text-meta uk-text-xsmall">Open Access</span>
+                              <div class="uk-flex uk-flex-middle">
+                                <span class="uk-margin-xsmall-right open-access">
+                                  <icon name="open_access" [flex]="true" [ratio]="0.8"></icon>
+                                </span>
+                                <span class="uk-text-large uk-text-bold">{{funder.openAccessPercentage}}%</span>
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                    <div class="uk-width-auto uk-flex uk-flex-middle uk-flex-center">
-                      <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">
-                            <icon name="open_access" [flex]="true" [ratio]="1"></icon>
-                          </span>
-                          <h6 class="uk-margin-remove">{{funder.openAccessPercentage}}%</h6>
+                    <!-- <div class="uk-width-auto uk-flex uk-flex-column uk-flex-center uk-margin-right">
+                      <div class="uk-flex uk-flex-middle uk-text-xsmall uk-text-meta uk-margin-bottom">
+                        <div class="uk-icon-bg uk-icon-bg-small">
+                          <icon name="done" [flex]="true"></icon>
                         </div>
-                        <span class="uk-h6 uk-text-small">Open Access</span>
+                        <span class="uk-margin-xsmall-left">Registered</span>
                       </div>
-                    </div>
+                      <div>
+                        <a href="" class="uk-flex-inline uk-flex-middle uk-text-uppercase uk-button uk-button-text custom-external">
+                          <icon name="payment" [flex]="true"></icon>
+                        </a>
+                      </div>
+                    </div> -->
                   </div>
                 </div>
               </ng-template>
             </div>
           </div>
         </div>
+
         <paging-no-load *ngIf="displayedFunders.length > pageSize"
           (pageChange)="updateCurrentPage($event)"
           [currentPage]="currentPage" [size]="pageSize"
diff --git a/explore/src/app/funders/funders.component.less b/explore/src/app/funders/funders.component.less
index fd7e0b46..7da80274 100644
--- a/explore/src/app/funders/funders.component.less
+++ b/explore/src/app/funders/funders.component.less
@@ -38,11 +38,11 @@
   }
 }
 
-.uk-card {
-  &.funder-grid {
-    border-bottom: 4px solid fade(@funder-color, 30%);
-  }
-  &.funder-list {
-    border-left: 4px solid fade(@funder-color, 30%);
-  }
-}
\ No newline at end of file
+// .uk-card {
+//   &.funder-grid {
+//     border-bottom: 4px solid fade(@funder-color, 30%);
+//   }
+//   &.funder-list {
+//     border-left: 4px solid fade(@funder-color, 30%);
+//   }
+// }
\ No newline at end of file
diff --git a/explore/src/app/openaireLibrary b/explore/src/app/openaireLibrary
index cafe0e49..4f9f2f25 160000
--- a/explore/src/app/openaireLibrary
+++ b/explore/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit cafe0e4926f0d9762cd59a71ce1779743db34771
+Subproject commit 4f9f2f25057d4d0933f34488960b50286971b587
diff --git a/explore/src/assets/openaire-theme b/explore/src/assets/openaire-theme
index 954a1fe8..9171ec2a 160000
--- a/explore/src/assets/openaire-theme
+++ b/explore/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit 954a1fe8af0653740882c7db4b9bf92b8f9000f4
+Subproject commit 9171ec2a63d1fb53f239cfbff26f9b3a1ed9cc61