Merge remote-tracking branch 'origin/right-col-temp' into main
This commit is contained in:
commit
894792daae
|
|
@ -1,8 +1,11 @@
|
|||
<div id="page_content">
|
||||
<div id="page_content_header" class="uk-blur-background" offset="65">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-section" [formGroup]="form">
|
||||
<ng-container>
|
||||
<div>
|
||||
<!-- uk-blur-background-->
|
||||
<div class="">
|
||||
<div class="uk-grid uk-margin-remove-left" uk-grid>
|
||||
<!-- <div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">-->
|
||||
<!-- <div class="uk-section uk-width-expand" [formGroup]="form">-->
|
||||
<div id="center-content" class="uk-width-2-3 uk-width-3-4@l" [formGroup]="form">
|
||||
<div class="uk-section uk-container uk-container-large">
|
||||
<div class="uk-margin-large-bottom">
|
||||
<h6><span class="uk-text-secondary uk-margin-right">1.</span> Select a data source (repository or journal)</h6>
|
||||
<div input class="uk-width-xlarge uk-margin-xsmall-left uk-margin-medium-top" inputClass="flat x-small" [formInput]="form.get('url')"
|
||||
|
|
@ -50,9 +53,180 @@
|
|||
<span>Start Validation</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div id="right-sidebar" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-background-primary">-->
|
||||
<!-- <div class="uk-sticky" uk-sticky [attr.offset]="offset">-->
|
||||
<!-- <div class="uk-overflow-auto uk-height-1-1">-->
|
||||
<!-- <div class="uk-h5 uk-light uk-text-center">Help</div>-->
|
||||
<!-- <div class="uk-card uk-card-default">-->
|
||||
<!-- <div class="uk-card-body">test body</div>-->
|
||||
<!-- <div class="uk-card-footer">Dismiss Help</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div id="right-sidebar" *ngIf="help"
|
||||
class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m uk-background-primary">
|
||||
<div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
|
||||
<div #right_sidebar class="uk-height-1-1">
|
||||
<div class="uk-height-1-1">
|
||||
<div #right_sidebar_header class="uk-section uk-section-small">
|
||||
<div class="uk-h5 uk-light uk-text-center">Help</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default" [style]="'height: ' + right_sidebar_card_height + 'px;'">
|
||||
<div class="uk-overflow-auto uk-padding-remove-horizontal" [style]="'height: ' + right_sidebar_body_height + 'px;'">
|
||||
<div class="uk-card-body">
|
||||
<ul uk-accordion>
|
||||
<li class="uk-open">
|
||||
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
|
||||
<span class="accordion-title-num">
|
||||
<svg height="27" width="27">
|
||||
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
|
||||
<text x="50%" y="50%" text-anchor="middle" dy=".2em" font-size="12" font-weight="200">
|
||||
1
|
||||
</text>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="uk-margin-small-left">Select Data source</span>
|
||||
</a>
|
||||
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
|
||||
<p>
|
||||
Select from the list, or enter the base OAI URL of the repository/ journal.
|
||||
The repository's/ journal's published sets are exposed in a later stage and you may select one for the compatibility tests.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
|
||||
<span class="accordion-title-num">
|
||||
<svg height="27" width="27">
|
||||
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
|
||||
<text x="50%" y="50%" text-anchor="middle" dy=".2em" font-size="12" font-weight="200">
|
||||
2
|
||||
</text>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="uk-margin-small-left">Select Guidelines</span>
|
||||
</a>
|
||||
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
|
||||
<p>You may apply two types of compatibility tests on your repository:</p>
|
||||
<ul>
|
||||
<li>Content: specific to the content/ format of the dc fields</li>
|
||||
<li>Usage: specific to the implementation of OAI-PMH</li>
|
||||
</ul>
|
||||
<p>You may select from a predefined set of rules (OpenAIRE for Literature Repositories, OpenAIRE for Data Archives) or customize them according to your needs.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
|
||||
<span class="accordion-title-num">
|
||||
<svg height="27" width="27">
|
||||
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
|
||||
<text x="50%" y="50%" text-anchor="middle" dy=".2em" font-size="12" font-weight="200">
|
||||
3
|
||||
</text>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="uk-margin-small-left">Select Parameters</span>
|
||||
</a>
|
||||
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a #right_sidebar_footer uk-sticky="end: true" class="uk-sticky uk-card-footer uk-button-link uk-text-center" (click)="help=false">Dismiss Help</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="!help" class="quick-contact uk-align-right uk-padding uk-padding-remove-vertical">
|
||||
<button class="uk-button uk-box-shadow-default uk-box-shadow-default-hover uk-button-secondary uk-flex uk-flex-middle"
|
||||
(click)="openHelp();">
|
||||
<icon name="lightbulb" [flex]="true"></icon>
|
||||
<span class="uk-margin-small-left">help</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--<div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">-->
|
||||
<!-- <div class="tm-main">-->
|
||||
<!-- <div class="publication">-->
|
||||
<!-- <div class="uk-grid uk-margin-remove-left" uk-grid>-->
|
||||
<!-- <div id="center-content" class="uk-width-expand uk-padding-remove uk-background-default">-->
|
||||
<!-- <div class="uk-heading-2xlarge">-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <ng-container >-->
|
||||
<!-- <div id="right-sidebar" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m">-->
|
||||
<!-- <div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">-->
|
||||
<!-- <div class="uk-overflow-auto uk-height-1-1">-->
|
||||
<!-- test-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </ng-container>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
|
||||
|
||||
<!--<div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">-->
|
||||
<!-- <div class="tm-main">-->
|
||||
<!-- <div class="">-->
|
||||
<!-- <div class="uk-grid uk-margin-remove-left" uk-grid>-->
|
||||
<!-- <div id="center-content" class="uk-width-2-3 uk-width-3-4@l">-->
|
||||
<!-- <div class="uk-heading-2xlarge">-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- <div>test</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div id="right-sidebar" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-background-primary">-->
|
||||
<!-- <div class="uk-sticky" uk-sticky [attr.offset]="offset">-->
|
||||
<!-- <div class="uk-overflow-auto uk-height-1-1">-->
|
||||
<!-- <div class="uk-h5 uk-light uk-text-center">Help</div>-->
|
||||
<!-- <div class="uk-card uk-card-default">-->
|
||||
<!-- <div class="uk-card-body">test body</div>-->
|
||||
<!-- <div class="uk-card-footer">Dismiss Help</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
@import (reference) "~src/assets/openaire-theme/less/_import-variables";
|
||||
|
||||
@header-height: @global-header-height;
|
||||
@sidebar-height: calc(100vh - @header-height);
|
||||
|
||||
#center-content {
|
||||
min-height: @sidebar-height;
|
||||
}
|
||||
|
||||
#right-sidebar {
|
||||
& > .uk-sticky {
|
||||
height: @sidebar-height;
|
||||
}
|
||||
|
||||
.uk-card {
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
//& > .uk-card {
|
||||
// height: @sidebar-height -
|
||||
//}
|
||||
}
|
||||
|
||||
.quick-contact {
|
||||
position: sticky;
|
||||
bottom: 5vh;
|
||||
//right: 5vw;
|
||||
z-index: @global-z-index - 20;
|
||||
}
|
||||
|
||||
li.uk-open .accordion-title-num {
|
||||
& > * {
|
||||
color: @global-inverse-color;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: @global-primary-background;
|
||||
}
|
||||
|
||||
text {
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
li:not(.uk-open) .accordion-title-num {
|
||||
& > * {
|
||||
color: @global-muted-color;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: @global-muted-background;
|
||||
}
|
||||
|
||||
text {
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {OaipmhValidatorService} from "../../../services/oaipmh-validator.service";
|
||||
import {UntypedFormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
|
||||
import {Option} from "../../../openaire-library/sharedComponents/input/input.component";
|
||||
|
|
@ -13,6 +13,10 @@ import {Subscriber} from "rxjs";
|
|||
styleUrls: ['./oaipmh-validator.component.less']
|
||||
})
|
||||
export class OaipmhValidatorComponent implements OnInit {
|
||||
@ViewChild("right_sidebar") right_sidebar;
|
||||
@ViewChild("right_sidebar_header") right_sidebar_header;
|
||||
@ViewChild("right_sidebar_footer") right_sidebar_footer;
|
||||
|
||||
public options: Option[] = [
|
||||
{label: 'OpenAIRE Guidelines for Data Archives Profile v2', value: 'OpenAIRE Guidelines for Data Archives Profile v2'},
|
||||
{label: 'OpenAIRE Guidelines for Literature Repositories Profile v3', value: 'OpenAIRE Guidelines for Literature Repositories Profile v3'},
|
||||
|
|
@ -24,9 +28,17 @@ export class OaipmhValidatorComponent implements OnInit {
|
|||
public recordsNum: number = 10;
|
||||
public loadingSets: boolean = false;
|
||||
|
||||
public offset: number = 0;
|
||||
public help: boolean = false;
|
||||
|
||||
public right_sidebar_body_height: number = 0;
|
||||
public right_sidebar_card_height: number = 0;
|
||||
|
||||
subscriptions = [];
|
||||
|
||||
constructor(private fb: UntypedFormBuilder, private router: Router, private validator: OaipmhValidatorService) {
|
||||
constructor(private fb: UntypedFormBuilder, private router: Router,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private validator: OaipmhValidatorService) {
|
||||
this.form = this.fb.group({
|
||||
url: this.fb.control("", StringUtils.urlValidator()),//[Validators.required/*, Validators.email*/]),
|
||||
guidelines: this.fb.control("", Validators.required),
|
||||
|
|
@ -37,6 +49,16 @@ export class OaipmhValidatorComponent implements OnInit {
|
|||
|
||||
ngOnInit() {}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (typeof document !== 'undefined') {
|
||||
if(document.getElementById("main-menu")) {
|
||||
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
|
||||
} else {
|
||||
this.offset = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof Subscriber) {
|
||||
|
|
@ -45,6 +67,18 @@ export class OaipmhValidatorComponent implements OnInit {
|
|||
});
|
||||
}
|
||||
|
||||
openHelp() {
|
||||
this.help = true;
|
||||
this.cdr.detectChanges();
|
||||
if (typeof document !== 'undefined') {
|
||||
console.log(this.right_sidebar.nativeElement.offsetHeight);
|
||||
console.log(this.right_sidebar_header.nativeElement.offsetHeight);
|
||||
console.log(this.right_sidebar_footer.nativeElement.offsetHeight);
|
||||
this.right_sidebar_card_height = this.right_sidebar.nativeElement.offsetHeight - this.right_sidebar_header.nativeElement.offsetHeight + 1;
|
||||
this.right_sidebar_body_height = this.right_sidebar_card_height - this.right_sidebar_footer.nativeElement.offsetHeight;
|
||||
}
|
||||
}
|
||||
|
||||
updateRecordsNum(increase: boolean = true) {
|
||||
this.recordsNum = this.recordsNum + (increase ? 10 : -10);
|
||||
this.form.get('recordsNum').setValue(this.recordsNum);
|
||||
|
|
@ -82,4 +116,6 @@ export class OaipmhValidatorComponent implements OnInit {
|
|||
}
|
||||
));
|
||||
}
|
||||
|
||||
protected readonly innerHeight = innerHeight;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue