[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:
parent
8a64b576d0
commit
fba0531dbf
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue