Fixed footer link layout.

Author: chuanlin2018

angular/src/app/frame/footbar/footbar.component.css

@@ -403,3 +403,60 @@ display: block;
 .x-icon:hover {
   background-color: lightgray;
 }
+
+.footerlinks {
+    width: 100%;
+    padding: 16px 20px;
+    color: white;
+    background: #000;
+    box-sizing: border-box;
+}
+
+.footerlinks-content {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+}
+
+/* LINKS */
+.footerlinks {
+    grid-column: 2;
+    max-width: calc(100% - 108px);
+    margin: 0 auto;
+    text-align: center;
+    line-height: 1.8;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    /* critical: prevent overlap with logo */
+    padding-right: 20px;
+}
+
+/* Links */
+.footerlinks a {
+    text-decoration: none;
+    /* color: #333; */
+    margin: 0 6px;
+    white-space: nowrap;
+}
+
+.separator {
+    margin: 0 4px;
+    color: #999;
+}
+
+/* LOGO */
+.ctslogo {
+    grid-column: 3;
+    justify-self: end;
+}
+
+/* Dynamic logo sizing */
+.ctslogo img {
+    max-width: 108px;
+    max-height: 108px;
+    width: auto;
+    height: auto;
+}

angular/src/app/frame/footbar/footbar.component.html

@@ -29,38 +29,28 @@
               title="National Institute of Standards and Technology">
           </a>
       </div>
+    </div>
 
-        <div class="footer-links-and-seal">
-            <div class="footer-links">
-                <!-- Footer links line #1 -->
-                <div id="block-menu-menu-footer-menu" *ngIf="footerLinks01"
-                class="block menu--footer-menu first even block--menu block--menu-menu-footer-menu" role="navigation">
-                    <ul class="menu">
-                        <li *ngFor="let link of footerLinks01; let i = index" [ngClass]="getLinkClass(i, footerLinks01)">
-                            <a [href]="link.url" target="_blank" rel="noopener" class="menu__link">{{link.title}} </a>
-                        </li>
-                    </ul>
-                </div>
-
-                <!-- Footer links line #2 -->
-                <div id="block-menu-menu-footer-menu-3" *ngIf="footerLinks02"
-                class="block menu--footer-menu last even block--menu block--menu-menu-footer-menu-3" role="navigation">
-                    <ul class="menu">
-                        <li *ngFor="let link of footerLinks02; let i = index" [ngClass]="getLinkClass(i, footerLinks02)">
-                            <a [href]="link.url" target="_blank" rel="noopener" class="menu__link">{{link.title}} </a>
-                        </li>
-                    </ul>
-                </div>
+    <div class="footerlinks">
+        <div class="footerlinks-content">
+            <div class="footerlinks">
+                <span *ngFor="let link of footerLinks01; let i = index">
+                    <a [href]="link.url">{{ link.title }}</a>
+                    <span *ngIf="i < footerLinks01.length - 1" class="separator">|</span>
+                </span>
             </div>
-            <div class="core-trust-seal">
-                <a
-                  href="https://www.coretrustseal.org/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  title="CoreTrustSeal">
-                    <img
-                      src="assets/images/core-trust-seal-logo.png"
-                      alt="CoreTrustSeal logo">
+
+
+            <div class="ctslogo">
+                <a 
+                    href="https://www.coretrustseal.org/" 
+                    target="_blank" 
+                    rel="noopener noreferrer" 
+                    title="CoreTrustSeal">
+
+                    <img 
+                        src="assets/images/core-trust-seal-logo.png" 
+                        alt="CoreTrustSeal logo">
                 </a>
             </div>
         </div>

angular/src/app/frame/footbar/footbar.component.ts

@@ -16,9 +16,6 @@ export class FootbarComponent implements OnInit {
     // Footer link line #1
     footerLinks01: any[];
 
-    // Footer link line #2
-    footerLinks02: any[];
-
     constructor(public gaService: GoogleAnalyticsService) { 
         // For some reason, footerlinks does not have "default" field in unit test
         // So we have to use following condition to make both production and unit test work. 
@@ -30,7 +27,6 @@ export class FootbarComponent implements OnInit {
         // Add footerLinks to the condition to avoid unit test error
         this.socialMediaList = this.footerLinks.socialMediaList;
         this.footerLinks01 = this.footerLinks.footerLinks01;
-        this.footerLinks02 = this.footerLinks.footerLinks02;
     }
 
     ngOnInit() {

angular/src/assets/site-constants/footer-links.json

@@ -76,9 +76,7 @@
         {
             "title": "Information Quality Standards",
             "url": "https://www.nist.gov/nist-information-quality-standards"
-        }
-    ],
-    "footerLinks02": [
+        },
         {
             "title": "Commerce.gov",
             "url": "https://www.commerce.gov/"
@@ -90,6 +88,6 @@
         {
             "title": "USA.gov",
             "url": "http://www.usa.gov/"
-        }
+        }        
     ]
 }