From 259a5a8af61a8d1fc8932089d79761af252059bf Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Tue, 12 Sep 2023 17:07:52 +0300
Subject: [PATCH] [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.

---
 src/app/openaire-library                      |   2 +-
 .../oaipmh-validator.component.html           | 121 ++++++++++++------
 .../oaipmh-validator.component.less           |  30 +++++
 src/assets/common-assets                      |   2 +-
 src/assets/openaire-theme                     |   2 +-
 5 files changed, 114 insertions(+), 43 deletions(-)

diff --git a/src/app/openaire-library b/src/app/openaire-library
index 40ef950..821c424 160000
--- a/src/app/openaire-library
+++ b/src/app/openaire-library
@@ -1 +1 @@
-Subproject commit 40ef9507150f90d9e50298adb23c29b3d5a9745b
+Subproject commit 821c4242bef1fc2725d40c32fc857052b2a15ab3
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 0f48f9f..d095004 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,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>
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 f9cd71f..5f81fe3 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
@@ -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;
+  }
+}
diff --git a/src/assets/common-assets b/src/assets/common-assets
index ae7e623..9e58421 160000
--- a/src/assets/common-assets
+++ b/src/assets/common-assets
@@ -1 +1 @@
-Subproject commit ae7e623418e7362e80cf9f65db7a004c0857d239
+Subproject commit 9e58421a1adf3fbeb361e21616feaea8c7f867af
diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme
index 9807799..5feca2d 160000
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit 98077993a6eba7998b18fbfdee223409f0829ae6
+Subproject commit 5feca2d8457324999557feb662b4355d8cf0df4b