From fba0531dbf1bfbc032cafdebdaaafaccade39e2e Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Fri, 17 Jun 2022 16:20:17 +0300
Subject: [PATCH] [Library & common-assets | new-theme]: Fixes in landing for
 offcanvas right sidebar. 1. resultLanding.component.html: Moved offcanvas
 right sidebar outside grid (problem with upcoming new openaire theme - .less
 version). 2. landing-utils.css: [Bug fix]: In  .landing .uk-offcanvas
 .uk-dropdown, set left and right to auto (dropdown shouldn't go out of
 offcanvas).

---
 .../result/resultLanding.component.html       | 139 +++++++++---------
 1 file changed, 71 insertions(+), 68 deletions(-)

diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index 1cca9f75..d5ec6e68 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -405,23 +405,6 @@
 
         <!-- right box/ sidebar-->
         <ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
-          <div id="right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
-               class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
-               (click)="rightSidebarOffcanvasClicked = true;">
-            <icon name="more" ratio="1.5" customClass="uk-text-primary" flex="true" visuallyHidden="sidebar"></icon>
-          </div>
-          <div id="right-column-offcanvas" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
-            <div class="uk-offcanvas-bar">
-              <button class="uk-offcanvas-close uk-close uk-icon" type="button"
-                      (click)="rightSidebarOffcanvasClicked = false">
-                <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
-              </button>
-              <div *ngIf="rightSidebarOffcanvasClicked">
-                <ng-container *ngTemplateOutlet="right_column"></ng-container>
-              </div>
-            </div>
-          </div>
-
           <div *ngIf="!rightSidebarOffcanvasClicked" class="landing-right-sidebar-min-width uk-width-1-3 uk-width-1-4@l uk-padding-remove landing-background-grey-color uk-text-small uk-visible@m"
              [class.uk-animation-right]="viewAll">
             <div class="uk-sticky  landing-sidebar-height" uk-sticky="bottom: true" [attr.offset]="offset">
@@ -430,59 +413,79 @@
               </div>
             </div>
           </div>
-
-          <ng-template #right_column>
-            <div class="uk-margin-medium-top uk-list uk-list-large uk-padding uk-padding-remove-vertical" [class.uk-list-divider]="!viewAll">
-              <!-- EOSC Services-->
-							<!-- 1 link -->
-              <div *ngIf="resultLandingInfo.eoscSubjects?.length == 1 && (properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'eosc')
-                           && (!viewAll || viewAll=='egiNotebook')">
-                <a class="uk-link-text uk-text-bold custom-external"
-                   target="_blank" [href]="resultLandingInfo.eoscSubjects[0].link">
-                  <img src="assets/common-assets/eosc-logo.png"
-                       loading="lazy" alt="eosc_logo" style="width:27px; height:27px">
-                  <span class="uk-margin-small-left uk-text-uppercase"><u>Check compatible EOSC services</u></span>
-                </a>
-              </div>
-							<!-- more than 1 links  -->
-							<div *ngIf="resultLandingInfo.eoscSubjects?.length > 1 && (properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'eosc')
-                              && (!viewAll || viewAll=='egiNotebook')">
-                <a class="uk-link-text uk-text-bold">
-                  <img src="assets/common-assets/eosc-logo.png"
-                       loading="lazy" alt="eosc_logo" style="width:27px; height:27px">
-                  <span class="uk-margin-small-left uk-text-uppercase"><u>Check compatible EOSC services</u></span>
-                </a>
-								<div class="uk-dropdown" uk-dropdown="pos: bottom-right; offset: 10; delay-hide: 0; mode:click">
-									<ul class="uk-nav uk-dropdown-nav">
-										<li *ngFor="let item of resultLandingInfo.eoscSubjects">
-											<a [href]="item.link" target="_blank" class="custom-external">{{item.value}}</a>
-										</li>
-									</ul>
-								</div>
-              </div>
-               <div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')">
-                <sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Sustainable Development Goals (SDGs)')"></sdg>
-              </div>
-              <div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')">
-                <fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"></fos>
-              </div>
-              <!-- Funded By -->
-              <div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
-                <fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" (viewAllClicked)="viewAll=$event"></fundedBy>
-              </div>
-              <!-- Communities -->
-              <div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
-                <relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
-                           (viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
-              </div>
-              <!-- Download From -->
-              <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0 && (!viewAll || viewAll=='availableOn')">
-                <availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
-              </div>
-            </div>
-          </ng-template>
         </ng-container>
       </div>
+
+      <!-- right box/ sidebar-->
+      <ng-container *ngIf="!showFeedback && resultLandingInfo && hasRightSidebarInfo">
+        <div id="right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
+             class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
+             (click)="rightSidebarOffcanvasClicked = true;">
+          <icon name="more" ratio="1.5" customClass="uk-text-primary" flex="true" visuallyHidden="sidebar"></icon>
+        </div>
+        <div id="right-column-offcanvas" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
+          <div class="uk-offcanvas-bar">
+            <button class="uk-offcanvas-close uk-close uk-icon" type="button"
+                    (click)="rightSidebarOffcanvasClicked = false">
+              <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
+            </button>
+            <div *ngIf="rightSidebarOffcanvasClicked">
+              <ng-container *ngTemplateOutlet="right_column"></ng-container>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+
+      <ng-template #right_column>
+        <div class="uk-margin-medium-top uk-list uk-list-large uk-padding uk-padding-remove-vertical" [class.uk-list-divider]="!viewAll">
+          <!-- EOSC Services-->
+          <!-- 1 link -->
+          <div *ngIf="resultLandingInfo.eoscSubjects?.length == 1 && (properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'eosc')
+                           && (!viewAll || viewAll=='egiNotebook')">
+            <a class="uk-link-text uk-text-bold custom-external"
+               target="_blank" [href]="resultLandingInfo.eoscSubjects[0].link">
+              <img src="assets/common-assets/eosc-logo.png"
+                   loading="lazy" alt="eosc_logo" style="width:27px; height:27px">
+              <span class="uk-margin-small-left uk-text-uppercase"><u>Check compatible EOSC services</u></span>
+            </a>
+          </div>
+          <!-- more than 1 links  -->
+          <div *ngIf="resultLandingInfo.eoscSubjects?.length > 1 && (properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'eosc')
+                              && (!viewAll || viewAll=='egiNotebook')">
+            <a class="uk-link-text uk-text-bold">
+              <img src="assets/common-assets/eosc-logo.png"
+                   loading="lazy" alt="eosc_logo" style="width:27px; height:27px">
+              <span class="uk-margin-small-left uk-text-uppercase"><u>Check compatible EOSC services</u></span>
+            </a>
+            <div class="uk-dropdown" uk-dropdown="pos: bottom-right; offset: 10; delay-hide: 0; mode:click">
+              <ul class="uk-nav uk-dropdown-nav">
+                <li *ngFor="let item of resultLandingInfo.eoscSubjects">
+                  <a [href]="item.link" target="_blank" class="custom-external">{{item.value}}</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && (!viewAll || viewAll=='sdg')">
+            <sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Sustainable Development Goals (SDGs)')"></sdg>
+          </div>
+          <div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')">
+            <fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="feedbackClicked('Fields of Science and Technology (FOS)')"></fos>
+          </div>
+          <!-- Funded By -->
+          <div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
+            <fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" (viewAllClicked)="viewAll=$event"></fundedBy>
+          </div>
+          <!-- Communities -->
+          <div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
+            <relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
+                       (viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
+          </div>
+          <!-- Download From -->
+          <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0 && (!viewAll || viewAll=='availableOn')">
+            <availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
+          </div>
+        </div>
+      </ng-template>
     </div>
   </div>