[Validator | right-col-temp]: [WIP] oaipmh-validator.component: Updates in right sidebar of validation page.

This commit is contained in:
Konstantina Galouni 2023-09-13 15:42:24 +03:00
parent e9c22bfe73
commit 36833e9879
3 changed files with 17 additions and 6 deletions

View File

@ -69,13 +69,14 @@
<!-- </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-card uk-card-default">
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 uk-background-primary">
<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>
@ -84,7 +85,7 @@
<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">
<text x="50%" y="50%" text-anchor="middle" dy=".2em" font-size="12" font-weight="200">
1
</text>
</svg>
@ -103,7 +104,7 @@
<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">
<text x="50%" y="50%" text-anchor="middle" dy=".2em" font-size="12" font-weight="200">
2
</text>
</svg>
@ -124,7 +125,7 @@
<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">
<text x="50%" y="50%" text-anchor="middle" dy=".2em" font-size="12" font-weight="200">
3
</text>
</svg>
@ -141,6 +142,7 @@
</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>

View File

@ -12,6 +12,13 @@
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 -
//}

View File

@ -32,6 +32,7 @@ export class OaipmhValidatorComponent implements OnInit {
public help: boolean = false;
public right_sidebar_body_height: number = 0;
public right_sidebar_card_height: number = 0;
subscriptions = [];
@ -73,7 +74,8 @@ export class OaipmhValidatorComponent implements OnInit {
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_body_height = this.right_sidebar.nativeElement.offsetHeight - this.right_sidebar_header.nativeElement.offsetHeight - 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;
}
}