✨ prevent site-tools from obscuring content of page

owid · Feb 5, 2025 · 2b71f98 · 2b71f98
1 parent 7bf7b49
commit 2b71f98
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/site/SiteFooter.tsx b/site/SiteFooter.tsx
@@ -5,6 +5,7 @@ import { viteAssetsForSite } from "./viteUtils.js"
 import { ScriptLoadErrorDetector } from "./NoJSDetector.js"
 import { ABOUT_LINKS, RSS_FEEDS, SOCIALS } from "./SiteConstants.js"
 import { Button } from "@ourworldindata/components"
+import { SITE_TOOLS_CLASS } from "./SiteTools.js"
 
 interface SiteFooterProps {
     hideDonate?: boolean
@@ -181,7 +182,7 @@ export const SiteFooter = (props: SiteFooterProps) => (
                 </div>
             </div>
 
-            <div className="site-tools" />
+            <div className={SITE_TOOLS_CLASS} />
             {viteAssetsForSite().forFooter}
             <ScriptLoadErrorDetector />
             <script

diff --git a/site/css/site-tools.scss b/site/css/site-tools.scss
@@ -1,6 +1,16 @@
 .site-tools {
     display: none;
 }
+
+@keyframes get-out-da-way {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(48px);
+    }
+}
+
 @include md-up {
     .site-tools {
         position: fixed;
@@ -9,6 +19,9 @@
         right: $vertical-spacing;
         bottom: $vertical-spacing;
         border: none;
+        &:has(.hide) {
+            animation: get-out-da-way 0.3s forwards;
+        }
 
         .hide-wrapper {
             display: flex;