diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/main.css | 84 | ||||
| -rw-r--r-- | assets/main.js | 107 |
2 files changed, 93 insertions, 98 deletions
diff --git a/assets/main.css b/assets/main.css index 78ede2b..d1ce662 100644 --- a/assets/main.css +++ b/assets/main.css @@ -28,7 +28,8 @@ ul { #title-header { border-bottom: 1px solid #666; padding-top: 2rem; - padding-bottom:2rem; + padding-bottom: 2rem; + margin-bottom: 4rem; } #title-header .title { @@ -55,37 +56,14 @@ ul { text-decoration: none; } -#crypto-display { - min-width: 1px; -} - -#crypto-display-qr img, -#crypto-display-qr canvas { - width: 100%; - max-width: 512px; -} - -#crypto-display-addr { - overflow-wrap: break-word; - margin-top: 1em; -} - -#crypto-display-x { - text-align: center; - margin-top: 1em; -} - -#crypto-display-x span:hover { - cursor: pointer; - font-weight: bold; -} - -#crypto-display-x span { - cursor: pointer; +footer { + margin-top: 4rem; + border-top: 1px solid #666; + padding-top: 2rem; + margin-bottom: 50vh; } #posts-list { - margin-top: 3rem; list-style: none; } @@ -99,7 +77,7 @@ ul { } #post-header { - margin-top: 3rem; + margin-top: 2rem; margin-bottom: 2rem; } @@ -107,11 +85,6 @@ ul { margin: 0; } -#post-content { - border-bottom: 1px solid #666; - margin-bottom: 2rem; -} - #post-content ul { margin-left: 1em; } @@ -121,3 +94,44 @@ ul { { max-width: 100%; } + +/* The Modal (background) */ +#modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +#modal-body { + position: relative; + background-color: #fefefe; + margin: 10rem auto; /* 15% from the top and centered */ + padding: 5rem; + border: 1px solid #888; + max-width: 30%; /* Could be more or less, depending on screen size */ +} + +/* The Close Button */ +#modal-close { + position: absolute; + top: 1rem; + right: 1rem; + line-height: 1rem; + color: #aaa; + font-size: 28px; + font-weight: bold; +} + +#modal-close:hover, +#modal-close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} diff --git a/assets/main.js b/assets/main.js index 5cbcf89..7557f2b 100644 --- a/assets/main.js +++ b/assets/main.js @@ -1,67 +1,48 @@ -console.log("main.js started"); - -// For asynchronously loading the qr code library, loadQRLib returns a promise -// which will be resolved when the library is loaded. -var qrLibProm; -var loadQRLib = () => { - if (qrLibProm) { return qrLibProm; } - qrLibProm = new Promise((resolve, reject) => { - console.log("loading qrcode.min.js"); - var script = document.createElement('script'); - script.src = "/assets/qrcode.min.js"; - script.async = true; - script.onload = () => { resolve(); }; - document.querySelectorAll('head')[0].appendChild(script); - }); - return qrLibProm; -}; +// showModal will create the modal structure the first time it is called. +var modal, modalContent; +const showModal = function() { + if (!modal) { + // make the modal + const modalClose = document.createElement('span'); + modalClose.id = 'modal-close'; + modalClose.innerHTML = '×'; + + modalContent = document.createElement('div'); + modalContent.id = 'modal-content'; + + const modalBody = document.createElement('div'); + modalBody.id = 'modal-body'; + modalBody.appendChild(modalContent); + modalBody.appendChild(modalClose); + + modal = document.createElement('div'); + modal.id = 'modal'; + modal.appendChild(modalBody); + + // add the modal to the document + document.getElementsByTagName('body')[0].appendChild(modal); + + // setup modal functionality + modalClose.onclick = function() { + modal.style.display = "none"; + } + } + + modalContent.innerHTML = ''; + for (var i = 0; i < arguments.length; i++) { + modalContent.appendChild(arguments[i]); + } + modal.style.display = "block"; + + // When the user clicks anywhere outside of the modal, close it + window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + window.onclick = undefined; + } + } +} document.addEventListener("DOMContentLoaded", () => { console.log("DOM loaded"); - - var cryptoDisplay = document.querySelector('#crypto-display'); - var clearCryptoDisplay = () => { - cryptoDisplay.innerHTML = ' '; - }; - - console.log("setting up crypto buttons"); - document.querySelectorAll('.crypto').forEach((el) => { - var href = el.href; - el.href="#"; - el.onclick = () => { - var parts = href.split(":"); - if (parts.length != 2) { - console.error(el, "href not properly formatted"); - return; - } - var currency = parts[0]; - var address = parts[1]; - - clearCryptoDisplay(); - - var cryptoDisplayQR = document.createElement('div'); - cryptoDisplayQR.id = "crypto-display-qr"; - - var cryptoDisplayAddr = document.createElement('div'); - cryptoDisplayAddr.id = "crypto-display-addr"; - cryptoDisplayAddr.innerHTML = '<span>'+currency + " address: " + address + '</span>'; - - var cryptoDisplayX = document.createElement('div'); - cryptoDisplayX.id = "crypto-display-x"; - cryptoDisplayX.onclick = clearCryptoDisplay; - cryptoDisplayX.innerHTML = '<span>X</span>'; - - cryptoDisplay.appendChild(cryptoDisplayQR); - cryptoDisplay.appendChild(cryptoDisplayAddr); - cryptoDisplay.appendChild(cryptoDisplayX); - - loadQRLib().then(() => { - new QRCode(cryptoDisplayQR, { - text: currency, - width: 512, - height: 512, - }); - }); - }; - }); }) |