MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 14 Wiki Activity

finish subjects page and some general tweaks

This commit is contained in:
Alex Martzios 2022-06-24 12:41:26 +03:00
parent dd2036b2d7
commit 23d65d08d7
7 changed files with 128 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/affiliations/affiliations.component.html
View File

@ -28,11 +28,12 @@
<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>
<div class="uk-card uk-card-default uk-card-hover affiliationCard">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" class="uk-link-reset">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
@ -42,6 +43,7 @@
</span>
</div>
</div>
</div>
</div>
<div *ngIf="communityFirstPage && !longView" class="supportingOrganizations uk-margin-large-top uk-grid" uk-grid>

8
src/app/curators/curators.component.html
View File

@ -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,11 +66,12 @@
</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>
<div *ngFor="let affiliation of curator.affiliations">
<span *ngIf="!affiliation.website_url">
<img [src]="affiliation.logo_url | urlPrefix" [alt]="affiliation.name">
</span>
@ -84,6 +85,7 @@
</div>
</div>
</div>
</div>
<div class="uk-margin-medium">
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']">

2
src/app/htmlPages/organizations/organizationsPage.component.ts
View File

@ -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>

2
src/app/openaireLibrary

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

109
src/app/subjects/subjects.component.ts
View File

@ -37,22 +37,66 @@ import {Subscriber, Subscription} from "rxjs";
[texts]="pageContents['top']">
</helper>
</div>
<div *ngIf="subjects" class="uk-margin-large-top" style=" min-height: 250px;">
<div class="uk-card uk-card-default uk-card-body">
<span *ngFor="let subject of subjects let i=index">
<span *ngIf="subject != ''">
<a class="portal-link"
[queryParams]="{f0:'resultsubject',fv0:createParams(subject)}"
routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
<span>{{subject}}</span>
<ng-container *ngIf="groupedSubjects?.length">
<div class="uk-padding uk-margin-top">
<ul class="uk-nav uk-nav-default uk-flex uk-flex-center uk-flex-wrap">
<li *ngFor="let item of groupedSubjects; let i = index;" class="uk-margin-left uk-margin-right"
[class]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
<a class="uk-padding-remove">{{item.group}}</a>
</li>
</ul>
</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>
<span *ngIf="i < subjects.length-1">, </span>
</span>
</span>
</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;
}
}));
@ -127,6 +178,42 @@ export class SubjectsComponent {
}));
}
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'");
this._meta.updateTag({content: description}, "property='og:description'");

2
src/assets/common-assets

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

2
src/assets/openaire-theme

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