Merge pull request #346 from usnistgov/ux/core-seal-logo

Footer: add CoreTrustSeal logo

Author: RayPlante

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

@@ -3,6 +3,7 @@
   background: #000;
   color: white;
   position: relative;
+  --footer-right-offset: 1em;
 }
 
 .footer__inner {
@@ -120,7 +121,52 @@ ul, menu, dir {
 
 #footer .social-links {
   float: right;
-  margin-right: 1em;
+  margin-right: var(--footer-right-offset);
+}
+
+.footer-links-and-seal {
+  clear: both;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  gap: 1rem;
+}
+
+.footer-links {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.footer-links .menu--footer-menu {
+  clear: none;
+}
+
+.footer-links .menu--footer-menu ul.menu {
+  text-align: left;
+}
+
+.core-trust-seal {
+  flex: 0 0 auto;
+  text-align: right;
+  margin-right: var(--footer-right-offset);
+}
+
+.core-trust-seal a {
+  display: inline-block;
+}
+
+.core-trust-seal img {
+  height: clamp(72px, 6vw, 108px);
+  width: auto;
+  max-width: 100%;
+  display: block;
+}
+
+@media (max-width: 900px) {
+  .footer-links-and-seal {
+    align-items: center;
+  }
 }
 
 .social-btn--large {
@@ -357,3 +403,67 @@ 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 {
+    width: 100%;
+    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;
+}
+
+.spaceholder {
+    grid-column: 1;
+    max-width: 108px;
+    max-height: 108px;
+    width: 108px;
+    height: 108px;
+}

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

@@ -29,25 +29,33 @@
               title="National Institute of Standards and Technology">
           </a>
       </div>
+    </div>
 
-        <!-- 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>
+    <div class="footerlinks">
+        <div class="footerlinks-content">
+            <div class="spaceholder">
+            </div>
+            
+            <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>
 
-        <!-- 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 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>
     </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/images/core-trust-seal-logo.png

@@ -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/"
-        }
+        }        
     ]
 }