Add Dismiss Button to Banner (MLTSHP#636)

* add markup and styles for banner dismiss button * hide banner by default * Make alert dismissable and persistent. Co-authored-by: Brad Choate <[email protected]>
macmanx2 · Oct 23, 2020 · 4df8fed · 4df8fed
1 parent 63234aa
commit 4df8fed
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/static/js/main.js b/static/js/main.js
@@ -1629,5 +1629,21 @@ $(document).ready(function() {
       var shake_member_list = new ShakeMemberList($shake_member_list);
     }
 
+    // support for dismissable "Vote 2020" banner; cookie naturally expires on Nov 4th
+    var alertVote2020 = $("#alert-vote-2020");
+    var alertVote2020CookieVal = 'dismiss-alert-vote-2020=1';
+    var alertVote2020Expires = new Date('2020-11-04T00:00:00');
+    if (document.cookie.indexOf(alertVote2020CookieVal) === -1 &&
+      (new Date()) < alertVote2020Expires) {
+      alertVote2020.css({ display: 'block' });
+      alertVote2020.find('button').click(function() {
+        document.cookie = [
+          alertVote2020CookieVal,
+          'expires=' + alertVote2020Expires.toGMTString(),
+          'path=/'
+        ].join('; ');
+        alertVote2020.css({ display: 'none' });
+      });
+    }
 
 });
diff --git a/templates/base.html b/templates/base.html
@@ -56,17 +56,28 @@
     {% end %}
 </head>
 <body>
-    <div
+    <div id="alert-vote-2020"
         class="alert alert--warning"
         style="text-align: center;
             background-image: url('/static/images/mltshp-flag.svg');
             background-position: 12px center;
             background-size: 48px;
             background-repeat: no-repeat;
-            padding-left: 72px;"
+            padding-left: 72px;
+            display: none;"
         >
-        It is very important that Americans <a href="https://www.aclu.org/voter/">vote in the upcoming election</a>.
-        If you’ve voted, tag your post&nbsp;<a href="https://mltshp.com/tag/IVoted">#IVoted</a>!
+        <div style="display: flex; align-items: center;">
+            <span class="alert__content" style="flex: 1;">
+                It is very important that Americans <a href="https://www.aclu.org/voter/">vote in the upcoming election</a>.
+                If you’ve voted, tag your post&nbsp;<a href="https://mltshp.com/tag/IVoted">#IVoted</a>!
+            </span>
+            <button
+            aria-label="Dismiss Banner"
+            type="button"
+            class="alert__dismiss btn btn-warning btn-pastel btn-small btn-icon"
+            style="flex: none;"
+            >✕</button>
+        </div>
     </div>
     <div class="page">
         <div class="wrapper">