From 055b47e92b399a6d7712ea5ccfb2185b26ebbce3 Mon Sep 17 00:00:00 2001 From: lzzfnc Date: Wed, 3 Nov 2021 10:26:34 +0100 Subject: [PATCH] side panel --- index.html | 25 ++++++++++++++++++-- panel.js | 14 +++++++++++ style.css | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 104 insertions(+), 3 deletions(-) create mode 100644 panel.js diff --git a/index.html b/index.html index cb00dfd..cfc9be5 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,16 @@ + + + Concrete Label -
+
@@ -23,6 +26,24 @@
- + + + diff --git a/panel.js b/panel.js new file mode 100644 index 0000000..c0395b1 --- /dev/null +++ b/panel.js @@ -0,0 +1,14 @@ +const showInfo = document.getElementById("show-info"); +const infoPanel = document.getElementById("info-panel"); + +showInfo.addEventListener("click", (e) => { + if (infoPanel.classList.contains("active")) { + infoPanel.classList.remove("active"); + showInfo.classList.remove("active"); + showInfo.innerHTML = "?"; + } else { + infoPanel.classList.add("active"); + showInfo.classList.add("active"); + showInfo.innerHTML = "X"; + } +}); diff --git a/style.css b/style.css index 3e77bd8..12dd9e6 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,8 @@ html, body { margin: 0; font-family: Arial, Helvetica, sans-serif; + width: 100%; + overflow: hidden; } #container { @@ -88,7 +90,6 @@ body { z-index: 200; width: 100%; height: 100vh; - /* display: flex; */ justify-content: center; align-items: center; @@ -155,3 +156,68 @@ body { .hidden { display: none; } + +.info { + position: absolute; + right: 0; + bottom: 0; + top: 0; + z-index: 50; + + padding: 24px; + margin: 0; + + width: 25%; + line-height: 1.6; + + background-color: #111; + color: white; + + transform: translateX(100%); + transition: transform 0.4s ease-out; +} + +.info.active { + transform: translateX(0); + transition: transform 0.4s ease-in; +} + +.info .title { + margin: 0; +} + +#show-info { + position: absolute; + top: 24px; + right: 24px; + z-index: 100; + + background: none; + + display: inline-block; + width: 24px; + height: 24px; + border-radius: 50%; + + border: 1px solid currentColor; + + color: tomato; + + cursor: pointer; +} + +#show-info:hover { + border: 1px solid tomato; + background-color: tomato; + color: white; +} + +#show-info.active { + color: white; +} + +#show-info:hover.active { + border: 1px solid white; + background-color: white; + color: #111; +}