Add analytics warning and fix half-page-size navbar

tf_oss_dashboard/script.js

@@ -156,6 +156,8 @@ $(function () {
     }
   }
 
+  // When a user clicks a "Reveal All" button in a commit view, reveal all
+  // badges on all job cards that refer to that same commit.
   let revealed = null
   $(".tf-reveal").click(function() {
     if (revealed !== null) {
@@ -164,4 +166,13 @@ $(function () {
     revealed = $(this).attr("data-tf-reveal")
     $(".badge[data-bs-target='" + revealed + "']").removeClass("tf-last-clicked").addClass("tf-revealed")
   })
+
+  // Display warning banner if use of analytics cookies hasn't been acknowledged
+  if (location.hostname !== "" && !Cookies.get("tf-cookies-accepted")) {
+    $(".tf-cookie-warning").removeClass("d-none")
+  }
+  $(".tf-cookie-warning").click(function() {
+    $(this).addClass("d-none")
+    Cookies.set("tf-cookies-accepted", true)
+  })
 })

tf_oss_dashboard/style.css

@@ -19,7 +19,7 @@ body {
 /* =============================== */
 /* NAVBAR AND TOGGLE FEATURES */
 /* =============================== */
-.navbar {
+.navbar-dark {
   background-color: #002 !important;
 }
 

tf_oss_dashboard/template.html.pug

@@ -7,6 +7,7 @@ html(lang="en")
     link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous")
     script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous")
     script(src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous")
+    script(src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer")
     link(rel="stylesheet" href="style.css")
     //- Google Analytics. Conditionally enabled if "gtag" is set in config.yaml
@@ -18,16 +19,24 @@ html(lang="en")
         gtag('js', new Date());
         gtag('config', "#{yaml['gtag']}");
   body
+    .tf-cookie-warning.p-2.bg-warning.navbar-text.d-none
+      .text-center The TensorFlow GitHub CI Dashboard uses cookies from Google to analyze traffic. 
+        a(href="https://policies.google.com/technologies/cookies") Learn more.
+        a.fw-bold.ps-4#tf-accept-cookies(role="button") Ok, got it
+
     nav.navbar.navbar-dark.navbar-expand-lg.py-0.mb-2
       .container-fluid.py-0
-        .d-flex.flex-row
         a(href=).navbar-brand TensorFlow GitHub CI
-          .navbar-text#tf-now(data-isonow=isonow) Last updated on 
+        .align-self-start.navbar-text#tf-now(data-isonow=isonow) Updated 
           a(title="Check the dashboard deployment GitHub Actions workflow" href="https://github.com/tensorflow/build/actions/workflows/dashboard.yml") #{now}
           |  
           a#tf-ago
-            .tf-refresh-timer(title="The page auto-refreshes every 5 minutes (delayed if a modal is open) to check and see if the dashboard has been updated.")
-        ul.navbar-nav
+          .ps-1.tf-refresh-timer(title="The page auto-refreshes every 5 minutes (delayed if a modal is open) to check and see if the dashboard has been updated.")
+        .flex-grow-1
+        button.navbar-toggler(type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation")
+          span.navbar-toggler-icon
+        .collapse.navbar-collapse#navbarToggle
+          ul.navbar-nav.ms-auto
             .form-check.form-switch.m-auto
               input.form-check-input(title="Toggle failure section" type="checkbox" role="switch" id="tf-show-buildcop")
             .form-check.form-switch.m-auto