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

create mobile view structure for organization landing, add @media rules for project and dataProvider landing, change size of result title

This commit is contained in:
Alex Martzios 2023-02-21 15:06:28 +02:00
parent 2806515d31
commit 3b962dc0e5
5 changed files with 107 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,7 +72,7 @@
</div> </div>
</div> </div>
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom"> <div *ngIf="!showLoading" class="uk-visible@s uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center"> <div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom"> <div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="landing-action-bar-grid-gap uk-flex uk-flex-middle uk-text-xsmall"> <div class="landing-action-bar-grid-gap uk-flex uk-flex-middle uk-text-xsmall">
@ -90,7 +90,7 @@
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'"> <div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="dataProviderInfo"> <ng-container *ngIf="dataProviderInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')"> <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<div class="uk-grid" uk-grid> <div class="uk-grid uk-grid-small" uk-grid>
<div class="uk-width-expand"> <div class="uk-width-expand">
<!-- schema.org--> <!-- schema.org-->
<schema2jsonld [data]=dataProviderInfo <schema2jsonld [data]=dataProviderInfo
@ -182,8 +182,8 @@
<showIdentifiers [identifiers]="dataProviderInfo.identifiers" [showViewAll]="true"></showIdentifiers> <showIdentifiers [identifiers]="dataProviderInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div> </div>
</div> </div>
<div *ngIf="dataProviderInfo && hasMetrics"> <div *ngIf="dataProviderInfo && hasMetrics" class="uk-width-1-1 uk-width-medium@s">
<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small"> <div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div class="uk-width-expand uk-flex uk-flex-middle"> <div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell"> <div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div> <div>
@ -477,7 +477,7 @@
<ng-container *ngIf="dataProviderInfo && hasMetrics"> <ng-container *ngIf="dataProviderInfo && hasMetrics">
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher> <ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li> <li class="uk-padding-remove">
<a href="#">Overview</a> <a href="#">Overview</a>
</li> </li>
<li *ngIf="totalDownloads ||totalViews"> <li *ngIf="totalDownloads ||totalViews">

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

@ -4,7 +4,7 @@ import {ActivatedRoute} from '@angular/router';
@Component({ @Component({
selector: 'showTitle', selector: 'showTitle',
template: ` template: `
<h1 [ngClass]="classNames" class="uk-h5"> <h1 [ngClass]="classNames" class="uk-h6">
<ng-container *ngTemplateOutlet="_title;"></ng-container> <ng-container *ngTemplateOutlet="_title;"></ng-container>
</h1> </h1>
<ng-template #_title> <ng-template #_title>

79
landingPages/organization/organization.component.html
View File

@ -1,5 +1,6 @@
<div id="tm-main" class="landing uk-section uk-padding-remove tm-middle"> <!-- Desktop view -->
<div class="tm-main"> <div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">
<div *ngIf="!isMobile" class="tm-main">
<div class="organization"> <div class="organization">
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid> <div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left column --> <!-- left column -->
@ -267,6 +268,80 @@
</feedback> </feedback>
</div> </div>
<!-- Mobile view -->
<div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
<ng-container *ngIf="organizationInfo">
<div class="uk-container uk-section">
<landing-header [properties]="properties" [title]="organizationInfo.title.name"
[subTitle]="(organizationInfo.name
&& organizationInfo.title.name !== organizationInfo.name)?organizationInfo.name:null"
[entityType]="'organization'">
</landing-header>
<div class="uk-section uk-margin-top uk-text-large uk-text-empashis uk-text-bold">
<hr>
<ng-container>
<div class="clickable uk-flex uk-flex-middle uk-flex-between">
<span>Funding / {{openaireEntities.PROJECTS}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchDataproviders && fetchDataproviders.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between">
<span>{{openaireEntities.DATASOURCES}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchPublications && fetchPublications.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between">
<span>{{openaireEntities.PUBLICATIONS}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchDatasets && fetchDatasets.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between">
<span>{{openaireEntities.DATASETS}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchSoftware && fetchSoftware.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between">
<span>{{openaireEntities.SOFTWARE}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="fetchOrps && fetchOrps.searchUtils.totalResults > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between">
<span>{{openaireEntities.OTHER}}</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
</div>
</div>
<div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex uk-flex-middle uk-flex-between uk-text-xsmall uk-text-meta">
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<icon name="corporate_fare" type="outlined" [flex]="true" [ratio]="2"></icon>
<span>Organization</span>
</a>
</div>
<div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2"></icon>
<span>Actions</span>
</a>
</div>
</div>
</div>
</ng-container>
</div>
<!-- MODALS --> <!-- MODALS -->
<!-- Other versions --> <!-- Other versions -->
<modal-alert #AlertModalDeletedByInference *ngIf="organizationInfo && organizationInfo.deletedByInferenceIds" large="true"> <modal-alert #AlertModalDeletedByInference *ngIf="organizationInfo && organizationInfo.deletedByInferenceIds" large="true">

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

@ -26,6 +26,7 @@ import {Subscriber} from "rxjs";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {OpenaireEntities} from '../../utils/properties/searchFields'; import {OpenaireEntities} from '../../utils/properties/searchFields';
import {Option} from '../../sharedComponents/input/input.component'; import {Option} from '../../sharedComponents/input/input.component';
import {LayoutService} from '../../dashboard/sharedComponents/sidebar/layout.service';
declare var ResizeObserver; declare var ResizeObserver;
@ -121,7 +122,7 @@ export class OrganizationComponent {
// @ViewChild('projectsModal') projectsModal; // @ViewChild('projectsModal') projectsModal;
public deleteByInferenceOpened: boolean = false; public deleteByInferenceOpened: boolean = false;
public isMobile: boolean = false;
constructor(private element: ElementRef, constructor(private element: ElementRef,
private _organizationService: OrganizationService, private _organizationService: OrganizationService,
@ -138,7 +139,8 @@ export class OrganizationComponent {
private seoService: SEOService, private seoService: SEOService,
private _location: Location, private _location: Location,
private indexInfoService: IndexInfoService, private indexInfoService: IndexInfoService,
private cdr: ChangeDetectorRef) { private cdr: ChangeDetectorRef,
private layoutService: LayoutService) {
this.fetchProjects = new FetchProjects(this._searchProjectsService); this.fetchProjects = new FetchProjects(this._searchProjectsService);
this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService); this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService);
@ -148,19 +150,21 @@ export class OrganizationComponent {
} }
ngOnInit() { ngOnInit() {
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.properties = properties; this.isMobile = isMobile;
if (typeof document !== 'undefined') { }));
this.subscriptions.push(this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => { this.properties = properties;
if (lastIndexUpdate) { if (typeof document !== 'undefined') {
this.indexUpdateDate = new Date(lastIndexUpdate); this.subscriptions.push(this.indexInfoService.getLastIndexDate(this.properties).subscribe(lastIndexUpdate => {
} if (lastIndexUpdate) {
})); this.indexUpdateDate = new Date(lastIndexUpdate);
} }
//this.getDivContents(); }));
this.getPageContents(); }
this.updateUrl(this.properties.domain + this.properties.baseLink + this._router.url); //this.getDivContents();
this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url); this.getPageContents();
this.updateUrl(this.properties.domain + this.properties.baseLink + this._router.url);
this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url);
this.subscriptions.push(this.route.queryParams.subscribe(params => { this.subscriptions.push(this.route.queryParams.subscribe(params => {
this.organizationInfo = null; this.organizationInfo = null;

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

@ -110,7 +110,7 @@
</div> </div>
<!-- new action bar --> <!-- new action bar -->
<div *ngIf="!showLoading" class="uk-margin-top uk-margin-bottom"> <div *ngIf="!showLoading" class="uk-visible@s uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center"> <div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom"> <div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="landing-action-bar-grid-gap uk-flex uk-flex-middle uk-text-xsmall"> <div class="landing-action-bar-grid-gap uk-flex uk-flex-middle uk-text-xsmall">
@ -153,7 +153,7 @@
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'"> <div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="projectInfo"> <ng-container *ngIf="projectInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')"> <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<div class="uk-grid" uk-grid> <div class="uk-grid uk-grid-small" uk-grid>
<div class="uk-width-expand"> <div class="uk-width-expand">
<!-- schema.org--> <!-- schema.org-->
<schema2jsonld [data]=projectInfo <schema2jsonld [data]=projectInfo
@ -333,8 +333,8 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="projectInfo && hasMetrics"> <div *ngIf="projectInfo && hasMetrics" class="uk-width-1-1 uk-width-medium@s">
<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small"> <div class="landing-metrics-card uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div class="uk-width-expand uk-flex uk-flex-middle"> <div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell"> <div class="uk-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div> <div>
@ -512,7 +512,7 @@
<ng-container *ngIf="projectInfo && hasMetrics"> <ng-container *ngIf="projectInfo && hasMetrics">
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher> <ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li> <li class="uk-padding-remove">
<a href="#">Overview</a> <a href="#">Overview</a>
</li> </li>
<li *ngIf="totalDownloads ||totalViews"> <li *ngIf="totalDownloads ||totalViews">