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:
parent
2806515d31
commit
3b962dc0e5
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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,7 +150,9 @@ export class OrganizationComponent {
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
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 => {
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue