add subjects as a new tab in resultLanding

landingPages/landing-utils/showSubjects.component.ts

@@ -26,7 +26,7 @@ import {properties} from "../../../../environments/environment";
     </ng-container>
     <ng-container  *ngIf="!viewAllClassifiedSubjects && ((subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0))">
       <div *ngIf="!viewAllSubjects" class="uk-text-meta uk-margin-small-bottom" [class.uk-margin-medium-top]="classifiedSubjects && classifiedSubjects.size > 0">
-        Subjects
+        Keywords
       </div>
       <ng-container *ngTemplateOutlet="subjects_template; context: {customClasses: (isMobile && viewAllSubjects) ? '' : 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
       <div *ngIf="isLarge && !viewAllSubjects" class="uk-text-right uk-margin-small-top">
@@ -215,7 +215,7 @@ export class ShowSubjectsComponent {
     if(this.isMobile) {
       this.viewAllSubjects = true;
       this.viewAllClicked.emit({
-        subtitle: 'Subjects',
+        subtitle: 'Keywords',
         id: 'subjects'
       });
     } else {

landingPages/result/resultLanding.component.html

@@ -286,6 +286,9 @@
                     <!-- <showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
                     <my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
                       <my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
+                      <my-tab *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects"
+                              [tabTitle]="'Subjects'" [tabId]="'subjects'">
+                      </my-tab>
                       <my-tab *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"
                               [tabTitle]="'References'" [tabId]="'references'"
                               [tabNumber]="resultLandingInfo.references.length">
@@ -312,6 +315,9 @@
                   <ng-container>
                     <ng-container *ngTemplateOutlet="summary_content"></ng-container>
                   </ng-container>
+                  <ng-container *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects">
+                    <ng-container *ngTemplateOutlet="subjects_content"></ng-container>
+                  </ng-container>
                   <ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
                     <ng-container *ngTemplateOutlet="references_content"></ng-container>
                   </ng-container>
@@ -512,6 +518,13 @@
           </div>
           <hr>
         </ng-container>
+        <ng-container *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects">
+          <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(subjectsFsModal, 'Subjects'); onSelectActiveTab('subjects')">
+            <span>Subjects</span>
+            <icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
+          </div>
+          <hr>
+        </ng-container>
         <ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
           <div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(referencesFsModal, 'References'); onSelectActiveTab('references')">
             <span>References</span>
@@ -660,6 +673,13 @@
       <ng-container *ngTemplateOutlet="summary_content"></ng-container>
     </fs-modal>
 
+    <fs-modal #subjectsFsModal classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="cancelSubjectsClicked()"
+              *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects">
+      <ng-container *ngIf="activeTab == 'subjects'">
+        <ng-container *ngTemplateOutlet="subjects_content"></ng-container>
+      </ng-container>
+    </fs-modal>
+
     <fs-modal #referencesFsModal classTitle="uk-tile-default uk-border-bottom"
               *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
       <ng-container *ngTemplateOutlet="references_content"></ng-container>
@@ -854,20 +874,6 @@
           {{resultLandingInfo.countries.join(", ")}}
         </div>
       </div>
-      <div *ngIf="(resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects)
-                  && (!viewAllMobile || viewAllMobile == 'subjects' || viewAllMobile == 'classifiedSubjects')
-                  && (!isMobile || tabMobile=='Summary')"
-           class="uk-margin-medium-bottom">
-        <showSubjects [subjects]="resultLandingInfo.subjects"
-                      [otherSubjects]="resultLandingInfo.otherSubjects"
-                      [classifiedSubjects]="resultLandingInfo.classifiedSubjects"
-                      [eoscSubjects]="resultLandingInfo.eoscSubjects"
-                      [isMobile]="isMobile">
-                      [viewAllSubjects]="viewAllMobile=='subjects'"
-                      [viewAllClassifiedSubjects]="viewAllMobile=='classifiedSubjects'"
-                      (viewAllClicked)="viewAllSubjectsMobileClicked($event)">
-        </showSubjects>
-      </div>
       <!-- Related Organizations-->
       <div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0 && (!viewAllMobile || viewAllMobile == 'organizations')"
            class="uk-margin-medium-bottom uk-width-2-3@m">
@@ -890,6 +896,20 @@
   </div>
 </ng-template>
 
+<ng-template #subjects_content>
+  <div id="subjects" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
+    <showSubjects [subjects]="resultLandingInfo.subjects"
+                  [otherSubjects]="resultLandingInfo.otherSubjects"
+                  [classifiedSubjects]="resultLandingInfo.classifiedSubjects"
+                  [eoscSubjects]="resultLandingInfo.eoscSubjects"
+                  [isMobile]="isMobile"
+                  [viewAllSubjects]="viewAllMobile=='subjects'"
+                  [viewAllClassifiedSubjects]="viewAllMobile=='classifiedSubjects'"
+                  (viewAllClicked)="viewAllSubjectsMobileClicked($event)">
+    </showSubjects>
+  </div>
+</ng-template>
+
 <ng-template #references_content>
   <div id="references" class="landing-section uk-padding uk-padding-remove-horizontal">
     <results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"

landingPages/result/resultLanding.component.ts

@@ -156,6 +156,7 @@ export class ResultLandingComponent {
   public isMobile: boolean = false;
   // Full screen modals for small screens (mobile)
   @ViewChild('summaryFsModal') summaryFsModal: FullScreenModalComponent;
+  @ViewChild('subjectsFsModal') subjectsFsModal: FullScreenModalComponent;
   @ViewChild('referencesFsModal') referencesFsModal: FullScreenModalComponent;
   @ViewChild('relatedResearchFsModal') relatedResearchFsModal: FullScreenModalComponent;
   @ViewChild('bioentitiesFsModal') bioentitiesFsModal: FullScreenModalComponent;
@@ -577,8 +578,6 @@ export class ResultLandingComponent {
   public get hasPrimaryInfo(): boolean {
         return !!this.resultLandingInfo && (
       (!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0)
-      || !!this.resultLandingInfo.subjects
-      || (this.resultLandingInfo.classifiedSubjects && this.resultLandingInfo.classifiedSubjects.size > 0)
       || (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0));
   }
 
@@ -927,9 +926,9 @@ export class ResultLandingComponent {
     }
   }
 
-  public viewAllSubjectsMobileClicked(event: string) {
+  public viewAllSubjectsMobileClicked(event) {
-    this.summaryFsModal.title += " - "+event['subtitle'];
+    this.subjectsFsModal.title += " - "+event['subtitle'];
-    this.summaryFsModal.back = true;
+    this.subjectsFsModal.back = true;
     this.viewAllMobile = event['id'];
   }
 
@@ -947,6 +946,12 @@ export class ResultLandingComponent {
     this.viewAllMobile = "";
   }
 
+  public cancelSubjectsClicked() {
+    this.subjectsFsModal.title = "Subjects";
+    this.subjectsFsModal.back = false;
+    this.viewAllMobile = "";
+  }
+
   public openOrganizationsModal() {
     this.organizationsModal.cancelButton = false;
     this.organizationsModal.okButton = false;