Landing tabs: title to appear when tabs stick to top, add css for the sections, css for featured tabs
This commit is contained in:
argirok
parent
4bc50b8b4f
commit
51efcfc19c
|
|
@ -88,13 +88,12 @@
|
|||
</div>
|
||||
<div *ngIf="dataProviderInfo != null">
|
||||
|
||||
<!-- *ngIf="numberOfTabs > 0; else loadingBlock"-->
|
||||
<div class="main-tabs-div" uk-sticky="offset: 0; animation: uk-animation-slide-top;"
|
||||
<div id="main-tabs-div" uk-sticky="offset: 0; animation: uk-animation-slide-top;"
|
||||
cls-active="uk-background-muted">
|
||||
<div class="uk-padding">
|
||||
<showTitle [titleName]="dataProviderInfo.title.name" classNames="uk-margin-remove-bottom"></showTitle>
|
||||
<div class="uk-padding uk-margin-large-top">
|
||||
<showTitle *ngIf="stickyHeader" [titleName]="dataProviderInfo.title.name" classNames="uk-margin-remove-bottom"></showTitle>
|
||||
</div>
|
||||
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" >
|
||||
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [(isSticky)]="stickyHeader">
|
||||
|
||||
<my-tab
|
||||
[tabTitle]="'Summary'" [tabId]="'summary'" [active]="true">
|
||||
|
|
@ -108,11 +107,7 @@
|
|||
[tabTitle]="'Content Providers'" [tabNumber]="fetchDataproviders.searchUtils.totalResults"
|
||||
[tabId]="'datasources'" >
|
||||
</my-tab>
|
||||
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|
||||
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
|
||||
[tabTitle]="'Related Content Providers'" [tabId]="'relatedDatasources'"
|
||||
>
|
||||
</my-tab>
|
||||
|
||||
<my-tab *ngIf="fetchPublications.searchUtils.totalResults > 0"
|
||||
[tabTitle]="'Publications'" [tabNumber]="fetchPublications.searchUtils.totalResults"
|
||||
[tabId]="'publications'" >
|
||||
|
|
@ -130,6 +125,11 @@
|
|||
[tabTitle]="'Other Research'" [tabNumber]="fetchOrps.searchUtils.totalResults"
|
||||
[tabId]="'other'">
|
||||
|
||||
</my-tab>
|
||||
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|
||||
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
|
||||
[tabTitle]="'Related Content Providers'" [tabId]="'relatedDatasources'"
|
||||
>
|
||||
</my-tab>
|
||||
<my-tab *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|
||||
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)"
|
||||
|
|
@ -140,9 +140,9 @@
|
|||
|
||||
|
||||
</div>
|
||||
<div id="landing-sections">
|
||||
<!--Summary-->
|
||||
<div #summary_tab>
|
||||
<div id="summary" class="uk-grid uk-margin-remove landing-section">
|
||||
<div id="summary" class="uk-grid uk-margin-remove landing-section">
|
||||
<div *ngIf="hasPrimaryInfo || (!aggregationStatusIsInitialized || hasAggregationStatusInfo)"
|
||||
class="uk-width-expand uk-padding uk-inline">
|
||||
<!-- Description -->
|
||||
|
|
@ -291,7 +291,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Projects-->
|
||||
<ng-container *ngIf="fetchProjects.searchUtils.totalResults > 0">
|
||||
<div id="projects" class="uk-grid uk-margin-remove landing-section">
|
||||
|
|
@ -318,23 +317,7 @@
|
|||
<!-- <div class="uk-width-1-3@m uk-padding right-column"></div>-->
|
||||
</div>
|
||||
</ng-container>
|
||||
<!--Related Content Providers-->
|
||||
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|
||||
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
|
||||
<div id="relatedDatasources" class="uk-grid uk-margin-remove landing-section">
|
||||
<div class="uk-width-expand uk-padding">
|
||||
<relatedDatasourcesTab
|
||||
[dataproviderId]="datasourceId"
|
||||
[results]="dataProviderInfo.relatedDatasources"
|
||||
[loading]="loadingRelatedDatasources"
|
||||
[fetchResults]="fetchAggregatorsResults"
|
||||
[collectedFromName]="dataProviderInfo.title.name"
|
||||
[properties]=properties
|
||||
[modal]="relatedDatasourcesModal">
|
||||
</relatedDatasourcesTab>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!--Publications-->
|
||||
<ng-container *ngIf="fetchPublications.searchUtils.totalResults > 0">
|
||||
<div id="publications" class="uk-grid uk-margin-remove landing-section">
|
||||
|
|
@ -350,7 +333,7 @@
|
|||
</ng-container>
|
||||
<!--Research Data-->
|
||||
<ng-container *ngIf="fetchDatasets.searchUtils.totalResults > 0">
|
||||
<div id="datasets" class="uk-grid uk-margin-remove">
|
||||
<div id="datasets" class="uk-grid uk-margin-remove landing-section">
|
||||
<div class="uk-width-expand uk-padding">
|
||||
<search-tab [fetch]="fetchDatasets" resultType="dataset"
|
||||
[params]="getParamsForSearchLink('datasets')"
|
||||
|
|
@ -363,7 +346,7 @@
|
|||
</ng-container>
|
||||
<!--Software-->
|
||||
<ng-container *ngIf="fetchSoftware.searchUtils.totalResults > 0">
|
||||
<div id="software" class="uk-grid uk-margin-remove">
|
||||
<div id="software" class="uk-grid uk-margin-remove landing-section">
|
||||
<div class="uk-width-expand uk-padding">
|
||||
<search-tab [fetch]="fetchSoftware" resultType="software"
|
||||
[params]="getParamsForSearchLink('software')"
|
||||
|
|
@ -376,7 +359,7 @@
|
|||
</ng-container>
|
||||
<!--Other-->
|
||||
<ng-container *ngIf="fetchOrps.searchUtils.totalResults > 0">
|
||||
<div id="other" class="uk-grid uk-margin-remove">
|
||||
<div id="other" class="uk-grid uk-margin-remove landing-section">
|
||||
<div class="uk-width-expand uk-padding">
|
||||
<search-tab [fetch]="fetchOrps" resultType="other"
|
||||
[params]="getParamsForSearchLink('other')"
|
||||
|
|
@ -387,11 +370,28 @@
|
|||
<!-- <div class="uk-width-1-3@m uk-padding right-column"></div>-->
|
||||
</div>
|
||||
</ng-container>
|
||||
<!--Related Content Providers-->
|
||||
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|
||||
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
|
||||
<div id="relatedDatasources" class="uk-grid uk-margin-remove landing-section">
|
||||
<div class="uk-width-expand uk-padding">
|
||||
<relatedDatasourcesTab
|
||||
[dataproviderId]="datasourceId"
|
||||
[results]="dataProviderInfo.relatedDatasources"
|
||||
[loading]="loadingRelatedDatasources"
|
||||
[fetchResults]="fetchAggregatorsResults"
|
||||
[collectedFromName]="dataProviderInfo.title.name"
|
||||
[properties]=properties
|
||||
[modal]="relatedDatasourcesModal">
|
||||
</relatedDatasourcesTab>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!--Statistics-->
|
||||
<ng-container *ngIf="(fetchPublications.searchUtils.totalResults > 0 || fetchDatasets.searchUtils.totalResults > 0
|
||||
|| fetchSoftware.searchUtils.totalResults > 0 || fetchOrps.searchUtils.totalResults > 0)">
|
||||
|
||||
<div id="statistics" class="uk-width-expand uk-padding">
|
||||
<div id="statistics" class="uk-width-expand uk-padding landing-section">
|
||||
<errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status,
|
||||
fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"
|
||||
[type]="'statistics'" tab_error_class=true></errorMessages>
|
||||
|
|
@ -408,12 +408,7 @@
|
|||
</div>
|
||||
|
||||
</ng-container>
|
||||
<!-- <ng-template #loadingBlock>-->
|
||||
<!-- <div *ngIf="!tabsAreInitialized" class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert">-->
|
||||
<!-- <span class="loading-gif uk-align-center" ></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </ng-template>-->
|
||||
|
||||
</div>
|
||||
<div class="uk-margin-small-top uk-flex">
|
||||
<!-- Last Index Info-->
|
||||
<div class="uk-width-2-3@m uk-width-1-2">
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import {TabComponent} from "../../utils/tabs/tab.component";
|
|||
@Component({
|
||||
selector: 'dataprovider',
|
||||
templateUrl: 'dataProvider.component.html',
|
||||
|
||||
})
|
||||
|
||||
export class DataProviderComponent {
|
||||
|
|
@ -112,7 +113,7 @@ export class DataProviderComponent {
|
|||
|
||||
subscriptions = [];
|
||||
properties: EnvProperties = properties;
|
||||
|
||||
stickyHeader: boolean = false;
|
||||
constructor(private _dataproviderService: DataProviderService,
|
||||
private _piwikService: PiwikService,
|
||||
private route: ActivatedRoute,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {
|
|||
Component,
|
||||
ContentChildren,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
HostListener, Input,
|
||||
Output,
|
||||
QueryList,
|
||||
} from '@angular/core';
|
||||
|
|
@ -16,8 +16,7 @@ import {TabComponent} from './tab.component';
|
|||
@Component({
|
||||
selector: 'my-tabs',
|
||||
template: `
|
||||
<div class="uk-grid uk-margin-remove-left">
|
||||
|
||||
<div id="mytabs" class="uk-grid uk-margin-remove-left">
|
||||
<div class="uk-margin-medium-right uk-padding-small uk-width-expand uk-padding-remove-bottom" >
|
||||
<div class=" uk-width-1-1" uk-slider="finite: true">
|
||||
<div class="uk-position-relative " >
|
||||
|
|
@ -37,13 +36,11 @@ import {TabComponent} from './tab.component';
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<a class="uk-position-center-left-out" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
|
||||
<a class="uk-position-center-right-out" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
||||
|
|
@ -56,9 +53,10 @@ import {TabComponent} from './tab.component';
|
|||
<div class="uk-width-small uk-padding-small uk-padding-remove-bottom">
|
||||
<ul class="uk-tab">
|
||||
<li [ngClass]="tab.customClass" (click)="selectTab(tab)" [class.uk-active]="tab.active" >
|
||||
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
|
||||
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
|
||||
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>
|
||||
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center featuredTab" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
|
||||
<!--<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
|
||||
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>-->
|
||||
<span *ngIf="tab.tabId=='statistics'" class="material-icons">bar_chart</span>
|
||||
<div>{{tab.title}}</div>
|
||||
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
|
||||
</a>
|
||||
|
|
@ -69,13 +67,33 @@ import {TabComponent} from './tab.component';
|
|||
</ng-container>
|
||||
</div>
|
||||
|
||||
`
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
#mytabs .uk-tab::before {
|
||||
border-bottom: none;
|
||||
}
|
||||
#mytabs::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
right: 0;
|
||||
border-bottom: 2px solid #eaeaea;
|
||||
}
|
||||
.featuredTab, .uk-active a.featuredTab{
|
||||
color:#E96439 !important;
|
||||
}
|
||||
`
|
||||
]
|
||||
})
|
||||
export class TabsComponent implements AfterContentInit {
|
||||
|
||||
public customClass: string;
|
||||
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
|
||||
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
|
||||
@Input() isSticky:boolean;
|
||||
@Output() isStickyChange :EventEmitter<boolean> = new EventEmitter();
|
||||
public selected: string;
|
||||
disableScroll = false;
|
||||
@HostListener("window:scroll", [])
|
||||
|
|
@ -109,6 +127,14 @@ export class TabsComponent implements AfterContentInit {
|
|||
}
|
||||
}
|
||||
scroll(){
|
||||
let tabDistanceFromCurrentViewTop = document.getElementById("main-tabs-div") ? document.getElementById("main-tabs-div").getBoundingClientRect().top : null;
|
||||
if((tabDistanceFromCurrentViewTop <= 0)){
|
||||
this.isStickyChange.emit(true);
|
||||
this.isSticky =true;
|
||||
}else if(!(tabDistanceFromCurrentViewTop <= 0)){
|
||||
this.isStickyChange.emit(false);
|
||||
this.isSticky =false;
|
||||
}
|
||||
if(this.disableScroll){
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue