Merge pull request #312 from usnistgov/fix/ODD1086-minor-fixes

Fix LPS layout issues: (1) icon spacing, (2) home page button spacing, and (3) expansion bar for large file lists.
usnistgov · Jun 30, 2023 · 1dbdfea · 1dbdfea
2 parents 9cd4876 + 2780b23
commit 1dbdfea
Show file tree

Hide file tree

Showing 5 changed files with 21,175 additions and 29 deletions.
diff --git a/angular/src/app/landing/data-files/data-files.component.html b/angular/src/app/landing/data-files/data-files.component.html
@@ -1,7 +1,7 @@
 <!-- This bloack is for the data access session of landing page -->
 <!-- <div id="filelisting"> -->
 <div id="filelisting" *ngIf="displayMode != 'restrict_preview'"
-    [ngClass]="displayMode == 'restrict' ? 'restrict-public' : ''">
+    [ngClass]="displayMode == 'restrict' ? 'restrict-public' : ''" style="background-color: white;">
     <div *ngIf="displayMode == 'restrict'">Note: This dataset is designated as restricted public data; this file list
         will not be shown in the public version of this page.</div>
 
@@ -11,7 +11,7 @@
             <div class="flex-container" style="margin-top: 2em;">
                 <!-- 'Download all' and 'Add all to cart' buttons disabled if this is internal landing page -->
                 <div *ngIf="editEnabled; else editDisabled"
-                    style="flex: 0 0 120px; text-align: left; padding-bottom: 0em;">
+                    style="flex: 0 0 140px; text-align: left; padding-bottom: 0em;">
                     <span><b id="filelist-heading">Files </b> </span>
                     <span class="faa-stack fa-lg icon-download grey-color">
                         <i class="faa faa-circle-thin faa-stack-2x" aria-hidden="true"></i>
@@ -25,20 +25,23 @@
                     </span>
                 </div>
                 <ng-template #editDisabled>
-                    <div style="flex: 0 0 130px; text-align: left; padding-bottom: 0em;">
+                    <div style="flex: 0 0 140px; text-align: left; padding-bottom: 0em;">
                         <span><b id="filelist-heading">Files </b> </span>
+
                         <a class="faa-stack fa-lg icon-download" *ngIf="!editEnabled" (click)="downloadAllFiles()"
-                            data-toggle="tooltip" title="Download all files"
-                            [ngStyle]="{'color':getDownloadAllBtnColor(),'cursor':'pointer'}">
+                        data-toggle="tooltip" title="Download all files"
+                        [ngStyle]="{'color':getDownloadAllBtnColor(),'cursor':'pointer'}">
                             <i class="faa faa-circle-thin faa-stack-2x" aria-hidden="true"></i>
                             <!-- <i class="faa faa-download faa-stack-1x" aria-hidden="true"></i> -->
                             <i *ngIf="!isAddingToDownloadAllCart; else show_spinner1"
                                 class="faa faa-download faa-stack-1x" aria-hidden="true"></i>
                             <ng-template #show_spinner1><i class="faa faa-spinner faa-spin faa-stack-1x spinner"
                                     aria-hidden="true"></i></ng-template>
                         </a>
+
                         <a id="routeToDatacart" target="_blank" [routerLink]="['/datacart', 'popup']"
-                            style="display:none"></a>
+                        style="display:none"></a>
+
                         <span *ngIf="!editEnabled" class="faa-stack fa-lg icon-cart"
                             (click)="toggleAllFilesInGlobalCart(files)" [ngStyle]="{'color':getAddAllToDataCartBtnColor(), 'cursor': 'pointer',
                                 'margin-right': '1em'}" data-toggle="tooltip" [title]="getCartProcessTooltip()">

diff --git a/angular/src/app/landing/data-files/data-files.component.ts b/angular/src/app/landing/data-files/data-files.component.ts
@@ -244,7 +244,7 @@ export class DataFilesComponent implements OnInit, OnChanges {
         if(this.mouseDragging) {
             let diff = this.mouse.y - this.prevMouseY;
             this.treeTableHeight = this.prevTreeTableHeight + diff;
-            this.treeTableHeight = this.treeTableHeight < 26? 25 : this.treeTableHeight > 500? 500 : this.treeTableHeight;
+            this.treeTableHeight = this.treeTableHeight < 26? 25 : this.treeTableHeight;
         }
     }
 

diff --git a/angular/src/app/landing/sections/resourceidentity.component.html b/angular/src/app/landing/sections/resourceidentity.component.html
@@ -1,5 +1,5 @@
 <div class="grid" id="identity">
-    <div class="col-12 col-md-12 col-lg-12 col-sm-12">
+    <div style="width:100%">
         <span class="recordType">
             <b>{{recordType}}</b>
             <span *ngIf="theme == scienceTheme" class="badge version"> Beta</span>
@@ -10,15 +10,32 @@
           <i style="font-size: smaller;">Part of {{isPartOf[0]}} <a href="{{isPartOf[1]}}"
              title="view collection">{{isPartOf[2]}}</a> {{isPartOf[3]}}</i>
         </div>
+    </div>
+
+    <div style="width:100%">
+        <span *ngIf="showHomePageLink" style="float: right;">
+            <span *ngIf="inBrowser; else visitHomeOnServer">
+                <a href={{record.landingPage}} target="_blank">
+                    <button type="button" pButton type="submit" [disabled]="!inViewMode"
+                        class="home_button p-button p-component ui-button-text-empty"
+                        [ngStyle]="{'background-color': visitHomePageBtnStyle()}"
+                        (click)="googleAnalytics(record.landingPage, $event, 'Resource title: '+record.title)">
+                        <i class="faa faa-external-link"
+                            style="color: #fff;padding-left: .5em;padding-right: .5em;"></i>
+                        Visit Home Page
+                    </button>
+                </a> 
+            </span>
+            <ng-template #visitHomeOnServer>Visit Home Page</ng-template>
+        </span>
+
         <app-author [record]="record" [inBrowser]="inBrowser"></app-author>
 
         <!-- Facilitators -->
         <div *ngIf="theme == scienceTheme" style="width: 100%;" [ngStyle]="{'margin-bottom': record.creators? '15px' : '1.5em'}">
             <app-facilitators [record]="record" [inBrowser]="inBrowser"></app-facilitators>
         </div>
-    </div>
 
-    <div class="col-8 col-md-8 col-lg-8 col-sm-12">
         <app-contact [record]="record" [inBrowser]="inBrowser"></app-contact>
 
         <span>Identifier: </span>
@@ -45,23 +62,5 @@
         </div>
         <pdr-version [record]="record"></pdr-version>
     </div>
-
-    <div class="col-4 col-md-4 col-lg-4 col-sm-12">
-        <span *ngIf="showHomePageLink" style="float: right;">
-            <span *ngIf="inBrowser; else visitHomeOnServer">
-                <a href={{record.landingPage}} target="_blank">
-                    <button type="button" pButton type="submit" [disabled]="!inViewMode"
-                        class="home_button p-button p-component ui-button-text-empty"
-                        [ngStyle]="{'background-color': visitHomePageBtnStyle()}"
-                        (click)="googleAnalytics(record.landingPage, $event, 'Resource title: '+record.title)">
-                        <i class="faa faa-external-link"
-                            style="color: #fff;padding-left: .5em;padding-right: .5em;"></i>
-                        Visit Home Page
-                    </button>
-                </a> 
-            </span>
-            <ng-template #visitHomeOnServer>Visit Home Page</ng-template>
-        </span>
-    </div>
 </div>