[Library | explore-redesign]: In small screens (mobile) open full screen modal when viewing all authors or all identifiers.

1. showAuthors.module.ts: Imported FullScreenModalModule.
2. showAuthors.component.ts & showIdentifiers.component.ts: Added @Input() isMobile: boolean = false; | Added <fs-modal> for view all authors, to trigger it when isMobile.
3. landing-header.component.ts: Added @Input() isMobile: boolean = false; | Pass input param isMobile to <showAuthors>.
4. resultLanding.component.html: Pass input param isMobile to <showSubjects>, <showIdentifiers>, <landing-header>.

landingPages/landing-utils/landing-header/landing-header.component.ts

@@ -25,12 +25,13 @@ import {AlertModal} from "../../../utils/modal/alert";
 			</div>
 			<div *ngIf="authors">
 				<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors"
-							 [isSticky]="isSticky"></showAuthors>
+							 [isSticky]="isSticky" [isMobile]="isMobile"></showAuthors>
 			</div>
 		</div>
 	`
 })
 export class LandingHeaderComponent {
+  @Input() isMobile: boolean = false;
 	@Input() entityType: string;
 	@Input() properties: EnvProperties;
 	@Input() types: string[];

landingPages/landing-utils/showIdentifiers.component.ts

@@ -47,14 +47,21 @@ import {properties} from "../../../../environments/environment";
       <a (click)="openIdentifiersModal()" class="view-more-less-link">View all</a>
     </div>
 
-    <modal-alert #identifiersModal>
+    <modal-alert *ngIf="!isMobile" #identifiersModal>
       <div class="uk-text-small">
         <ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container>
       </div>
     </modal-alert>
+
+    <fs-modal *ngIf="isMobile" #identifiersModal>
+      <div class="uk-text-small">
+        <ng-container *ngTemplateOutlet="identifiers_template; context: { modal: true}"></ng-container>
+      </div>
+    </fs-modal>
   `
 })
 export class ShowIdentifiersComponent implements AfterViewInit {
+  @Input() isMobile: boolean = false;
   @Input() identifiers: Map<string, string[]>;
   @Input() showViewAll: boolean = false;
   large: Map<string, boolean> = new Map<string, boolean>();
@@ -121,9 +128,15 @@ export class ShowIdentifiersComponent implements AfterViewInit {
   }
 
   public openIdentifiersModal() {
-    this.identifiersModal.cancelButton = false;
+    if(this.isMobile) {
-    this.identifiersModal.okButton = false;
+      this.identifiersModal.okButton = false;
-    this.identifiersModal.alertTitle = "Persistent Identifiers";
+      this.identifiersModal.title = "Persistent Identifiers";
-    this.identifiersModal.open();
+      this.identifiersModal.open();
+    } else {
+      this.identifiersModal.cancelButton = false;
+      this.identifiersModal.okButton = false;
+      this.identifiersModal.alertTitle = "Persistent Identifiers";
+      this.identifiersModal.open();
+    }
   }
 }

landingPages/result/resultLanding.component.html

@@ -472,12 +472,13 @@
 											[entityType]="getTypeName()" [types]="resultLandingInfo.types"
 											[date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate"
 											[publisher]="resultLandingInfo.publisher" [journal]="resultLandingInfo.journal"
-											[languages]="resultLandingInfo.languages" [programmingLanguages]="resultLandingInfo.programmingLanguages">
+											[languages]="resultLandingInfo.languages" [programmingLanguages]="resultLandingInfo.programmingLanguages"
+                      [isMobile]="true">
 			</landing-header>
 			<div class="uk-text-small">
 				<!-- Identifiers -->
 				<div *ngIf="resultLandingInfo.identifiers && resultLandingInfo.identifiers.size > 0" class="uk-margin-small-top">
-					<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
+					<showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true" [isMobile]="true"></showIdentifiers>
 				</div>
 				<!-- SDGs -->
 				<div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0 && !viewAllMobile" class="uk-margin-small-top">
@@ -849,7 +850,7 @@
                       [otherSubjects]="resultLandingInfo.otherSubjects"
                       [classifiedSubjects]="resultLandingInfo.classifiedSubjects"
                       [eoscSubjects]="resultLandingInfo.eoscSubjects"
-                      [isMobile]="isMobile"
+                      [isMobile]="isMobile">
                       [viewAllSubjects]="viewAllMobile=='subjects'"
                       [viewAllClassifiedSubjects]="viewAllMobile=='classifiedSubjects'"
                       (viewAllClicked)="viewAllSubjectsMobileClicked($event)">

utils/authors/showAuthors.component.ts

@@ -88,18 +88,27 @@ import {properties} from "../../../../environments/environment";
       </div>
     </div>
 
-    <modal-alert #authorsModal>
+    <modal-alert *ngIf="!isMobile" #authorsModal>
 			<div class="uk-text-small uk-text-emphasis uk-grid uk-grid-column-collapse uk-grid-row-small" uk-grid>
 				<ng-container *ngFor="let author of authors; let i=index">
 					<ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
 				</ng-container>
 			</div>
     </modal-alert>
+
+    <fs-modal *ngIf="isMobile" #authorsModal>
+      <div class="uk-text-small uk-text-emphasis uk-grid uk-grid-column-collapse uk-grid-row-small" uk-grid>
+        <ng-container *ngFor="let author of authors; let i=index">
+          <ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
+        </ng-container>
+      </div>
+    </fs-modal>
   `
   
 })
 
 export class ShowAuthorsComponent {
+  @Input() isMobile: boolean = false;
   @Input() authors: Author[];
   @Input() isSticky: boolean = false;
   @Input() authorsLimit: number = 7;
@@ -137,10 +146,16 @@ export class ShowAuthorsComponent {
   }
 
   public openAuthorsModal() {
-    this.authorsModal.cancelButton = false;
+    if (this.isMobile) {
-    this.authorsModal.okButton = false;
+      this.authorsModal.okButton = false;
-    this.authorsModal.alertTitle = "Authors";
+      this.authorsModal.title = "Authors";
-    this.authorsModal.open();
+      this.authorsModal.open();
+    } else {
+      this.authorsModal.cancelButton = false;
+      this.authorsModal.okButton = false;
+      this.authorsModal.alertTitle = "Authors";
+      this.authorsModal.open();
+    }
   }
 
   copyToClipboard(element: HTMLInputElement) {

utils/authors/showAuthors.module.ts

@@ -5,10 +5,11 @@ import {RouterModule} from '@angular/router';
 
 import {ShowAuthorsComponent} from './showAuthors.component';
 import {AlertModalModule} from "../modal/alertModal.module";
+import {FullScreenModalModule} from "../modal/full-screen-modal/full-screen-modal.module";
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, RouterModule, AlertModalModule
+    CommonModule, FormsModule, RouterModule, AlertModalModule, FullScreenModalModule
   ],
   declarations: [
     ShowAuthorsComponent