SatSale

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

UI improvements

Diffstat:
M
static/server_connection.js
 | 
3
++-
M
static/style.css
 | 
38
+++++++++++++++++++++++++++-----------
M
templates/donate.html
 | 
4
++--
M
templates/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>