MaDgIK
/
metadata-validator-ui
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: Right-help column in validation options page

This commit is contained in:
Konstantina Galouni 2023-08-25 12:02:46 +03:00
parent 98ac3f8576
commit 5ad74bceee
3 changed files with 99 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.html
View File

@ -1,7 +1,9 @@
<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">
<div class="uk-container uk-container-large 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-expand" [formGroup]="form">
<ng-container>
<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>
@ -50,9 +52,66 @@
<span>Start Validation</span>
</button>
</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaa oooooooooooooooooooo iiiiiiiiiiiiiiiiiiii</div>
</ng-container>
</div>
<!-- <div id="right-sidebar" *ngIf="help" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-background-primary">-->
<!-- <div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">-->
<!-- <div class="uk-overflow-auto uk-height-1-1">-->
<!-- <div class="uk-h5 uk-light uk-text-center">Help</div>-->
<!--&lt;!&ndash; <div class="uk-card uk-card-default">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="uk-card-body">test body</div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="uk-card-footer">Dismiss Help</div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div id="landing-right-sidebar" *ngIf="help" 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>
</div>
<div *ngIf="!help" class="quick-contact uk-align-right">
<button class="uk-button uk-box-shadow-default uk-box-shadow-default-hover uk-button-secondary uk-flex uk-flex-middle"
(click)="help = true">
<icon name="lightbulb" [flex]="true"></icon>
<span class="uk-margin-small-left">help</span>
</button>
</div>
</div>
</div>

25
src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.less
View File

@ -0,0 +1,25 @@
@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 {
// height: @sidebar-height -
//}
}
.quick-contact {
position: sticky;
bottom: 5vh;
//right: 5vw;
z-index: @global-z-index - 20;
}

13
src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.ts
View File

@ -24,6 +24,9 @@ export class OaipmhValidatorComponent implements OnInit {
public recordsNum: number = 10;
public loadingSets: boolean = false;
public offset: number = 0;
public help: boolean = false;
subscriptions = [];
constructor(private fb: UntypedFormBuilder, private router: Router, private validator: OaipmhValidatorService) {
@ -37,6 +40,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) {