progress on curators, organizations and subjects pages

This commit is contained in:
Alex Martzios 2022-06-16 15:01:41 +03:00
parent 1d5b995518
commit 51438b8e73
10 changed files with 136 additions and 98 deletions

View File

@ -1,26 +1,26 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<ng-template #card let-organization="organization" let-fullView="fullView">
<div class="affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal"
[ngClass]="(!fullView)?'':'uk-card-media-top uk-padding-small'">
<div class="uk-align-center uk-margin-remove-bottom">
<img *ngIf="organization.logo_url != null && organization.logo_url != '' "
[src]="organization.logo_url | urlPrefix"
alt="{{(organization.name)?organization.name:''}} logo">
<span *ngIf="organization.logo_url == null || organization.logo_url == ''" class="uk-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1"
r="1.1"></circle><rect
fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000"
stroke-width="1.01"
points="4,13 8,9 13,14"></polyline><polyline
fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
</span>
</div>
</div>
<div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top">
<span class="uk-text-bold uk-text-small">{{organization.name.slice(0, 100)}}</span><span
*ngIf="organization.name.length > 100">...</span>
</div>
<div [class]="fullView?'uk-card-body uk-height-1-1 uk-flex uk-flex-column uk-flex-around':''" class="">
<div class="affiliation-logo">
<img *ngIf="organization.logo_url != null && organization.logo_url != '' "
[src]="organization.logo_url | urlPrefix"
alt="{{(organization.name)?organization.name:''}} logo"
class="uk-blend-multiply" loading="lazy">
<span *ngIf="organization.logo_url == null || organization.logo_url == ''" class="uk-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5">
<circle cx="16.1" cy="6.1" r="1.1"></circle>
<rect fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect>
<polyline fill="none" stroke="#000" stroke-width="1.01" points="4,13 8,9 13,14"></polyline>
<polyline fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline>
</svg>
</span>
</div>
<div class="affiliation-name" *ngIf="organization.name && fullView">
<span class="uk-text-bold">{{organization.name.slice(0, 100)}}</span><span
*ngIf="organization.name.length > 100">...</span>
</div>
</div>
</ng-template>
<ng-container *ngIf="affiliations.length > 0">
@ -28,33 +28,58 @@
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="longView"
class="uk-child-width-1-5@l uk-child-width-1-3@m uk-child-width-1-2@s
uk-text-center uk-grid-match uk-grid-small uk-grid-margin uk-margin-remove"
uk-height-match="target: > div > .uk-card > .affiliation-content > .affiliation-logo"
uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
uk-grid>
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"
uk-height-match="target: .affiliation-logo, .affiliation-name"
uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; repeat: false"
uk-grid>
<div *ngFor="let affiliation of affiliations;">
<div class="uk-card portalSearchCard">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" class="affiliation-content">
<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>
</a>
<span *ngIf="!affiliation.website_url" class="affiliation-content">
<span *ngIf="!affiliation.website_url" class="uk-link-reset">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
</span>
</div>
</div>
</div>
<h3 *ngIf="communityFirstPage"
class="uk-margin-large-top uk-text-center uk-text-muted uk-text-bold">
<div *ngIf="communityFirstPage && !longView" class="supportingOrganizations uk-margin-large-top uk-grid" uk-grid>
<div class="uk-width-1-3@m">
<h2>
Supporting Organizations
</h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-top"
routerLinkActive="router-link-active" routerLink="/organizations">
<span class="uk-flex uk-flex-middle">
<span>Browse all</span>
</span>
</a>
</div>
<div class="uk-width-2-3@m">
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
<!-- TODO: Maybe maximum 6 in this view? -->
<div *ngFor="let affiliation of affiliations.slice(0,6);">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" class="uk-link-reset">
<ng-container *ngTemplateOutlet="card; context: {organization: affiliation, fullView: false}"></ng-container>
</a>
<span *ngIf="!affiliation.website_url" class="uk-link-reset">
<ng-container *ngTemplateOutlet="card; context: {organization: affiliation, fullView: false}"></ng-container>
</span>
</div>
</div>
</div>
</div>
<!-- TOOD: Refactor the rest of the !longView for community page - curators dropdown affilations! -->
<!-- <h3 *ngIf="communityFirstPage" class="uk-margin-large-top uk-text-center uk-text-muted uk-text-bold">
Supporting Organizations
<!-- ({{affiliations.length}})-->
</h3>
<div *ngIf="!longView"
[attr.uk-slider]="sliderOptions">
<div [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1">
[attr.uk-slider]="sliderOptions">
<div [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1">
<div class="uk-slider-container uk-padding-small uk-margin-remove-bottom uk-align-center uk-width-1-1 ">
<ul class="uk-slider-items uk-grid-small uk-flex uk-flex-center" uk-height-match="target: > li > .affiliation" uk-grid>
<li *ngFor="let affiliation of affiliations"
@ -62,13 +87,13 @@
(affiliationsInSlider == 2?'uk-width-1-2':'uk-width-small')">
<div
class="uk-card portalSearchCard affiliation uk-flex uk-flex-middle uk-flex-center uk-padding-small"
[attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
[attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix"
class="affiliation-content">
class="">
<ng-container
*ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
</a>
<span *ngIf="!affiliation.website_url" class="affiliation-content">
<span *ngIf="!affiliation.website_url" class="">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
</span>
</div>
@ -76,12 +101,12 @@
</ul>
</div>
<a *ngIf="arrows"
class="uk-position-center-left-out " [class.coloredBackground]="communityFirstPage"
href="#" uk-slidenav-previous uk-slider-item="previous"></a>
class="uk-position-center-left-out " [class.coloredBackground]="communityFirstPage"
href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a *ngIf=" arrows"
class="uk-position-center-right-out "
[class.coloredBackground]="communityFirstPage"
href="#" uk-slidenav-next uk-slider-item="next"></a>
class="uk-position-center-right-out "
[class.coloredBackground]="communityFirstPage"
href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
<div *ngIf="communityFirstPage">
@ -89,7 +114,8 @@
<span>See Details</span>
<span uk-icon="chevron-right"></span>
</a>
</div>
</div> -->
</ng-container>
<!--<div *ngIf="affiliations.length == 0 && longView" class="uk-animation-fade uk-alert uk-alert-primary" role="alert">-->

View File

@ -13,7 +13,26 @@ import {properties} from "../../environments/environment";
@Component({
selector: 'affiliations',
templateUrl: './affiliations.component.html'
templateUrl: './affiliations.component.html',
styles: [`
.affiliationCard {
width: 260px !important;
height: 262px !important;
}
.affiliation-logo img {
max-height: 60px !important;
}
.supportingOrganizations img, svg {
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition-duration: 0.3s;
}
.supportingOrganizations:hover img, svg {
-webkit-filter: grayscale(0);
filter: grayscale(0);
transition-duration: 0.3s;
}
`]
})
export class AffiliationsComponent {
@Input() getAffiliationsFromAPI: boolean = false;

View File

@ -1,6 +1,6 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<ng-container *ngIf="longView else shortView">
<div style=" min-height: 650px;">
<div style="min-height: 650px;">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>

View File

@ -10,20 +10,10 @@ 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-bottom">Supporting <br> Organizations</h1>
<h1 class="uk-margin-top uk-margin-large-bottom">Supporting <br> Organizations</h1>
<html-page description="Organizations" pageTitle="Supporting Organizations"></html-page>
<affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations>
</div>
<!-- <div class="uk-section tm-middle uk-padding-remove-top" id="tm-main">
<breadcrumbs [addClass]="'uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top'" [breadcrumbs]="breadcrumbs"></breadcrumbs>
<div class="uk-container uk-container-large uk-margin-bottom">
<h4 class="uk-margin-medium-top uk-margin-bottom">Supporting Organizations</h4>
<html-page description="Organizations" pageTitle="Supporting Organizations"></html-page>
<affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations>
</div>
</div> -->
`
})
export class OrganizationsPageComponent {

@ -1 +1 @@
Subproject commit ba70aaa12e83b281dfe51ac29130a51591702dcc
Subproject commit 0bd6b3cfb1b1d30c276693d06a2c7234f0df5d0b

View File

@ -153,7 +153,7 @@ export class OpenaireSearchDataprovidersComponent {
for(let result of data){
let sResult:SearchResult = new SearchResult();
sResult.id = result.openaireId;
sResult.title = {name:"", accessMode: null, sc39: null};
sResult.title = {name:"", accessMode: null};
sResult.title.name = result.officialname?result.officialname:result.name;
results.push(sResult);
}

View File

@ -198,7 +198,7 @@ export class OpenaireSearchProjectsComponent {
for(let result of data){
let sResult:SearchResult = new SearchResult();
sResult.id = result.openaireId;
sResult.title = {name:"", accessMode: null, sc39: null};
sResult.title = {name:"", accessMode: null};
sResult.title.name = result.name?result.name:result.acronym;
sResult.acronym = result['acronym'];
sResult.code = result['grantId'];

View File

@ -1,9 +1,7 @@
import {Component, Input} from '@angular/core';
import {Component} from '@angular/core';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
import {ActivatedRoute, Router} from "@angular/router";
import {CommunityService} from "../openaireLibrary/connect/community/community.service";
import {ConnectHelper} from "../openaireLibrary/connect/connectHelper";
import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
@ -18,39 +16,44 @@ import {Subscriber, Subscription} from "rxjs";
selector: 'subjects',
template: `
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<div style=" min-height: 650px;" class="">
<div class="uk-section uk-padding-remove-top uk-padding-remove-bottom">
<breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top"
[breadcrumbs]="breadcrumbs"></breadcrumbs>
<div class="uk-container uk-container-large">
<div *ngIf="showLoading">
<div class="uk-animation-fade uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
</div>
<div *ngIf="!showLoading">
<h4 class="uk-margin-bottom uk-margin-medium-top">
<span>Subjects</span>
</h4>
<div style=" min-height: 250px;" class="white-box-with-border uk-padding uk-list">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<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>
</a>
<span *ngIf="i < subjects.length-1">, </span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div style="min-height: 650px;">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-small">
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
</div>
<div *ngIf="!showLoading">
<h1 class="uk-margin-top">
Subjects
</h1>
<div *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[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>
</a>
<span *ngIf="i < subjects.length-1">, </span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
`
})
export class SubjectsComponent {
@ -65,7 +68,7 @@ export class SubjectsComponent {
public url: string = null;
public pageTitle: string = "Subjects";
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'about - subjects'}];
public breadcrumbs: Breadcrumb[] = [{name: 'Home', route: '/'}, {name: 'About - Subjects'}];
subs: Subscription[] = [];

@ -1 +1 @@
Subproject commit 828b3c497335f14e6a4e8e91dad2577ee7d54fdd
Subproject commit b261d0f8459d21deddefc60765b3013815f1b865

@ -1 +1 @@
Subproject commit fb8db8d1d2bba0f68b52dc98996fd9f979c8aa63
Subproject commit bd15bab85dde4018155a631d9cf6ecdfe98ebe9a