GDQ banner & logo updates

app/javascript/application.js

@@ -63,6 +63,7 @@ import Chartkick from "chartkick";
 window.Chartkick = Chartkick;
 
 import "./analytics.js";
+import "./banner.js";
 import "./collapse.js";
 import "./count.js";
 import "./dropdown.js";

app/javascript/banner.js

@@ -0,0 +1,41 @@
+// Allows any number of dismissable banners to be placed,
+// with dismissal state for each saved in localStorage.
+//
+// To use, give your banner element the class "banner" and an ID.
+// (You must never change the ID, or the dismissal state will be lost.)
+// Give the banner an initial display state of "none".
+// Inside the banner, place a button with the class "banner-close".
+// That's it!
+//
+// Example in Slim:
+//
+// # Note: Do not use the d-none Bootstrap helper, as it uses !important.
+// .banner#my-banner-name style="display: none"
+//   | This is a banner.
+//   button.btn.btn-secondary.banner-close Close
+
+const initBanners = function () {
+  for (const element of document.getElementsByClassName("banner")) {
+    const storageKey = element.id;
+    if (localStorage.getItem(storageKey) === "hide") {
+      return;
+    }
+    element.style.display = "block";
+  }
+};
+
+document.addEventListener("turbolinks:load", initBanners);
+
+document.addEventListener("click", (event) => {
+  const element = event.target;
+  if (element.classList.contains("banner-close")) {
+    const bannerCloseButton = element;
+    const banner = bannerCloseButton.closest(".banner");
+    if (banner === null) {
+      return;
+    }
+    const storageKey = banner.id;
+    localStorage.setItem(storageKey, "hide");
+    banner.style.display = "none";
+  }
+});

app/models/duration.rb

@@ -21,7 +21,7 @@ def format(precise: false, sign: :negatives)
     return "-" if @duration.nil?
 
     format = ["%02d", ":%02d", ":%02d"]
-    components = [hours, minutes, seconds]
+    components = [hours || 0, minutes || 0, seconds || 0]
 
     if precise
       format << ".%02d"

app/views/layouts/application.slim

@@ -129,27 +129,14 @@ html lang='en'
                   h5 Sign in
                 .modal-body.bg-dark
                   = render partial: 'sessions/sign_in'
-        article.pt-0#survey-container style='display: none'
-          div.text-right
-            small: #hide-survey-button.text-secondary style='cursor: pointer' no thanks
-          a#survey-button.btn.btn-outline-warning.btn-block.mb-0.text-center href=survey_url
-            ' Help us out by taking the Splits.io survey!
         - entry = current_user.present? ? current_user.entries.nonghosts.active.first : nil
         - if entry.present? && request.path != race_path(entry.race)
           .p-1.col-md-6.mx-auto
             a.btn.btn-success.btn-block.mb-0.text-center.glow href=race_path(entry.race)
               => icon('fas', 'flag-checkered')
               | Return to race
         header#header.m-1.p-0 = yield(:header)
-        - if current_user && current_user.email.nil?
-          .alert.alert-warning
-            ' You don't have an email attached to your Splits.io account. If
-            ' you become locked out your account will be irrecoverable.
-            ' Please add an email address from the
-            a href=settings_path settings page
-            ' .
-        .row.mx-2: #alerts.w-100 data-turbolinks-temporary=true
-          = render partial: 'shared/alerts'
+        = render partial: 'shared/banners'
         = yield
         - unless on_landing_page?
           footer#footer

app/views/runs/_landing.slim

@@ -1,9 +1,9 @@
 #chart-holder
   .position-relative.overflow-hidden.p-3.p-md-5.m-md-3.text-center.bg-darkish
-    .col-md-5.p-lg-5.mx-auto.text-center
-      .display-4
-        img.d-inline src=asset_path('logo-imageonly.svg') height='75' style='margin-right: 0' alt='Splits.io image only logo'
-        img.d-sm-inline.d-md-none.d-xl-inline src=asset_path('logo-textonly.svg') height='75' style='margin-top: .1em' alt='Splits.io text only logo'
+    .col-md-10.col-xs-12.col-sm-10.p-lg-5.mx-auto.text-center
+      .display-5
+        img.d-none.d-sm-inline src=asset_path('logo-imageonly.svg') height='75' style='margin-right: 0' alt='Splits.io image only logo'
+        img.d-none.d-sm-inline src=asset_path('logo-textonly.svg') height='75' style='margin-top: .1em' alt='Splits.io text only logo'
       p.lead Statistical analysis & run sharing for speedrunners. Replace mindless grinding with targeted, hard data.
       a.btn.btn-lg.btn-primary href='#' data={toggle: :modal, target: '#signin'} Get started
       b.text-secondary.d-block.mt-3

app/views/shared/_banners.slim

@@ -0,0 +1,29 @@
+article.pt-0.mb-3#survey-container style='display: none; max-width: 50em;'
+  div.text-right
+    small: #hide-survey-button.text-secondary style='cursor: pointer' no thanks
+  a#survey-button.btn.btn-secondary.btn-block.mb-0.text-center target='_blank' href=survey_url
+    ' Help us out by taking the Splits.io survey!
+- if current_user && current_user.email.nil?
+  .alert.alert-warning
+    ' You don't have an email attached to your Splits.io account. If
+    ' you become locked out your account will be irrecoverable.
+    ' Please add an email address from the
+    a href=settings_path settings page
+    ' .
+/ .banner.alert.alert-success.col-md-6.mx-auto#shutdown-saved-banner style="display: none"
+/   ' Thanks to help from
+/   a.alert-link target='_blank' href='https://gamesdonequick.com' Games Done Quick
+/   ', Splits.io's plans to shut down have been canceled!
+/   a.float-right.alert-link.banner-close style="cursor: pointer" X
+.m-2: .banner.alert.alert-success.col-md-12.col-lg-10.col-xl-8.mx-auto#gdq-test-banner style="display: none"
+  a.alert-link target='_blank' href='https://gamesdonequick.com' Awesome Games Done Quick
+  '< is happening right now!
+  - button_link = 'https://gamesdonequick.com'
+  .d-block.d-lg-none.mt-4
+    a.btn-sm.btn-success.mr-3.p-2 target='_blank' href='#{button_link}' Watch
+    a.alert-link.banner-close style="cursor: pointer" Dismiss
+  .float-right.d-none.d-lg-block
+    a.btn-sm.btn-success.mr-3.p-2 target='_blank' href='#{button_link}' See Schedule
+    a.alert-link.banner-close style="cursor: pointer" X
+.row.mx-2: #alerts.w-100 data-turbolinks-temporary=true
+  = render partial: 'shared/alerts'