From 50a921ba43060003d791d7478b3c04dcd099a9ea Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Thu, 2 Jun 2022 15:17:30 +0300
Subject: [PATCH] landing pages small screens: remove sidebar and add actions
 at the top

---
 .../dataProvider/dataProvider.component.html  | 21 ++++--
 .../organization/organization.component.html  | 71 ++++++++++++-------
 landingPages/project/project.component.html   | 55 +++++++++++++-
 .../result/resultLanding.component.html       | 51 ++++++++++++-
 4 files changed, 163 insertions(+), 35 deletions(-)

diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html
index f99888fe..befbff00 100644
--- a/landingPages/dataProvider/dataProvider.component.html
+++ b/landingPages/dataProvider/dataProvider.component.html
@@ -4,7 +4,7 @@
       <div *ngIf="!showFeedback" class="uk-grid">
 
         <!-- left box - actions -->
-        <div *ngIf="dataProviderInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
+        <div *ngIf="dataProviderInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color uk-visible@s">
           <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
                uk-sticky="bottom: true" [attr.offset]="offset">
             <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@@ -75,9 +75,22 @@
               <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
                 <!--        schema.org-->
                 <schema2jsonld [data]=dataProviderInfo
-                               [URL]="canonicalUrl"
-                               type="datasource"
-                               [otherURL]="(dataProviderInfo.provenance)?provenanceUrls:null"></schema2jsonld>
+															[URL]="canonicalUrl"
+															type="datasource"
+															[otherURL]="(dataProviderInfo.provenance)?provenanceUrls:null"></schema2jsonld>
+								<!-- Actions for mobile viewport -->
+								<div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s">
+									<div>
+										<a (click)="openAddThisModal()"
+											[title]="'Share this '+openaireEntities.PROJECT+' in your social networks'"
+											[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="share" visuallyHidden="share"></icon>
+											</span>
+										</a>
+									</div>
+								</div>
+
                 <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                         [texts]="pageContents['top']"></helper>
 
diff --git a/landingPages/organization/organization.component.html b/landingPages/organization/organization.component.html
index d3d56813..872f3a1a 100644
--- a/landingPages/organization/organization.component.html
+++ b/landingPages/organization/organization.component.html
@@ -3,35 +3,35 @@
 		<div class="organization">
 			<div *ngIf="!showFeedback" class="uk-grid" uk-grid>
 				<!-- left column -->
-				<div *ngIf="organizationInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
-          <div class="uk-flex uk-flex-column uk-flex-right landing-sidebar-height uk-sticky"
-							uk-sticky="bottom: true" [attr.offset]="offset">
-            <div class="uk-margin-large-bottom uk-align-center">
-              <div class="uk-text-meta uk-text-uppercase">Actions</div>
-              <ul class="uk-list">
-                <!-- Share -->
-                <li class="uk-text-center">
-                  <a (click)="openAddThisModal()" [title]="'Share this organization in your social networks'"
+				<div *ngIf="organizationInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color uk-visible@s">
+					<div class="uk-flex uk-flex-column uk-flex-right landing-sidebar-height uk-sticky"
+						uk-sticky="bottom: true" [attr.offset]="offset">
+						<div class="uk-margin-large-bottom uk-align-center">
+							<div class="uk-text-meta uk-text-uppercase">Actions</div>
+							<ul class="uk-list">
+								<!-- Share -->
+								<li class="uk-text-center">
+									<a (click)="openAddThisModal()" [title]="'Share this organization in your social networks'"
 										[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
-                    <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
-                      <icon name="share" visuallyHidden="share"></icon>
-                    </span>
-                  </a>
-                </li>
+										<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+											<icon name="share" visuallyHidden="share"></icon>
+										</span>
+									</a>
+								</li>
 								<!-- Download -->
 								<li class="uk-text-center"
-                  [title]="'Download reports'"
-                  [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
-                  <a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="buildFunderOptions(); openDownloadReportsModal()">
-                    <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
-                      <icon name="download" visuallyHidden="download"></icon>
-                    </span>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+									[title]="'Download reports'"
+									[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+									<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="buildFunderOptions(); openDownloadReportsModal()">
+										<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+											<icon name="download" visuallyHidden="download"></icon>
+										</span>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
 				<!-- center/right column -->
 				<div class="uk-width-expand uk-padding-remove uk-background-default">
           <div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-flex-middle">
@@ -76,6 +76,25 @@
                   [URL]="properties.domain + properties.baseLink+this.properties.searchLinkToOrganization+organizationInfo.relcanId"
                   type="organization">
                 </schema2jsonld>
+								<!-- Actions for mobile viewport -->
+								<div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s">
+									<div class="uk-margin-small-right">
+										<a (click)="openAddThisModal()" [title]="'Share this organization in your social networks'"
+											[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="share" visuallyHidden="share"></icon>
+											</span>
+										</a>
+									</div>
+									<div [title]="'Download reports'"
+										[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+										<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="buildFunderOptions(); openDownloadReportsModal()">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="download" visuallyHidden="download"></icon>
+											</span>
+										</a>
+									</div>
+								</div>
                 <!-- Helper -->
                 <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                   [texts]="pageContents['top']"></helper>
diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html
index 83146de8..6ab169d7 100644
--- a/landingPages/project/project.component.html
+++ b/landingPages/project/project.component.html
@@ -4,7 +4,7 @@
       <div *ngIf="!showFeedback" class="uk-grid">
 
         <!-- left box - actions -->
-        <div *ngIf="projectInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
+        <div *ngIf="projectInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color uk-visible@s">
           <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
                uk-sticky="bottom: true" [attr.offset]="offset">
             <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@@ -113,8 +113,57 @@
               <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
                 <!--        schema.org-->
                 <schema2jsonld [data]=projectInfo
-                               [URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId"
-                               type="project"></schema2jsonld>
+															[URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId"
+															type="project"></schema2jsonld>
+								<!-- Actions for mobile viewport -->
+								<div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s">
+									<div class="uk-margin-small-right">
+										<a (click)="openAddThisModal()"
+											 [title]="'Share this project in your social networks'"
+											 [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="share" visuallyHidden="share"></icon>
+											</span>
+										</a>
+									</div>
+									<div *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-margin-small-right"
+											[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this project to '+openaireEntities.RESULTS+'<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
+											[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+										<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId, 'project','result'])"
+											 routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="link" visuallyHidden="link"></icon>
+											</span>
+										</a>
+									</div>
+									<div *ngIf="isRouteAvailable('participate/deposit/learn-how')" class="uk-margin-small-right"
+											[title]="'<span class=\'uk-flex uk-flex-middle\'>Deposit your research <span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
+											[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+										<a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="upload" visuallyHidden="upload"></icon>
+											</span>
+										</a>
+									</div>
+									<div class="uk-margin-small-right"
+											[title]="'Embed results'"
+											[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+										<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openEmbedResultsModal()">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="code_off" visuallyHidden="code"></icon>
+											</span>
+										</a>
+									</div>
+									<div class=""
+										[title]="'Download report'"
+										[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+										<a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openDownloadReportModal()">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="download" visuallyHidden="download"></icon>
+											</span>
+										</a>
+									</div>
+								</div>
                 <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                         [texts]="pageContents['top']"></helper>
 
diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index fb25b2da..61ba4617 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -4,7 +4,7 @@
       <div *ngIf="!showFeedback" class="uk-grid">
 
         <!-- left box - actions -->
-        <div *ngIf="resultLandingInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
+        <div *ngIf="resultLandingInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color uk-visible@s">
           <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
                uk-sticky="bottom: true" [attr.offset]="offset">
             <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@@ -112,7 +112,54 @@
               <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
         <!--        schema.org-->
                 <schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record
-                               [URL]="canonicalUrl"></schema2jsonld>
+															[URL]="canonicalUrl"></schema2jsonld>
+								<!-- Actions for mobile viewport -->
+								<div class="uk-flex uk-flex-right uk-margin-medium-bottom uk-hidden@s">
+									<!-- Share -->
+									<div class="uk-margin-small-right">
+										<a (click)="openAddThisModal()"
+											[title]="'Share this '+getTypeName() + ' in your social networks'"
+											[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+											<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+												<icon name="share" visuallyHidden="share"></icon>
+											</span>
+										</a>
+									</div>
+									<!-- Link to -->
+									<div *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-margin-small-right"
+											[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this '+getTypeName()+' to ...<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
+											[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+										<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
+											routerLinkActive="router-link-active" routerLink="/participate/direct-claim">
+										<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+											<icon name="link" visuallyHidden="link"></icon>
+										</span>
+										</a>
+									</div>
+									<!-- Cite this -->
+									<div class="uk-margin-small-right">
+										<a (click)="openCiteModal()"
+											[title]="'Cite this '+getTypeName()"
+											[attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
+										<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
+											<icon name="quotes" visuallyHidden="cite"></icon>
+										</span>
+										</a>
+									</div>
+									<!-- ORCID -->
+									<div *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community'"
+											class="uk-margin-small-right">
+										<orcid-work [resultId]="id" [resultTitle]="resultLandingInfo.title" [resultLandingInfo]="resultLandingInfo"
+																[pids]="pidsArrayString" [pageType]="'landing'">
+										</orcid-work>
+									</div>
+									<div *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
+									resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') && 
+									resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1"
+											class="">
+										<egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data>
+									</div>
+								</div>
                 <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
                         [texts]="pageContents['top']"></helper>