[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).
This commit is contained in:
Konstantina Galouni 2022-06-17 16:20:17 +03:00
parent 8a64b576d0
commit fba0531dbf
1 changed files with 71 additions and 68 deletions

View File

@ -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>