[Validator | right-col-temp]: [WIP] oaipmh-validator.component.less: Added styling rules for right column of validation page | oaipmh-validator.component.html: Updated margins & paddings and added content to the right column of validation page.

This commit is contained in:
Konstantina Galouni 2023-09-12 17:07:52 +03:00
parent 5ad74bceee
commit 259a5a8af6
5 changed files with 114 additions and 43 deletions

@ -1 +1 @@
Subproject commit 40ef9507150f90d9e50298adb23c29b3d5a9745b
Subproject commit 821c4242bef1fc2725d40c32fc857052b2a15ab3

View File

@ -1,10 +1,10 @@
<div id="page_content">
<div id="page_content_header" class="uk-blur-background" offset="65">
<div class="uk-container uk-container-large uk-grid uk-margin-remove-left" uk-grid>
<div id="page_content_header" class="uk-blur-background">
<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-expand" [formGroup]="form">
<ng-container>
<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')"
@ -52,59 +52,100 @@
<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>
<!-- <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 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="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 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-card uk-card-default">
<div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
<div class="uk-overflow-auto uk-height-1-1">
test
<div>
<div class="uk-section uk-section-small uk-background-primary">
<div class="uk-h5 uk-light uk-text-center">Help</div>
</div>
<div class="uk-card-body uk-padding-remove-horizontal">
<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=".3em" font-size="14">
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=".3em" font-size="14">
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=".3em" font-size="14">
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>
<a 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 *ngIf="!help" class="quick-contact uk-align-right">
<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)="help = true">
<icon name="lightbulb" [flex]="true"></icon>

View File

@ -23,3 +23,33 @@
//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 +1 @@
Subproject commit ae7e623418e7362e80cf9f65db7a004c0857d239
Subproject commit 9e58421a1adf3fbeb361e21616feaea8c7f867af

@ -1 +1 @@
Subproject commit 98077993a6eba7998b18fbfdee223409f0829ae6
Subproject commit 5feca2d8457324999557feb662b4355d8cf0df4b