[Library | develop]: resultLanding.component.html & resultLanding.component.ts & transferData.component.html & transferData.component.ts: In desktop view, reverted data transfer modal to normal instead of full screen & small fixes for action icon and modal view | aligned "Go to search" back button with the rest of the page contents.

landingPages/result/resultLanding.component.html

@@ -3,7 +3,7 @@
   <div *ngIf="!isMobile" class="tm-main">
     <div  class="publication">
       <div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
-        <div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
+        <div class="uk-light uk-container uk-container-large uk-margin-left uk-height-1-1">
           <div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
             <a [href]="eoscBackLink" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
               <icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
@@ -489,6 +489,16 @@
 <!-- Mobile view -->
 <div *ngIf="isMobile" class="uk-hidden@m uk-position-relative landing">
   <ng-container *ngIf="resultLandingInfo">
+    <div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
+      <div class="uk-light uk-container uk-height-1-1">
+        <div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
+          <a [href]="eoscBackLink" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
+            <icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
+            <span class="uk-margin-small-left">Go to Search</span>
+          </a>
+        </div>
+      </div>
+    </div>
     <div *ngIf="mobileContent == 'info'" class="uk-container uk-section">
       <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0"
         class="uk-margin-small-bottom uk-flex uk-flex-middle"
@@ -648,13 +658,21 @@
         </a>
         <hr class="uk-margin-remove">
       </ng-container>
-
+      <ng-container>
+        <div *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
+                              resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') &&
+                              resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1"
+             class="clickable uk-button-link uk-flex uk-flex-middle uk-h6 uk-margin-remove uk-padding-small uk-padding-remove-horizontal">
+          <egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen" [isMobile]="true"></egi-transfer-data>
+        </div>
+        <hr class="uk-margin-remove">
+      </ng-container>
     </div>
 
     <div class="landing-action-bar-mobile uk-background-default">
       <div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="(resultLandingInfo.measure || hasAltMetrics) ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
         <div>
-          <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'">
+          <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; egiTransferModalOpen = false;">
             <span [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''">
             <icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon>
             <icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon>

landingPages/result/resultLanding.component.ts

@@ -239,6 +239,7 @@ export class ResultLandingComponent {
         this.initMetaAndLinks(this.type);
       }
       if(data["egiTransfer"] && data["egiTransfer"] == 't'){
+        this.mobileContent = 'actions';
         this.egiTransferModalOpen = true;
       }
       this.updateDescription("");

utils/dataTransfer/transferData.component.html

@@ -1,16 +1,28 @@
 		<a (click)="open()"
        [title]="'Send data to cloud storage'"
        [attr.uk-tooltip]="'pos: bottom; cls: uk-active  uk-text-small uk-padding-small'"
-			class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
+       class="uk-flex uk-flex-middle uk-flex-center uk-button-link"
-			<icon flex="true" ratio="0.8" name="cloud_upload" visuallyHidden="upload"></icon>
+       [class.uk-text-bolder]="!isMobile">
-			<span class="uk-margin-xsmall-left">Transfer</span>
+			<icon flex="true" ratio="1" name="cloud_upload" visuallyHidden="upload"></icon>
+      <span [ngClass]="isMobile ? 'uk-margin-small-left' : 'uk-margin-xsmall-left'">Transfer</span>
     </a>
 
-
       <!-- This is the modal -->
-      <fs-modal #egiTransferModal classBody="uk-container-xlarge" [okButtonDisabled]="destinationPath.length == 0 || status == 'succeeded'
+      <modal-alert #egiTransferModal classBody="uk-container-xlarge" large="true"
-      || (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
+                   [okDisabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded' || (requests > 0)
+                                || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
+                   (alertOutput)="transfer()" (cancelOutput)="init()">
+        <ng-container *ngTemplateOutlet="modalContents;"></ng-container>
+      </modal-alert>
+
+    <fs-modal #egiTransferFsModal classTitle="uk-tile-default uk-border-bottom" classBody="uk-container-xlarge"
+                 [okButtonDisabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded' || (requests > 0)
+                                || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
                  (okEmitter)="transfer()" (cancelEmitter)="init()">
+      <ng-container *ngTemplateOutlet="modalContents;"></ng-container>
+    </fs-modal>
+
+    <ng-template #modalContents>
       <div *ngIf="!accessToken" class="">
         <div class="uk-width-1-1 uk-margin-bottom uk-text-center">
           In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in.
@@ -24,7 +36,7 @@
         <div class="uk-width-1-1 uk-margin-bottom uk-text-center">
           You have requested to send the data corresponding to the DOI <a [href]="selectedSourceUrl" target="_blank">{{selectedSourceUrl.split(doiPrefix)[1]}}</a> to a cloud storage using the EOSC Data Transfer service
         </div>
-          <div class="uk-grid uk-grid-small uk-child-width-1-2 uk-grid-divider">
+        <div class="uk-grid uk-grid-small uk-child-width-1-2@m uk-grid-divider">
           <!--            Source -->
           <div class="uk-first-column source">
             <p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available DOI URLs:</p>
@@ -42,7 +54,7 @@
             </div>
           </div>
           <!--            Destination -->
-            <div *ngIf="destinationOptions" class="destination">
+          <div *ngIf="destinationOptions" class="destination" [class.uk-margin-top]="isMobile">
             <!--              -->
             <!--              Testing:<br>-->
             <!--              https://dcache-demo.desy.de:2443-->
@@ -96,7 +108,7 @@
               <span class="uk-margin-small-left uk-text-small">*I have read and accepted the data protection policy <a class="custom-external" href="https://www.openaire.eu/data-protection-policy" target="_blank">here</a>.</span>
             </div>
 
-              <div class="uk-align-right uk-margin-medium-top uk-margin-bottom">
+            <div *ngIf="isMobile" class="uk-align-right uk-margin-medium-top uk-margin-bottom">
               <button class="uk-button uk-button-primary"
                       [disabled]="!privacyAccepted || destinationPath.length == 0 || status == 'succeeded'
                 || (requests > 0) || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
@@ -155,7 +167,7 @@
           </button>-->
         <!--          End of TESTS-->
       </div>
-      </fs-modal>
+    </ng-template>
 
 <!--      Browse Templates -->
     <ng-template #folderListTmpl let-folder="folder"  let-folderPath="folderPath" >

utils/dataTransfer/transferData.component.ts

@@ -10,6 +10,7 @@ import {delay, repeat, startWith, switchMap} from "rxjs/operators";
 import {StringUtils} from "../string-utils.class";
 import {HelperFunctions} from "../HelperFunctions.class";
 import {FullScreenModalComponent} from "../modal/full-screen-modal/full-screen-modal.component";
+import {AlertModal} from "../modal/alert";
 declare var UIkit;
 
 @Component({
@@ -35,6 +36,7 @@ declare var UIkit;
   `]
 })
 export class EGIDataTransferComponent {
+  @Input() isMobile: boolean = false;
   subscriptions = [];
   statusSub: Subscription[] = [];
   accessToken =  null;
@@ -55,7 +57,8 @@ export class EGIDataTransferComponent {
   downloadElements = null;
   @Input() isOpen = false;
   // @Input() selectedDestinationId = "dcache";
-  @ViewChild('egiTransferModal') egiTransferModal: FullScreenModalComponent;
+  @ViewChild('egiTransferModal') egiTransferModal: AlertModal;
+  @ViewChild('egiTransferFsModal') egiTransferFsModal: FullScreenModalComponent;
   APIURL =  properties.eoscDataTransferAPI;
   // status: "loading" | "success" | "errorParser" | "errorUser" | "errorTransfer" | "init"  | "canceled" = "init";
   status: "unused" | "staging" | "submitted" | "active" | "succeeded" | "partial" |  "failed" | "canceled" | "errorParser" | "errorUser" | "init" = "init";
@@ -146,20 +149,36 @@ export class EGIDataTransferComponent {
       this.parse();
     }
     this.isOpen = true;
-    this.egiTransferModal.back = true;
-    this.egiTransferModal.cancelButton = false;
-    this.egiTransferModal.okButton = false;
-    this.egiTransferModal.okButtonText = ">> Transfer";
-    this.egiTransferModal.title = "EOSC Data Transfer";
     this.init();
+
+    if(!this.isMobile) {
+      // this.egiTransferModal.back = true;
+      this.egiTransferModal.cancelButton = false;
+      this.egiTransferModal.okButton = true;
+      this.egiTransferModal.okButtonText = ">> Transfer";
+      this.egiTransferModal.alertTitle = "EOSC Data Transfer";
       if(typeof document !== 'undefined') {
         this.egiTransferModal.open();
       }
+    } else {
+      this.egiTransferFsModal.back = false;
+      this.egiTransferFsModal.cancelButton = true;
+      this.egiTransferFsModal.okButton = false;
+      this.egiTransferFsModal.okButtonText = ">> Transfer";
+      this.egiTransferFsModal.title = "EOSC Data Transfer";
+      if(typeof document !== 'undefined') {
+        this.egiTransferFsModal.open();
+      }
+    }
   }
   close(){
     if(this.isOpen) {
       this.isOpen = false;
+      if(!this.isMobile) {
         this.egiTransferModal.cancel();
+      } else {
+        this.egiTransferFsModal.cancel();
+      }
     }
     // this.downloadElements = [];
     this.init();