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

[Trunk | Connect]: affiliations.component.html: Change slider: arrows always visible, with large padding and height-1-1 - make shadow of cards visible (remove uk-slider-container class). 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56139 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2019-06-20 13:48:45 +00:00
parent d3d5bba9f5
commit 53b95f324b
1 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,25 +37,32 @@
<div *ngIf="communityFirstPage" class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
Related Organizations ({{affiliations.length}})
</div>
<div *ngIf="!fullView" [class]="'uk-position-relative uk-visible-toggle uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider" 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-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)">
<div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center"
[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>
<span *ngIf="!affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
</span>
</div>
</li>
</ul>
<div *ngIf="!fullView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1" [attr.uk-slider]="sliderOptions">
<div [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
<ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .uk-card" uk-grid>
<li *ngFor="let affiliation of affiliations"
[class]="'affiliation-element uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)">
<div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center"
[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>
<span *ngIf="!affiliation.website_url" class="affiliation-content">
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
</span>
</div>
</li>
</ul>
</div>
<!-- [class]="'uk-hidden-hover uk-position-center-left uk-padding uk-height-1-1 uk-flex uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)"-->
<!-- class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"-->
<a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
class="uk-position-center-left uk-padding uk-height-1-1 uk-flex"
href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"
href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<div *ngIf="communityFirstPage" [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
<a routerLink="/organizations" class="uk-align-right uk-link">