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 *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="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">
@ -90,7 +90,7 @@
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="dataProviderInfo">
<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">
<!-- schema.org-->
<schema2jsonld [data]=dataProviderInfo
@ -182,8 +182,8 @@
<showIdentifiers [identifiers]="dataProviderInfo.identifiers" [showViewAll]="true"></showIdentifiers>
</div>
</div>
<div *ngIf="dataProviderInfo && hasMetrics">
<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div *ngIf="dataProviderInfo && hasMetrics" class="uk-width-1-1 uk-width-medium@s">
<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-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div>
@ -477,7 +477,7 @@
<ng-container *ngIf="dataProviderInfo && hasMetrics">
<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>
<li>
<li class="uk-padding-remove">
<a href="#">Overview</a>
</li>
<li *ngIf="totalDownloads ||totalViews">

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

@ -4,7 +4,7 @@ import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'showTitle',
template: `
<h1 [ngClass]="classNames" class="uk-h5">
<h1 [ngClass]="classNames" class="uk-h6">
<ng-container *ngTemplateOutlet="_title;"></ng-container>
</h1>
<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">
<div class="tm-main">
<!-- Desktop view -->
<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 *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left column -->
@ -267,6 +268,80 @@
</feedback>
</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 -->
<!-- Other versions -->
<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 {OpenaireEntities} from '../../utils/properties/searchFields';
import {Option} from '../../sharedComponents/input/input.component';
import {LayoutService} from '../../dashboard/sharedComponents/sidebar/layout.service';
declare var ResizeObserver;
@ -121,7 +122,7 @@ export class OrganizationComponent {
// @ViewChild('projectsModal') projectsModal;
public deleteByInferenceOpened: boolean = false;
public isMobile: boolean = false;
constructor(private element: ElementRef,
private _organizationService: OrganizationService,
@ -138,7 +139,8 @@ export class OrganizationComponent {
private seoService: SEOService,
private _location: Location,
private indexInfoService: IndexInfoService,
private cdr: ChangeDetectorRef) {
private cdr: ChangeDetectorRef,
private layoutService: LayoutService) {
this.fetchProjects = new FetchProjects(this._searchProjectsService);
this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService);
@ -148,19 +150,21 @@ export class OrganizationComponent {
}
ngOnInit() {
this.properties = properties;
if (typeof document !== 'undefined') {
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.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url);
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
}));
this.properties = properties;
if (typeof document !== 'undefined') {
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.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url);
this.subscriptions.push(this.route.queryParams.subscribe(params => {
this.organizationInfo = null;

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

@ -110,7 +110,7 @@
</div>
<!-- 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="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">
@ -153,7 +153,7 @@
<div class="uk-margin-left uk-margin-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="projectInfo">
<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">
<!-- schema.org-->
<schema2jsonld [data]=projectInfo
@ -333,8 +333,8 @@
</div>
</div>
</div>
<div *ngIf="projectInfo && hasMetrics">
<div class="landing-metrics-card uk-width-medium uk-card uk-card-secondary uk-text-small uk-flex uk-padding-small">
<div *ngIf="projectInfo && hasMetrics" class="uk-width-1-1 uk-width-medium@s">
<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-grid uk-grid-small uk-flex-nowrap" uk-grid uk-height-match="target: > div > .cell">
<div>
@ -512,7 +512,7 @@
<ng-container *ngIf="projectInfo && hasMetrics">
<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>
<li>
<li class="uk-padding-remove">
<a href="#">Overview</a>
</li>
<li *ngIf="totalDownloads ||totalViews">