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

[Trunk | Connect]: 

1. community.component: Check if organizations routing is enabled in order to show it or not.
2. affiliations.component: Add loading message | Align affiliation cards in center of list | Align image alt in center | Hide tooltip if no name.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56037 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-06-10 15:48:29 +00:00
parent b31ab356f5
commit a98a3736e8
3 changed files with 25 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<ng-template #card let-organization="organization" let-fullView="fullView">
<div class="uk-card-media-top affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-small">
<img *ngIf= "organization.logo_url != null && organization.logo_url != '' "
<img *ngIf= "organization.logo_url != null && organization.logo_url != '' " class="uk-text-center"
src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo" width="80" height="80">
<span *ngIf= "organization.logo_url == null || organization.logo_url == '' "class="uk-icon uk-padding-small">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" 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>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" 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 *ngIf="organization.name && fullView" class="uk-card-body uk-padding-small">
<span class="uk-text-bold">{{organization.name.slice(0,100)}}</span><span *ngIf="organization.name.length > 100">...</span>
@ -12,6 +12,9 @@
</ng-template>
<ng-container *ngIf="affiliations.length > 0">
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="fullView"
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"
@ -31,49 +34,15 @@
</div>
</div>
<!-- <div uk-slider="center: true">-->
<!-- <div class="uk-position-relative uk-slider-container uk-visible-toggle">-->
<!-- <ul class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-5@m uk-grid" uk-height-match="target: > li > .uk-card">-->
<!-- <li *ngFor="let organization of organizations">-->
<!-- <div class=" uk-card uk-card-default uk-padding-small uk-flex uk-flex-middle uk-flex-center">-->
<!-- <a *ngIf="organization.website_url" target="_blank" [href]="organization.website_url" class="affiliation-content">-->
<!-- <ng-container *ngTemplateOutlet="card; context: { organization: organization}"></ng-container>-->
<!-- </a>-->
<!-- <span *ngIf="!organization.website_url" class="affiliation-content">-->
<!-- <ng-container *ngTemplateOutlet="card; context: { organization: organization}"></ng-container>-->
<!-- </span>-->
<!-- </div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <a class="uk-position-center-left uk-position-small uk-hidden-hover" uk-slidenav-previous uk-slider-item="previous"></a>-->
<!-- <a class="uk-position-center-right uk-position-small uk-hidden-hover" uk-slidenav-next uk-slider-item="next"></a>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div *ngIf="(!fullView && affiliations.length <= 2)" >-->
<!-- <div class="uk-grid-small" uk-grid uk-height-match="target: > .uk-card">-->
<!-- <ng-container *ngFor="let affiliation of affiliations" class="">-->
<!-- <div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center uk-margin-left"-->
<!-- [attr.uk-tooltip]="affiliation.name">-->
<!-- <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">-->
<!-- <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>-->
<!-- </a>-->
<!-- <span *ngIf="!affiliation.website_url" class="affiliation-content">-->
<!-- <ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>-->
<!-- </span>-->
<!-- </div>-->
<!-- </ng-container>-->
<!-- </div>-->
<!-- </div>-->
<!-- uk-slider="center: true"-->
<div *ngIf="(!fullView)" class="uk-position-relative uk-visible-toggle" tabindex="-1" [attr.uk-slider]="sliderOptions">
<div *ngIf="communityFirstPage" class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
Related Organizations
</div>
<div *ngIf="!fullView" class="uk-position-relative uk-visible-toggle" tabindex="-1" [attr.uk-slider]="sliderOptions">
<ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .uk-card" uk-grid>
<li *ngFor="let affiliation of affiliations" [class]="'uk-width-1-'+affiliationsInSlider">
<li *ngFor="let affiliation of affiliations"
[class]="'uk-align-center uk-margin-remove-top uk-margin-remove-bottom uk-width-1-'+affiliationsInSlider">
<div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center"
[attr.uk-tooltip]="affiliation.name">
[attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
</a>

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

@ -13,11 +13,14 @@ import {ConnectHelper} from "../openaireLibrary/connect/connectHelper";
export class AffiliationsComponent {
@Input() getAffiliationsFromAPI: boolean = false;
@Input() fullView: boolean = false;
@Input() communityFirstPage: boolean = false;
@Input() affiliationsInSlider: number = 5;
@Input() affiliations: Affiliation[] = [];
@Input() sliderOptions = '';
@Input() arrows = true;
public showLoading: boolean = false;
communityId: string;
properties:EnvProperties;
@ -38,14 +41,17 @@ export class AffiliationsComponent {
this.properties = data.envSpecific;
if(this.getAffiliationsFromAPI) {
this.showLoading = true;
console.info("onInit: before affiliations");
this.affiliationService.initAffiliations(this.properties, this.properties.communityAPI + this.communityId + "/organizations");
this.affiliationService.affiliations.subscribe(
affiliations => {
this.affiliations = affiliations;
this.showLoading = false;
},
error => {
console.error("Affiliations Component: Error getting affiliations for community with id: "+this.communityId, error);
this.showLoading = false;
}
);
}

12
src/app/community/community.component.html
View File

@ -318,13 +318,13 @@
</div>
</div>
<div class="uk-section tm-middle uk-container uk-margin-top uk-padding-remove-top" id="">
<div class="uk-container uk-margin-bottom uk-grid">
<div class="uk-width-expand uk-padding-remove">
<affiliations [fullView]="false" [getAffiliationsFromAPI]="true"></affiliations>
<ng-container *ngIf=" isRouteEnabled('/organizations')">
<div class="uk-container uk-margin-bottom uk-grid">
<div class="uk-width-expand uk-padding-remove">
<affiliations [fullView]="false" [getAffiliationsFromAPI]="true" [communityFirstPage]="true"></affiliations>
</div>
</div>
</div>
</ng-container>
</div>
</div>