making copy button pretty

JackalLabs · Aug 2, 2024 · 6c75196 · 6c75196
1 parent d5689f4
commit 6c75196
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 20 deletions.
diff --git a/gen/index.go b/gen/index.go
@@ -186,7 +186,9 @@ func CreateIndex(summaryData []byte, pageData []byte, marker string, base string
 
 	headerBar := createHTMLElement("div", id("header"), title, buttons, hamburgerButton)
 
-	main := createHTMLElement("div", id("main"), headerBar, nav, page)
+	snackbar := createHTMLElement("div", id("snackbar"))
+
+	main := createHTMLElement("div", id("main"), headerBar, nav, page, snackbar)
 
 	body.AppendChild(main)
 

diff --git a/gen/script.js b/gen/script.js
@@ -1,8 +1,7 @@
 window.addEventListener("load", start)
 
 
-
-function start () {
+function start() {
     console.log("hello world!")
 
     const menuButton = document.getElementById("menu")
@@ -54,7 +53,17 @@ function start () {
             console.log("yo!")
 
             navigator.clipboard.writeText(code).then(() => {
-                alert("Copied code to clipboard.")
+                let x = document.getElementById("snackbar");
+
+                // Add the "show" class to DIV
+                x.innerText = "Code copied to clipboard."
+                x.className = "show";
+
+                // After 3 seconds, remove the show class from DIV
+                setTimeout(function () {
+                    x.className = x.className.replace("show", "");
+                }, 3000);
+
             })
 
         }, false)

diff --git a/gen/styles/global.css b/gen/styles/global.css
@@ -1,5 +1,3 @@
-
-
 @font-face {
     font-family: "teka";
     src: url("teka-reg.woff") format('woff');
@@ -10,6 +8,7 @@
     src: url("teka-bold.woff") format('woff');
     font-weight: bold;
 }
+
 html, body {
     color: var(--text);
     background-color: var(--background);
@@ -77,7 +76,6 @@ p > img {
 }
 
 
-
 #navbar > * {
     margin: 0px;
 }
@@ -88,7 +86,6 @@ p > img {
 }
 
 
-
 #navbar > ul {
     padding: 0rem 0.375rem 0rem 1.4rem;
     margin: 0px;
@@ -180,24 +177,27 @@ code > button {
 }
 
 .copy-button {
-    background-color: var(--background);
-    color: var(--text);
+    background-color: rgba(0, 0, 0, 0);
     border: none;
-    padding: 4px 8px;
+    padding: 4px 4px 2px;
+}
+
+.copy-button:hover {
+    background-color: var(--primary);
 }
 
 
 .copy-button::before {
-    content: 'copy'; /* Unicode character for clipboard icon */
-    font-size: 16px;
+    content: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.2109 80.4211L20.2109 227.789L188.632 227.789L188.632 206.737L41.2636 206.737L41.2636 80.4211L20.2109 80.4211ZM62.3162 27.7895L62.3162 185.684L251.79 185.684L251.79 27.7895L62.3162 27.7895ZM230.737 48.8421L230.737 164.632L83.3688 164.632L83.3688 48.8421L230.737 48.8421Z' fill='%231B1C16'/%3E%3C/svg%3E%0A");
+    stroke: #3388aa;
 }
 
 pre > code {
     font-weight: normal;
 }
 
 #navbar > ul > li > a,
-#navbar > ul > li > ul > li > a{
+#navbar > ul > li > ul > li > a {
     width: 100%;
     display: inline-block;
 
@@ -206,7 +206,6 @@ pre > code {
 }
 
 
-
 .hljs {
     background-color: var(--secondary) !important;
 }
@@ -220,3 +219,74 @@ pre > code {
     max-width: 80%;
 }
 
+
+/* SNACKBAR */
+/* The snackbar - position it at the bottom and in the middle of the screen */
+#snackbar {
+    visibility: hidden; /* Hidden by default. Visible on click */
+    min-width: 250px; /* Set a default minimum width */
+    margin-left: -125px; /* Divide value of min-width by 2 */
+    background-color: var(--text); /* Black background color */
+    color: var(--background); /* White text color */
+    text-align: center; /* Centered text */
+    border-radius: 2px; /* Rounded borders */
+    padding: 16px; /* Padding */
+    position: fixed; /* Sit on top of the screen */
+    z-index: 1; /* Add a z-index if needed */
+    left: 50%; /* Center the snackbar */
+    top: 90px; /* 30px from the bottom */
+}
+
+/* Show the snackbar when clicking on a button (class added with JavaScript) */
+#snackbar.show {
+    visibility: visible; /* Show the snackbar */
+    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+    However, delay the fade out process for 2.5 seconds */
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes fadein {
+    from {
+        top: 60px;
+        opacity: 0;
+    }
+    to {
+        top: 90px;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        top: 60px;
+        opacity: 0;
+    }
+    to {
+        top: 90px;
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadeout {
+    from {
+        top: 90px;
+        opacity: 1;
+    }
+    to {
+        top: 60px;
+        opacity: 0;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        top: 90px;
+        opacity: 1;
+    }
+    to {
+        top: 60px;
+        opacity: 0;
+    }
+}
diff --git a/gen/styles/layout.css b/gen/styles/layout.css
@@ -15,7 +15,6 @@
 }
 
 
-
 @media only screen and (max-width: 600px) {
 
 
@@ -54,19 +53,24 @@
         background-color: var(--text);
         color: var(--background);
     }
-    #navbar >ul>li > a {
+
+    #navbar > ul > li > a {
         color: var(--background);
     }
-    #navbar >ul>li > a.active {
+
+    #navbar > ul > li > a.active {
         color: var(--text);
     }
+
     #navbar.open {
         height: calc(100vh - 3.95rem);
         overflow-y: scroll;
     }
+
     #navbar.open > *:last-child {
         margin-bottom: 160px;
     }
+
     #navbar.open > ul:nth-child(2) {
         margin-top: 40px;
     }
@@ -86,7 +90,7 @@
     }
 
     #header {
-       position: absolute;
+        position: absolute;
         top: 0px;
         left: 0px;
         width: 100vw;
@@ -101,7 +105,7 @@
     #main {
         display: grid;
         grid-template-columns: fit-content(33%) 3fr;
-        grid-template-rows: 80px 1fr ;
+        grid-template-rows: 80px 1fr;
         grid-template-areas:
             "header header"
             "nav page ";