From 120bb346dbbfa0dac7e0a996a70ee15ad844bae4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manuel=20D=C3=ADez?=
 <2961735+manutenfruits@users.noreply.github.com>
Date: Fri, 23 Apr 2021 15:17:42 -0400
Subject: [PATCH] Make changelog banner dismissable (#1113)

---
 _static/custom.css     |  9 ++++++---
 _templates/layout.html | 11 ++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/_static/custom.css b/_static/custom.css
index 6dad41e47..70273f248 100644
--- a/_static/custom.css
+++ b/_static/custom.css
@@ -62,15 +62,18 @@ table.docutils {
   z-index: 9999;
   display: none
 }
-#upgrade-footer-changelog {
+.footer-button-container {
+  margin: 0 60px 0 10px;
+  float: right;
+}
+.footer-button {
   background-color: #b3b3b3;
   color: #4e4e4e;
   display: inline-block;
   border-radius: 5px;
   padding: 0 20px;
+  margin-left: 10px;
   cursor: pointer;
-  float: right;
-  margin: 0 60px 0 10px;
   text-decoration: none;
 }
 .not-hidden {
diff --git a/_templates/layout.html b/_templates/layout.html
index 27e04b79a..c8b9d9a29 100644
--- a/_templates/layout.html
+++ b/_templates/layout.html
@@ -30,15 +30,20 @@
 {% block footer %}
   <div id="upgrade-footer">
     A new version has been release since you last visited this page: {{ release }} 🎉
-    <a id="upgrade-footer-changelog" href="/changelog/v{{ version }}.0.html">View Changelog</a>
+    <div class="footer-button-container">
+      <div role="button" id="upgrade-footer-dismiss" class="footer-button">Dismiss</div>
+      <a id="upgrade-footer-changelog" class="footer-button" href="/changelog/v{{ version }}.0.html">View Changelog</a>  
+    </div>
   </div>
   <script>
     var old = window.localStorage.getItem("version");
     if (old === null) { window.localStorage.setItem("version", "{{ version }}");
     } else if (old !== "{{ version }}") {
-      document.getElementById("upgrade-footer").classList.add("not-hidden");
-      document.getElementById("upgrade-footer-changelog").addEventListener('click', function () {
+      const footerEl = document.getElementById("upgrade-footer");
+      footerEl.classList.add("not-hidden");
+      footerEl.addEventListener('click', function () {
         window.localStorage.setItem("version", "{{ version }}");
+        footerEl.classList.remove("not-hidden");
       });
     }
   </script>