From 36833e9879163b3a7aa3d12086325e9870694084 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Wed, 13 Sep 2023 15:42:24 +0300
Subject: [PATCH] [Validator | right-col-temp]: [WIP]
 oaipmh-validator.component: Updates in right sidebar of validation page.

---
 .../oaipmh-validator.component.html                  | 12 +++++++-----
 .../oaipmh-validator.component.less                  |  7 +++++++
 .../oaipmh-validator.component.ts                    |  4 +++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.html b/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.html
index 5633dc0..0bca244 100644
--- a/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.html
+++ b/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.html
@@ -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>
diff --git a/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.less b/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.less
index 5f81fe3..45b4630 100644
--- a/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.less
+++ b/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.less
@@ -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 -
   //}
diff --git a/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.ts b/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.ts
index 0603ba2..315a8b4 100644
--- a/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.ts
+++ b/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.ts
@@ -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;
     }
   }