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

[Library & common-assets | new-theme]: z-index problems in landing pages & scrolling on page change in tabs and versions modals | Bug fix in projects tab of organizatio landing. 

1. landing-utils.css: [Bug fix] z-indexes of uk-dropdown set to 981 (landing only), z-index of #main-tabs-div set to 978, z-index of graph_and_feedback set to 979.
2. showAuthors.component.ts: [Bug fix] Added @Input() isSticky: boolean = false; and when isSticky is true, do not show orcid info & dropdown for authors (z-index problem).
3. resultLanding.component.ts: Added scrolling in "References" and "External Databases" (bioentiites) tabs on page change.
4. resultLanding.component.html: [Bug fix] For the right sidebar, added inner <div class="uk-overflow-auto uk-height-1-1"> inside sticky - z-index problem.
5. result/deletedByInference.component.ts & organization/deletedByInference.component.ts: Added scrolling on page change.
6. projects-in-modal.component.ts:
   a. Added scrolling in "Projects" tab on page change.
   b. Show number of projects and pages always.
   b. [Bug fix] On filterChange(), set page=1.
7. landing-header.component.ts: Added parameter isSticky in <showAuthors>.
8. Added scrolling in "Related Data Sources" tab on page change.
This commit is contained in:
Konstantina Galouni 2022-06-16 19:37:31 +03:00
parent 4ed89bac13
commit fb4df63f19
8 changed files with 73 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
landingPages/dataProvider/relatedDatasourcesTab.component.ts
View File

@ -112,6 +112,16 @@ export class RelatedDatasourcesTabComponent {
updatePage($event) {
this.page = $event.value;
this.scrollToTabTop("relatedDatasources");
}
scrollToTabTop(tabId:string){
setTimeout(() => {
window.scrollTo({
top: document.getElementById(tabId) ? document.getElementById(tabId).offsetTop - 250 : 250,
behavior: 'smooth'
});
}, 200);
}
public getKeys( map) {

2
landingPages/landing-utils/landing-header/landing-header.component.ts
View File

@ -56,7 +56,7 @@ import {AlertModal} from "../../../utils/modal/alert";
</div>
</div>
<div *ngIf="authors">
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors"></showAuthors>
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [isSticky]="isSticky"></showAuthors>
</div>
</div>`
})

13
landingPages/landing-utils/projects-in-modal.component.ts
View File

@ -34,7 +34,7 @@ import {OpenaireEntities} from '../../utils/properties/searchFields';
<errorMessages [status]="[fetchProjects.searchUtils.status]" [type]="openaireEntities.PROJECTS"
tab_error_class=true></errorMessages>
<div *ngIf="fetchProjects.searchUtils.status == errorCodes.DONE">
<results-and-pages *ngIf="fetchProjects.searchUtils.totalResults > size" [type]="openaireEntities.PROJECTS"
<results-and-pages [type]="openaireEntities.PROJECTS"
[page]="page" [pageSize]="size"
[totalResults]="fetchProjects.searchUtils.totalResults">
</results-and-pages>
@ -84,14 +84,25 @@ export class ProjectsInModalComponent {
private search(refine: boolean, filterQuery: string) {
var refineFields: string [] = ["funder"];
this.fetchProjects.getResultsForOrganizations(this.organizationId, filterQuery, this.page, this.size, (refine) ? refineFields : [], this.properties);
this.scrollToTabTop("projects");
}
public pageChange($event) {
this.page = $event.value;
this.search(false, this.filterQuery);
}
scrollToTabTop(tabId:string){
setTimeout(() => {
window.scrollTo({
top: document.getElementById(tabId) ? document.getElementById(tabId).offsetTop - 250 : 250,
behavior: 'smooth'
});
}, 200);
}
public filterChange($event) {
this.page = 1;
this.updateFilters();
//this.search(true, this.filterQuery);
this.search(false, this.filterQuery);

36
landingPages/organization/deletedByInference/deletedByInference.component.ts
View File

@ -12,26 +12,29 @@ import {ResultPreview} from "../../../utils/result-preview/result-preview";
import {AlertModal} from "../../../utils/modal/alert";
import {Subscriber} from "rxjs";
import {properties} from "../../../../../environments/environment";
import {HelperFunctions} from "../../../utils/HelperFunctions.class";
@Component({
selector: 'organizationsDeletedByInference',
template: `
<errorMessages [status]="[status]" [type]="type" tab_error_class=true></errorMessages>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</no-load-paging>
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</no-load-paging>
<div id="versions_container">
<errorMessages [status]="[status]" [type]="type" tab_error_class=true></errorMessages>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</no-load-paging>
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</no-load-paging>
</div>
`
})
export class OrganizationsDeletedByInferenceComponent {
@ -111,5 +114,6 @@ export class OrganizationsDeletedByInferenceComponent {
public updatePage($event) {
this.page = $event.value;
HelperFunctions.scrollToId("versions_container");
}
}

36
landingPages/result/deletedByInference/deletedByInference.component.ts
View File

@ -12,26 +12,29 @@ import {ResultPreview} from "../../../utils/result-preview/result-preview";
import {AlertModal} from "../../../utils/modal/alert";
import {Subscriber} from "rxjs";
import {properties} from "../../../../../environments/environment";
import {HelperFunctions} from "../../../utils/HelperFunctions.class";
@Component({
selector: 'deletedByInference',
template: `
<errorMessages [status]="[status]" [type]="type" tab_error_class=true></errorMessages>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</no-load-paging>
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</no-load-paging>
<div id="versions_container">
<errorMessages [status]="[status]" [type]="type" tab_error_class=true></errorMessages>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</no-load-paging>
<ul class="uk-list uk-list-divider uk-margin">
<li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
<result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
</li>
</ul>
<no-load-paging *ngIf="results.length > pageSize" [type]="type"
(pageChange)="updatePage($event)"
[page]="page" [pageSize]="pageSize"
[totalResults]="results.length">
</no-load-paging>
</div>
`
})
export class DeletedByInferenceComponent {
@ -113,5 +116,6 @@ export class DeletedByInferenceComponent {
public updatePage($event) {
this.page = $event.value;
HelperFunctions.scrollToId("versions_container");
}
}

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

@ -424,8 +424,10 @@
<div *ngIf="!rightSidebarOffcanvasClicked" class="landing-right-sidebar-min-width uk-width-1-3 uk-width-1-4@l uk-padding-remove landing-background-grey-color uk-text-small uk-visible@m"
[class.uk-animation-right]="viewAll">
<div class="uk-sticky uk-overflow-auto landing-sidebar-height" uk-sticky="bottom: true" [attr.offset]="offset">
<ng-container *ngTemplateOutlet="right_column"></ng-container>
<div class="uk-sticky landing-sidebar-height" uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-overflow-auto uk-height-1-1">
<ng-container *ngTemplateOutlet="right_column"></ng-container>
</div>
</div>
</div>

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

@ -599,10 +599,12 @@ export class ResultLandingComponent {
public updateReferencesPage($event) {
this.referencesPage = $event.value;
this.scrollToTabTop('references');
}
public updateBioentitiesPage($event) {
this.bioentitiesPage = $event.value;
this.scrollToTabTop('bioentities');
}
public updateRelatedPage($event) {

7
utils/authors/showAuthors.component.ts
View File

@ -12,17 +12,17 @@ import {properties} from "../../../../environments/environment";
selector: 'showAuthors',
template: `
<ng-template #author_template let-author="author" let-i="i">
<span *ngIf="(!author.orcid && !author.orcid_pending) || !testBrowser" style="margin-right: 5px;">
<span *ngIf="isSticky || (!author.orcid && !author.orcid_pending) || !testBrowser" style="margin-right: 5px;">
{{author.fullName + ";"}}
</span>
<a *ngIf="(author.orcid || author.orcid_pending) && testBrowser" class="uk-flex-inline uk-flex-middle uk-link-text">
<a *ngIf="!isSticky && (author.orcid || author.orcid_pending) && testBrowser" class="uk-flex-inline uk-flex-middle uk-link-text">
<img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
<img *ngIf="!author.orcid && author.orcid_pending" src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="orcid bw" loading="lazy" style="margin-right: 3px;">
<span style="margin-right: 5px;">
{{author.fullName + ";"}}
</span>
</a>
<div *ngIf="(author.orcid || author.orcid_pending) && testBrowser"
<div *ngIf="!isSticky && (author.orcid || author.orcid_pending) && testBrowser"
class="default-dropdown uk-margin-remove-top uk-dropdown orcid-dropdown"
uk-dropdown="mode:click; offset: 4" style="min-width: 465px !important;">
<div class="uk-padding-small">
@ -99,6 +99,7 @@ import {properties} from "../../../../environments/environment";
export class ShowAuthorsComponent {
@Input() authors: Author[];
@Input() isSticky: boolean = false;
@Input() authorsLimit: number = 7;
@Input() showAll: boolean = true;
@Input() modal: AlertModal;