From 5ad74bceeee297f49c1d70b884a0320ad3e12d1e Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Fri, 25 Aug 2023 12:02:46 +0300
Subject: [PATCH] WIP: Right-help column in validation options page

---
 .../oaipmh-validator.component.html           | 63 ++++++++++++++++++-
 .../oaipmh-validator.component.less           | 25 ++++++++
 .../oaipmh-validator.component.ts             | 13 ++++
 3 files changed, 99 insertions(+), 2 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 e5abb80..0f48f9f 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
@@ -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>
 
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 e69de29..f9cd71f 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
@@ -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;
+}
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 e63724b..430213f 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
@@ -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) {