Revision 60892
Added by Argiro Kokogiannaki about 3 years ago
| affiliations.component.html | ||
|---|---|---|
| 2 | 2 |
|
| 3 | 3 |
<ng-template #card let-organization="organization" let-fullView="fullView"> |
| 4 | 4 |
<div class="affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal" |
| 5 |
[ngClass]="(!fullView)?'uk-card-body':'uk-card-media-top uk-padding-small'">
|
|
| 6 |
<div class="uk-align-center"> |
|
| 5 |
[ngClass]="(!fullView)?'':'uk-card-media-top uk-padding-small'"> |
|
| 6 |
<div class="uk-align-center uk-margin-remove-bottom">
|
|
| 7 | 7 |
<img *ngIf="organization.logo_url != null && organization.logo_url != '' " |
| 8 | 8 |
[src]="organization.logo_url | urlPrefix" |
| 9 | 9 |
alt="{{(organization.name)?organization.name:''}} logo">
|
| ... | ... | |
| 52 | 52 |
<!-- ({{affiliations.length}})-->
|
| 53 | 53 |
</h3> |
| 54 | 54 |
|
| 55 |
<div *ngIf="!longView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"
|
|
| 55 |
<div *ngIf="!longView" |
|
| 56 | 56 |
[attr.uk-slider]="sliderOptions"> |
| 57 |
<div |
|
| 58 |
[class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider"> |
|
| 59 |
<ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .affiliation" uk-grid> |
|
| 60 |
<li *ngFor="let affiliation of affiliations" |
|
| 61 |
[class]="'affiliation-element uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)"> |
|
| 62 |
<div class="affiliation uk-flex uk-flex-middle uk-flex-center uk-padding-small" |
|
| 63 |
[attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'"> |
|
| 64 |
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" |
|
| 65 |
class="affiliation-content"> |
|
| 66 |
<ng-container |
|
| 67 |
*ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
|
|
| 68 |
</a> |
|
| 69 |
<span *ngIf="!affiliation.website_url" class="affiliation-content"> |
|
| 70 |
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
|
|
| 71 |
</span> |
|
| 72 |
</div> |
|
| 73 |
</li> |
|
| 74 |
</ul> |
|
| 57 |
<div [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"> |
|
| 58 |
<div class="uk-slider-container uk-padding-small uk-margin-remove-bottom uk-align-center uk-width-1-1 "> |
|
| 59 |
<ul class="uk-slider-items uk-grid-small uk-flex uk-flex-center" uk-height-match="target: > li > .affiliation" uk-grid> |
|
| 60 |
<li *ngFor="let affiliation of affiliations" |
|
| 61 |
[class]="'affiliation-element ' + |
|
| 62 |
(affiliationsInSlider == 2?'uk-width-1-2':'uk-width-small')"> |
|
| 63 |
<div |
|
| 64 |
class="uk-card portalSearchCard affiliation uk-flex uk-flex-middle uk-flex-center uk-padding-small" |
|
| 65 |
[attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'"> |
|
| 66 |
<a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url | urlPrefix" |
|
| 67 |
class="affiliation-content"> |
|
| 68 |
<ng-container |
|
| 69 |
*ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
|
|
| 70 |
</a> |
|
| 71 |
<span *ngIf="!affiliation.website_url" class="affiliation-content"> |
|
| 72 |
<ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
|
|
| 73 |
</span> |
|
| 74 |
</div> |
|
| 75 |
</li> |
|
| 76 |
</ul> |
|
| 77 |
</div> |
|
| 78 |
<a *ngIf="arrows" |
|
| 79 |
class="uk-position-center-left-out " [class.coloredBackground]="communityFirstPage" |
|
| 80 |
href="#" uk-slidenav-previous uk-slider-item="previous"></a> |
|
| 81 |
<a *ngIf=" arrows" |
|
| 82 |
class="uk-position-center-right-out " |
|
| 83 |
[class.coloredBackground]="communityFirstPage" |
|
| 84 |
href="#" uk-slidenav-next uk-slider-item="next"></a> |
|
| 75 | 85 |
</div> |
| 76 |
<!-- [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)"--> |
|
| 77 |
<!-- class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"--> |
|
| 78 |
<a *ngIf="(affiliations.length > affiliationsInSlider) && arrows" |
|
| 79 |
class="uk-position-center-left uk-padding uk-height-1-1 uk-flex" [class.coloredBackground]="communityFirstPage" |
|
| 80 |
href="#" uk-slidenav-previous uk-slider-item="previous"></a> |
|
| 81 |
<a *ngIf="(affiliations.length > affiliationsInSlider) && arrows" |
|
| 82 |
class="uk-position-center-right uk-padding uk-height-1-1 uk-flex" [class.coloredBackground]="communityFirstPage" |
|
| 83 |
href="#" uk-slidenav-next uk-slider-item="next"></a> |
|
| 84 | 86 |
</div> |
| 85 | 87 |
<div *ngIf="communityFirstPage"> |
| 86 |
<a routerLink="/organizations" class="uk-align-right portal-link uk-flex uk-flex-middle"> |
|
| 88 |
<a routerLink="/organizations" class="uk-align-right portal-link uk-flex uk-flex-middle uk-margin-top">
|
|
| 87 | 89 |
<span>See Details</span> |
| 88 | 90 |
<span uk-icon="chevron-right"></span> |
| 89 | 91 |
</a> |
Also available in: Unified diff
[Connect | Trunk]
- Update affiliations layout
- Use customization class to create the css
- Create preview/ demo component
- Clean up piwik helper file
- updates on customization css