From 6c75196a0954e4befac2fd4f292762d0e47e5e3f Mon Sep 17 00:00:00 2001 From: marston Date: Fri, 2 Aug 2024 12:38:29 -0400 Subject: [PATCH] making copy button pretty --- gen/index.go | 4 +- gen/script.js | 15 +++++-- gen/styles/global.css | 92 +++++++++++++++++++++++++++++++++++++------ gen/styles/layout.css | 14 ++++--- 4 files changed, 105 insertions(+), 20 deletions(-) diff --git a/gen/index.go b/gen/index.go index 47b99a0..2567a0e 100644 --- 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 index 57129bd..f597b24 100644 --- 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 index 1249f07..9bf2733 100644 --- 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,16 +177,19 @@ 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 { @@ -197,7 +197,7 @@ pre > code { } #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; + } +} \ No newline at end of file diff --git a/gen/styles/layout.css b/gen/styles/layout.css index f5ec179..faf59ac 100644 --- 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 ";