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

[Trunk | Connect]: 

1. community.component: 
	a. [Bug fix] Add 'uk-tab' and 'uk-active' class to load css without javascript enabled.
	b. In tab 'Summary', reorder information - description goes on top.
	c. Cut description in first 500 characters, if length > 600, otherwise do not cut it.
2. curators.component: Add 'view all/ less' functionality.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@58653 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-05-08 13:02:11 +00:00
parent 77ed6973b1
commit 6af7ae4797
4 changed files with 54 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -253,8 +253,8 @@
<!-- </div>-->
<div>
<div class="main-tabs-div">
<ul uk-tab class="uk-text-truncate main-tabs uk-margin-remove uk-child-width-expand uk-width-3-4" uk-switcher="connect: .main-tabs-content">
<li class="uk-padding-remove">
<ul uk-tab class="uk-tab uk-text-truncate main-tabs uk-margin-remove uk-child-width-expand uk-width-3-4" uk-switcher="connect: .main-tabs-content">
<li class="uk-padding-remove uk-active">
<a class="uk-width-1-1 uk-height-1-1">
<div class="tab-header">Summary</div>
</a>
@ -297,9 +297,32 @@
</ul>
</div>
<ul class="uk-switcher main-tabs-content">
<li>
<li class="uk-active">
<div *ngIf="community" class="uk-grid uk-margin-remove">
<div class="uk-width-expand uk-padding uk-inline">
<div *ngIf="community.description"
class="uk-margin-bottom ">
<!-- [class]="'uk-margin-bottom '+ ((subscribeComponent && subscribeComponent.subscribers > 0) || community.date ? 'uk-margin-top' : '')">-->
<div *ngIf="!showAllDescription" class="">
{{community.description.substring(0, thresholdDescription)}}{{community.description.length > thresholdDescription ? '...' : ''}}</div>
<div *ngIf="showAllDescription" class="uk-overflow-auto">
<div class="uk-height-max-medium">{{community.description}}</div>
</div>
<!-- uk-padding uk-padding-remove-top uk-position-bottom-right-->
<div *ngIf="!showAllDescription && community.description.length > thresholdDescription "
class="uk-animation-fade uk-margin-small-top uk-text-right">
<a (click)="showAllDescription = !showAllDescription;">Read more
</a>
</div>
<!-- uk-padding uk-padding-remove-top uk-position-bottom-right-->
<div *ngIf="showAllDescription"
class="uk-animation-fade uk-margin-small-top uk-text-right">
<a (click)="showAllDescription = !showAllDescription;">
Read less
</a>
</div>
</div>
<div *ngIf="isRouteEnabled('/curators')" [class]="community.managers ? 'uk-margin-small-bottom' : ''">
<curators [longView]="false" [managers]="community.managers" [communityId]="communityId"></curators>
</div>
@ -358,27 +381,6 @@
</svg>
</span>
</div>
<div *ngIf="community.description"
[class]="'uk-margin-bottom '+ ((subscribeComponent && subscribeComponent.subscribers > 0) || community.date ? 'uk-margin-top' : '')">
<div class="uk-text-muted">Description</div>
<div *ngIf="!showAllDescription" class="">
{{community.description.substring(0, thresholdDescription)}}{{community.description.length > thresholdDescription ? '...' : ''}}</div>
<div *ngIf="showAllDescription" class="uk-overflow-auto">
<div class="uk-height-max-medium">{{community.description}}</div>
</div>
<div *ngIf="!showAllDescription && community.description.length > thresholdDescription "
class="uk-animation-fade uk-margin-small-top uk-padding uk-padding-remove-top uk-position-bottom-right">
<a (click)="showAllDescription = !showAllDescription;">Read more
</a>
</div>
<div *ngIf="showAllDescription"
class="uk-animation-fade uk-margin-small-top uk-padding uk-padding-remove-top uk-position-bottom-right">
<a (click)="showAllDescription = !showAllDescription;">
Read less
</a>
</div>
</div>
</div>
<div *ngIf="isRouteEnabled('/subjects') && community.subjects && community.subjects.length > 0"
class="uk-width-1-3 uk-padding right-column uk-inline">

7
src/app/community/community.component.ts
View File

@ -65,7 +65,8 @@ export class CommunityComponent {
zenodoCommunityIdS = [];
showAllSubjects = false;
showAllDescription = false;
public thresholdDescription: number = 550;
public thresholdDescription: number = 500;
public descriptionDiff: number = 100;
subscribers: number = 0;
@ -146,6 +147,10 @@ export class CommunityComponent {
HelperFunctions.scroll();
}
this.community = community;
if(community.description != null && (community.description.length - this.thresholdDescription <= this.descriptionDiff)) {
this.thresholdDescription = community.description.length;
}
if (this.properties.environment == "development") {
this.params = {communityId: community.communityId};
}

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

@ -84,12 +84,13 @@
<!-- </div>-->
</ng-container>
<ng-template #shortView>
<div class="uk-grid">
<span *ngIf=" curators && curators.length > 0" class="lowOpacityColor uk-text-muted uk-width-auto">
<div *ngIf=" curators && curators.length > 0" class="uk-grid">
<span class="lowOpacityColor uk-text-muted uk-width-auto">
Curated by:
</span>
<span class="uk-width-expand uk-padding-remove space">
<span *ngFor="let curator of curators let i=index;">
<div class="uk-width-expand uk-padding-remove uk-overflow-auto">
<div class="uk-height-max-medium">
<span *ngFor="let curator of curators.slice(0,numberOfCurators) let i=index;" class="space uk-inline-block uk-text-top">
<!-- <span>-->
<!-- <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"-->
<!-- src="{{downloadUrl + curator.photo}}" alt="Curator Photo">-->
@ -97,7 +98,7 @@
<!-- src="../../assets/common-assets/curator-default.png" alt="Curator Photo">-->
<!-- </span>-->
<a class="uk-inline-block">
<a class="">
<span class="user-circle-background">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path
@ -105,7 +106,7 @@
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
</span>
{{curator.name}}
<span class="space">{{curator.name}}</span>
</a>
<span class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
uk-dropdown="pos: bottom-left; mode:click; ">
@ -141,8 +142,18 @@
</span>
</span>
</span>
<span *ngIf="i < curators.length-1">, </span>
<span *ngIf="i < curators.length-1 && i < numberOfCurators-1">, </span>
</span>
</span>
<span *ngIf="numberOfCurators == curatorsLimit && curators.length > curatorsLimit"> ... </span>
</div>
</div>
<div *ngIf="numberOfCurators == curatorsLimit && curators.length > curatorsLimit" class="uk-width-1-1 uk-text-right uk-margin-small-top">
<a (click)="numberOfCurators = curators.length;">
View all {{curators.length | number}} curators
</a>
</div>
<div *ngIf="numberOfCurators > curatorsLimit" class="uk-width-1-1 uk-text-right uk-margin-small-top">
<a (click)="numberOfCurators = curatorsLimit;">View less curators</a>
</div>
</div>
</ng-template>

3
src/app/curators/curators.component.ts
View File

@ -29,6 +29,9 @@ export class CuratorsComponent {
public curators: Curator[];
public curatorsLimit: number = 5;
public numberOfCurators: number = 5;
public showMore = [];
public maxCharacters = 500;