finish subjects page and some general tweaks

src/app/affiliations/affiliations.component.html

@@ -28,19 +28,21 @@
     <span class="loading-gif uk-align-center"></span>
   </div>
   <div *ngIf="longView"
-		class="uk-child-width-1-5@xl uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s uk-text-center uk-grid-medium uk-grid-margin uk-margin-remove"
+		class="uk-child-width-1-5@xl uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s uk-text-center uk-grid"
 		uk-height-match="target: .affiliation-logo, .affiliation-name"
-		uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
+		uk-scrollspy="cls: uk-animation-fade; target: .uk-card; repeat: false"
 		uk-grid>
     <div *ngFor="let affiliation of affiliations;">
-      <div class="uk-card uk-card-default uk-card-hover affiliationCard">
+			<div>
-        <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" class="uk-link-reset">
+				<div class="uk-card uk-card-default uk-card-hover affiliationCard">
-          <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
+					<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" class="uk-link-reset">
-        </a>
+						<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
-        <span *ngIf="!affiliation.website_url" class="uk-link-reset">
+					</a>
-          <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
+					<span *ngIf="!affiliation.website_url" class="uk-link-reset">
-        </span>
+						<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
-      </div>
+					</span>
+				</div>
+			</div>
     </div>
   </div>
 

src/app/curators/curators.component.html

@@ -22,7 +22,7 @@
 				<div *ngIf="curators" class="uk-margin-large-top">
 					<div *ngFor="let curator of curators let i=index;" class="uk-card uk-card-default uk-padding">
 						<div class="uk-grid" uk-grid>
-							<div class="uk-width-2-3 uk-flex uk-flex-middle">
+							<div class="uk-width-2-3@m uk-flex uk-flex-middle">
 								<div class="uk-width-auto">
 									<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle" style="width: 160px; height: 160px;"
 										src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
@@ -66,18 +66,20 @@
 									</div>
 								</div>
 							</div>
-							<div *ngIf="curator.affiliations && curator.affiliations.length > 0" class="uk-width-1-3 uk-padding" style="border-left: 1px solid #eaeaea">
+							<div *ngIf="curator.affiliations && curator.affiliations.length > 0" class="uk-width-1-3@m uk-padding" style="border-left: 1px solid #eaeaea">
 								<div class="uk-text-muted uk-margin-bottom">
 									Affiliations
 								</div>
-								<div *ngFor="let affiliation of curator.affiliations" class="uk-margin-small-bottom">
+								<div class="uk-grid uk-child-width-1-2" uk-grid>
-									<span *ngIf="!affiliation.website_url">
+									<div *ngFor="let affiliation of curator.affiliations">
-										<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
+										<span *ngIf="!affiliation.website_url">
-									</span>
+											<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
-									<a *ngIf="affiliation.website_url"
+										</span>
-											target="_blank" [href]="affiliation.website_url | urlPrefix">
+										<a *ngIf="affiliation.website_url"
-										<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
+												target="_blank" [href]="affiliation.website_url | urlPrefix">
-									</a>
+											<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
+										</a>
+									</div>
 								</div>
 							</div>
 						</div>

src/app/htmlPages/organizations/organizationsPage.component.ts

@@ -10,7 +10,7 @@ import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.co
 				</div>
 			</div>
 			<div class="uk-container uk-container-large uk-section uk-section-small">
-				<h1 class="uk-margin-top uk-margin-large-bottom">Supporting <br> Organizations</h1>
+				<h1 class="uk-margin-top uk-margin-large-bottom uk-width-1-2@m">Supporting Organizations</h1>
 				<html-page description="Organizations" pageTitle="Supporting Organizations"></html-page>
 				<affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations>
 			</div>

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 18b403bec044e2b4c803f9a19d54f9e0e408c3d9
+Subproject commit 4966a1d342ae711a1a84ee924ab23e2f79271ec9

src/app/subjects/subjects.component.ts

@@ -37,20 +37,64 @@ import {Subscriber, Subscription} from "rxjs";
 							[texts]="pageContents['top']">
 						</helper>
 					</div>
-					<div *ngIf="subjects" class="uk-margin-large-top" style=" min-height: 250px;">
+					<ng-container *ngIf="groupedSubjects?.length">
-						<div class="uk-card uk-card-default uk-card-body">
+						<div class="uk-padding uk-margin-top">
-							<span *ngFor="let subject of subjects let i=index">
+							<ul class="uk-nav uk-nav-default uk-flex uk-flex-center uk-flex-wrap">
-								<span *ngIf="subject != ''">
+								<li *ngFor="let item of groupedSubjects; let i = index;" class="uk-margin-left uk-margin-right" 
-									<a class="portal-link"
+									[class]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
-										[queryParams]="{f0:'resultsubject',fv0:createParams(subject)}"
+									<a class="uk-padding-remove">{{item.group}}</a>
-										routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
+								</li>
-										<span>{{subject}}</span>
+							</ul>
-									</a>
-									<span *ngIf="i < subjects.length-1">, </span>
-								</span>
-							</span>
 						</div>
-					</div>
+						<!-- View for 'All' -->
+						<div *ngIf="index == 0" class="uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid>
+							<div *ngFor="let item of groupedSubjects.slice(1); let i = index;">
+								<div>
+									<h6>{{item.group}}</h6>
+									<div *ngFor="let subItem of item.data.slice(0, subjectsLimit)" class="uk-margin-small-bottom">
+										<a [queryParams]="{f0:'resultsubject',fv0:createParams(subItem)}" class="uk-link-text"
+											routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults"
+											[attr.uk-tooltip]="subItem.length > maxCharacters ? subItem :''">
+											<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+										</a>
+									</div>
+									<div *ngIf="item.data.length > subjectsLimit">
+										<a (click)="changeDisplayedSubjects(i+1, item)" class="view-more-less-link">
+											View all
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+						<!-- View for a single group -->
+						<div *ngIf="index != 0" class="uk-margin-large-top">
+							<div>
+								<div>
+									<h6>{{groupedSubjects[index].group}}</h6>
+									<ng-container *ngIf="subjectsColumns?.length == 0; else elseBlock">
+										<div *ngFor="let subItem of groupedSubjects[index].data" class="uk-margin-small-bottom">
+											<a [queryParams]="{f0:'resultsubject',fv0:createParams(subItem)}" class="uk-link-text"
+												routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
+												<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+											</a>
+										</div>
+									</ng-container>
+									<ng-template #elseBlock>
+										<div class="uk-grid uk-child-width-1-4@m" uk-grid>
+											<div *ngFor="let group of subjectsColumns">
+												<div *ngFor="let subItem of group" class="uk-margin-small-bottom">
+													<a [queryParams]="{f0:'resultsubject',fv0:createParams(subItem)}" class="uk-link-text"
+														routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
+														<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+													</a>
+												</div>
+											</div>
+										</div>
+									</ng-template>
+								</div>
+							</div>
+						</div>
+					</ng-container>
 				</div>
 			</div>
 		</div>
@@ -64,6 +108,12 @@ export class SubjectsComponent {
   public properties: EnvProperties = properties;
   public pageContents = null;
   public divContents = null;
+	public groupedSubjects = [];
+	public index: number = 0;
+	public subjectsLimit: number = 6;
+	public viewAll: boolean = false;
+	public maxCharacters: number = 25;
+	public subjectsColumns = [];
   
   public url: string = null;
   public pageTitle: string = "Subjects";
@@ -98,6 +148,7 @@ export class SubjectsComponent {
         //this.getDivContents();
         this.getPageContents();
         this.subjects = community.subjects;
+				this.groupSubjects();
         this.showLoading = false;
       }
     }));
@@ -126,6 +177,42 @@ export class SubjectsComponent {
       this.divContents = contents;
     }));
   }
+
+	private groupSubjects() {
+		if(this.subjects.length === 0) {
+			return [];
+		}
+		this.groupedSubjects = Object.values(
+			this.subjects.reduce((acc, subject) => {
+				let firstLetter = subject[0].toLocaleUpperCase();
+				if(!acc[firstLetter]) {
+					acc[firstLetter] = {group: firstLetter, data: [subject]};
+				} else {
+					acc[firstLetter].data.push(subject);
+				}
+				return acc;
+			},{})
+		)
+		if(this.subjects.length > 1) {
+			this.groupedSubjects.unshift({group: 'All', data: this.subjects});
+		}
+	}
+
+	public changeDisplayedSubjects(i, group) {
+		this.subjectsColumns = [];
+		this.index = i;
+		if(group.data.length > this.subjectsLimit && group.group != 'All') {
+			this.divideSubjects(group);
+		}
+	}
+
+	public divideSubjects(group) {
+		let columns = [];
+		for(let i = 0; i < (group.data.length / this.subjectsLimit); i++) {
+			columns.push(group.data.slice(i * this.subjectsLimit, ((i + 1) * this.subjectsLimit)));
+		}
+		this.subjectsColumns = columns;
+	}
   
   private updateDescription(description: string) {
     this._meta.updateTag({content: description}, "name='description'");

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit d6fd642f214ce91e0eefaa06a9e8b50fedf9b7d8
+Subproject commit 752859b10d3e110fdc9a4360bb7cb005ef6225ed

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit 4fca369b2e4f4f2c2689e0efc501d2c548dfeb68
+Subproject commit ec73c67c591eca9fe68f7a6c6f65ce4332852b2f