MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | new-theme]: In landing pages, title & tabs sticky even when bottom is in viewport | Other versions modals title updated | DMPs tab updated. 

1. dataProvider.component.html & project.component.html & resultLanding.component.html: Removed "shouldSticky" check from id="main-tabs-div" - title & tabs sticky even when bottom is in viewport.
2. dataProvider.component.ts & organization.component.ts & project.component.ts & resultLanding.component.ts: Commented shouldSticky and observer for bottom - title & tabs sticky even when bottom is in viewport.
3. organization.component.ts & resultLanding.component.ts: In modal for other versions, title updated without "of".
4. project.component.html: In <search-tab> for DMPs added resultType="DMPs" | Title in DMPs tab changed to Data Management Plans.
5. search-tab.component.ts: Moved <errorMessages> after tab title and <ng-content> | In method "getEntityName()" return "this.resultType" if exists and no other condition matches.
This commit is contained in:
Konstantina Galouni 2022-05-06 16:31:40 +03:00
parent b851b3e60b
commit 84cb6b6d96
8 changed files with 57 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
landingPages/dataProvider/dataProvider.component.html
View File

@ -127,7 +127,7 @@
</div> </div>
<div id="main-tabs-div" <div id="main-tabs-div"
[attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset" uk-sticky="bottom: true; media: @m" [attr.offset]="offset"
cls-active="active"> cls-active="active">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<showTitle *ngIf="stickyHeader" [titleName]="dataProviderInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle> <showTitle *ngIf="stickyHeader" [titleName]="dataProviderInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>

22
landingPages/dataProvider/dataProvider.component.ts
View File

@ -127,7 +127,7 @@ export class DataProviderComponent {
public graph_height: number = 0; public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; // public shouldSticky: boolean = true;
subscriptions = []; subscriptions = [];
properties: EnvProperties = properties; properties: EnvProperties = properties;
@ -191,16 +191,16 @@ export class DataProviderComponent {
ngAfterViewInit() { ngAfterViewInit() {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); // let bottom = document.getElementById('bottom');
if(bottom) { // if(bottom) {
let observer = new IntersectionObserver(entries => { // let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { // entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; // this.shouldSticky = !entry.isIntersecting;
}) // })
}); // });
this.subscriptions.push(observer); // this.subscriptions.push(observer);
observer.observe(bottom); // observer.observe(bottom);
} // }
if(this.graph_and_feedback) { if(this.graph_and_feedback) {
this.observeGraphAndFeedback(); this.observeGraphAndFeedback();
} }

24
landingPages/organization/organization.component.ts
View File

@ -107,7 +107,7 @@ export class OrganizationComponent {
public graph_height: number = 0; public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; // public shouldSticky: boolean = true;
subscriptions = []; subscriptions = [];
innerReportSubscriptions = []; innerReportSubscriptions = [];
@ -191,16 +191,16 @@ export class OrganizationComponent {
ngAfterViewInit() { ngAfterViewInit() {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); // let bottom = document.getElementById('bottom');
if(bottom) { // if(bottom) {
let observer = new IntersectionObserver(entries => { // let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { // entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; // this.shouldSticky = !entry.isIntersecting;
}) // })
}); // });
this.subscriptions.push(observer); // this.subscriptions.push(observer);
observer.observe(bottom); // observer.observe(bottom);
} // }
if(this.graph_and_feedback) { if(this.graph_and_feedback) {
this.observeGraphAndFeedback(); this.observeGraphAndFeedback();
} }
@ -652,7 +652,7 @@ export class OrganizationComponent {
this.deleteByInferenceOpened = true; this.deleteByInferenceOpened = true;
this.alertModalDeletedByInference.cancelButton = false; this.alertModalDeletedByInference.cancelButton = false;
this.alertModalDeletedByInference.okButton = false; this.alertModalDeletedByInference.okButton = false;
this.alertModalDeletedByInference.alertTitle = "Other versions of"; this.alertModalDeletedByInference.alertTitle = "Other versions";
this.alertModalDeletedByInference.open(); this.alertModalDeletedByInference.open();
} }

6
landingPages/project/project.component.html
View File

@ -237,7 +237,7 @@
</div> </div>
<div id="main-tabs-div" <div id="main-tabs-div"
[attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset" uk-sticky="bottom: true; media: @m" [attr.offset]="offset"
cls-active="active"> cls-active="active">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<showTitle *ngIf="stickyHeader" [titleName]="projectName" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle> <showTitle *ngIf="stickyHeader" [titleName]="projectName" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>
@ -346,8 +346,8 @@
</ng-container> </ng-container>
<ng-container> <ng-container>
<div id="dmps" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="dmps" class="landing-section uk-padding uk-padding-remove-horizontal">
<search-tab [fetch]="fetchDmps" customTitle="DMPs" <search-tab [fetch]="fetchDmps" customTitle="Data Management Plans"
[properties]="properties"> [properties]="properties" resultType="DMPs">
<div class="uk-margin-medium-top uk-margin-bottom uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"> <div class="uk-margin-medium-top uk-margin-bottom uk-width-1-1 uk-flex uk-flex-center uk-flex-middle">
<a *ngIf="fetchDmps.searchUtils.totalResults > 0" class="uk-button uk-button-text uk-margin-right" <a *ngIf="fetchDmps.searchUtils.totalResults > 0" class="uk-button uk-button-text uk-margin-right"
[queryParams]="getParamsForSearchLink('publications', 'Data Management Plan')" [queryParams]="getParamsForSearchLink('publications', 'Data Management Plan')"

22
landingPages/project/project.component.ts
View File

@ -154,7 +154,7 @@ export class ProjectComponent {
public graph_height: number = 0; public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; // public shouldSticky: boolean = true;
subscriptions = []; subscriptions = [];
properties: EnvProperties; properties: EnvProperties;
@ -233,16 +233,16 @@ export class ProjectComponent {
ngAfterViewInit() { ngAfterViewInit() {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); // let bottom = document.getElementById('bottom');
if(bottom) { // if(bottom) {
let observer = new IntersectionObserver(entries => { // let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { // entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; // this.shouldSticky = !entry.isIntersecting;
}) // })
}); // });
this.subscriptions.push(observer); // this.subscriptions.push(observer);
observer.observe(bottom); // observer.observe(bottom);
} // }
if(this.graph_and_feedback) { if(this.graph_and_feedback) {
this.observeGraphAndFeedback(); this.observeGraphAndFeedback();
} }

2
landingPages/result/resultLanding.component.html
View File

@ -164,7 +164,7 @@
</div> </div>
<div id="main-tabs-div" <div id="main-tabs-div"
[attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset" uk-sticky="bottom: true; media: @m" [attr.offset]="offset"
cls-active="active"> cls-active="active">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle> <showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>

24
landingPages/result/resultLanding.component.ts
View File

@ -130,7 +130,7 @@ export class ResultLandingComponent {
public graph_height: number = 0; public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; // public shouldSticky: boolean = true;
public viewAll: string = ""; public viewAll: string = "";
public noCommunities: boolean = false; public noCommunities: boolean = false;
@ -222,16 +222,16 @@ export class ResultLandingComponent {
ngAfterViewInit() { ngAfterViewInit() {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); // let bottom = document.getElementById('bottom');
if(bottom) { // if(bottom) {
let observer = new IntersectionObserver(entries => { // let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { // entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; // this.shouldSticky = !entry.isIntersecting;
}) // })
}); // });
this.subscriptions.push(observer); // this.subscriptions.push(observer);
observer.observe(bottom); // observer.observe(bottom);
} // }
if(this.graph_and_feedback) { if(this.graph_and_feedback) {
this.observeGraphAndFeedback(); this.observeGraphAndFeedback();
} }
@ -685,7 +685,7 @@ export class ResultLandingComponent {
this.deleteByInferenceOpened = true; this.deleteByInferenceOpened = true;
this.alertModalDeletedByInference.cancelButton = false; this.alertModalDeletedByInference.cancelButton = false;
this.alertModalDeletedByInference.okButton = false; this.alertModalDeletedByInference.okButton = false;
this.alertModalDeletedByInference.alertTitle = "Other versions of"; this.alertModalDeletedByInference.alertTitle = "Other versions";
this.alertModalDeletedByInference.open(); this.alertModalDeletedByInference.open();
} }

9
utils/tabs/contents/search-tab.component.ts
View File

@ -10,9 +10,6 @@ import {OpenaireEntities} from "../../properties/searchFields";
[queryParams]="params" [routerLink]="searchLinkToAdvancedPage"></a> [queryParams]="params" [routerLink]="searchLinkToAdvancedPage"></a>
<ng-container *ngIf="fetch.searchUtils.status != errorCodes.LOADING"> <ng-container *ngIf="fetch.searchUtils.status != errorCodes.LOADING">
<errorMessages *ngIf="resultType" [status]="[fetch.searchUtils.status]" [type]="getEntityName(resultType)"
tab_error_class=true></errorMessages>
<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-bottom"> <div class="uk-flex uk-flex-between uk-flex-middle uk-margin-bottom">
<div class="uk-text-meta uk-text-large uk-text-uppercase"> <div class="uk-text-meta uk-text-large uk-text-uppercase">
<span *ngIf="!customTitle && resultType"><span *ngIf="resultType != 'organization' && resultType != 'dataprovider' && resultType != 'project'">Recent</span> <span *ngIf="!customTitle && resultType"><span *ngIf="resultType != 'organization' && resultType != 'dataprovider' && resultType != 'project'">Recent</span>
@ -29,6 +26,10 @@ import {OpenaireEntities} from "../../properties/searchFields";
</div> </div>
<ng-content></ng-content> <ng-content></ng-content>
<errorMessages *ngIf="resultType" [status]="[fetch.searchUtils.status]" [type]="getEntityName(resultType)"
tab_error_class=true></errorMessages>
</ng-container> </ng-container>
<ng-container *ngIf="fetch.searchUtils.status == errorCodes.DONE"> <ng-container *ngIf="fetch.searchUtils.status == errorCodes.DONE">
@ -76,6 +77,8 @@ export class SearchTabComponent {
return OpenaireEntities.PROJECTS; return OpenaireEntities.PROJECTS;
} else if (entityType == "dataprovider") { } else if (entityType == "dataprovider") {
return OpenaireEntities.DATASOURCES; return OpenaireEntities.DATASOURCES;
} else if (this.resultType) {
return this.resultType;
} }
} }
} }