SatSale

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit df515ba2838f80a81a18412798f17ef87c2e5f66
parent cf6f72cc20da4a5e913fd743ae22dd9fb132fe74
Author: NicholasFarrow <nicholas.w.farrow@gmail.com>
Date:   Wed, 17 Feb 2021 13:50:38 +1100

UI improvements

Diffstat:
Mstatic/server_connection.js | 3++-
Mstatic/style.css | 38+++++++++++++++++++++++++++-----------
Mtemplates/donate.html | 4++--
Mtemplates/index.html | 5+++--
4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/static/server_connection.js b/static/server_connection.js @@ -42,7 +42,8 @@ function initiate(payment_data) { function conditionalPageLogic(msg) { // Display QR code if (msg.address != null) { - document.getElementById('qrImage').style.display = "block"; + document.getElementById('qrImage').className = "qr"; + // document.getElementById('qrImage').style.display = "block"; document.getElementById('qrClick').href = "/static/qr_codes/" + msg.uuid + ".png"; document.getElementById('qrImage').src = "/static/qr_codes/" + msg.uuid + ".png"; } diff --git a/static/style.css b/static/style.css @@ -31,6 +31,7 @@ h1 { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; font-family: "Lucida Console", "Courier New", monospace; + border-radius: 12px; } .button1 { @@ -59,17 +60,41 @@ h1 { transform: translate(-50%, -50%); } + +.logo { + padding-top:25px; + padding-left:30px; + float:right; +} + +.qr { + transition: transform .2s; + object-fit: cover; +} +.qr:hover { + -ms-transform: scale(2.5); /* IE 9 */ + -webkit-transform: scale(2.5); /* Safari 3-8 */ + transform: scale(3); +} + +#qrImage { + float: right; + /* margin: auto; */ + padding-right:15px; + padding-top:25px; +} + #row { display: flex; } #left { width: 60%; - padding: 0 10px 0 0; + padding: 0 0 0 0; float: left; } #right { width: 40%; - padding: 0 10px 0 0; + padding: 0 0 0 0; float: right; } #address { @@ -79,12 +104,3 @@ h1 { #about { color:#000; } -.qr { - transition: transform .2s; - object-fit: cover; -} -.qr:hover { - -ms-transform: scale(2.5); /* IE 9 */ - -webkit-transform: scale(2.5); /* Safari 3-8 */ - transform: scale(3); -} diff --git a/templates/donate.html b/templates/donate.html @@ -21,8 +21,8 @@ <h1>Donate Bitcoin</h> </div> <div id="right"> - <a id="logo" target="_blank"><img id="logo" style="padding-top:25px;padding-left:30px;" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a> - <a id="qrClick" target="_blank"><img class="qr" id="qrImage" style="padding-top:25px;display:none" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a> + <a class="logo" target="_blank"><img width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a> + <!-- <a id="qrClick" target="_blank"><img class="qr" id="qrImage" style="padding-top:25px;display:none" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a> --> </div> </div> diff --git a/templates/index.html b/templates/index.html @@ -27,8 +27,9 @@ <h1>Pay Bitcoin</h> </div> <div id="right"> - <!-- <a id="logo" target="_blank"><img id="logo" style="padding-top:25px;padding-left:30px;" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a> --> - <a id="qrClick" target="_blank"><img class="qr" id="qrImage" style="margin:auto; padding-left:10px; padding-top:25px;display:block" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a> + <!-- <a id="logo" style="display:none" target="_blank"><img width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a> --> + <!-- Logo class gets changed to qr via js --> + <a id="qrClick" target="_blank"><img class="logo" id="qrImage" width="65px" src="https://i.pinimg.com/originals/3a/dd/40/3add4023fa9b435e7da3c09156b88015.png"></a> </div> </div>