[Validator | right-col-temp]: [WIP] oaipmh-validator.component: Updates in right sidebar of validation page.
This commit is contained in:
parent
e9c22bfe73
commit
36833e9879
|
@ -69,13 +69,14 @@
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
|
|
||||||
<div id="right-sidebar" *ngIf="help"
|
<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 class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
|
||||||
<div #right_sidebar class="uk-height-1-1">
|
<div #right_sidebar class="uk-height-1-1">
|
||||||
<div 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 class="uk-h5 uk-light uk-text-center">Help</div>
|
||||||
</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-overflow-auto uk-padding-remove-horizontal" [style]="'height: ' + right_sidebar_body_height + 'px;'">
|
||||||
<div class="uk-card-body">
|
<div class="uk-card-body">
|
||||||
<ul uk-accordion>
|
<ul uk-accordion>
|
||||||
|
@ -84,7 +85,7 @@
|
||||||
<span class="accordion-title-num">
|
<span class="accordion-title-num">
|
||||||
<svg height="27" width="27">
|
<svg height="27" width="27">
|
||||||
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
|
<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
|
1
|
||||||
</text>
|
</text>
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -103,7 +104,7 @@
|
||||||
<span class="accordion-title-num">
|
<span class="accordion-title-num">
|
||||||
<svg height="27" width="27">
|
<svg height="27" width="27">
|
||||||
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
|
<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
|
2
|
||||||
</text>
|
</text>
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -124,7 +125,7 @@
|
||||||
<span class="accordion-title-num">
|
<span class="accordion-title-num">
|
||||||
<svg height="27" width="27">
|
<svg height="27" width="27">
|
||||||
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
|
<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
|
3
|
||||||
</text>
|
</text>
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -141,6 +142,7 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<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>
|
||||||
|
|
|
@ -12,6 +12,13 @@
|
||||||
height: @sidebar-height;
|
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 {
|
//& > .uk-card {
|
||||||
// height: @sidebar-height -
|
// height: @sidebar-height -
|
||||||
//}
|
//}
|
||||||
|
|
|
@ -32,6 +32,7 @@ export class OaipmhValidatorComponent implements OnInit {
|
||||||
public help: boolean = false;
|
public help: boolean = false;
|
||||||
|
|
||||||
public right_sidebar_body_height: number = 0;
|
public right_sidebar_body_height: number = 0;
|
||||||
|
public right_sidebar_card_height: number = 0;
|
||||||
|
|
||||||
subscriptions = [];
|
subscriptions = [];
|
||||||
|
|
||||||
|
@ -73,7 +74,8 @@ export class OaipmhValidatorComponent implements OnInit {
|
||||||
console.log(this.right_sidebar.nativeElement.offsetHeight);
|
console.log(this.right_sidebar.nativeElement.offsetHeight);
|
||||||
console.log(this.right_sidebar_header.nativeElement.offsetHeight);
|
console.log(this.right_sidebar_header.nativeElement.offsetHeight);
|
||||||
console.log(this.right_sidebar_footer.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue