From 8e1952e3b4f84a8c39c60834b5b74754db22c98a Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Sun, 31 Mar 2019 16:31:39 -0600
Subject: [PATCH] Show receiver bio, handle really long user content, minor
 style tweaks

---
 www/css/styles.css       | 10 ++++++++++
 www/js/map.js            |  2 +-
 www/js/sendmoney.js      |  6 +++++-
 www/pages/sendmoney.html |  9 ++++++---
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/www/css/styles.css b/www/css/styles.css
index 67ad6e2..e62486d 100644
--- a/www/css/styles.css
+++ b/www/css/styles.css
@@ -154,4 +154,14 @@ html.md .navbar .link {
 
 .card-opened .navbar {
     display: block;
+}
+
+#person-name {
+    overflow-wrap: break-word;
+}
+
+#person-bio {
+    border-top: 1px solid var(--f7-card-footer-border-color);
+    padding-top: var(--f7-card-footer-padding-vertical);
+    overflow-wrap: break-word;
 }
\ No newline at end of file
diff --git a/www/js/map.js b/www/js/map.js
index 545f309..4446243 100644
--- a/www/js/map.js
+++ b/www/js/map.js
@@ -83,7 +83,7 @@ function updateMap() {
         if (data.type == "FeatureCollection") {
             leafletpeoplelayer.clearLayers();
             data.features.forEach(function (item) {
-                item.properties.popupContent = "<i class=\"fas fa-user\"></i> " + item.properties.name + "<br><br><a class=\"button button-small button-fill text-color-white card-prevent-open\" href=\"/sendmoney/" + item.properties.id + "\">Send Money</a>";
+                item.properties.popupContent = "<i class=\"fas fa-user\"></i> " + (item.properties.name.length > 50 ? item.properties.name.substring(0,50) + "..." : item.properties.name) + "<br><br><a class=\"button button-small button-fill text-color-white card-prevent-open\" href=\"/sendmoney/" + item.properties.id + "\">Send Money</a>";
                 leafletpeoplelayer.addData(item);
             });
             leafletmap.addLayer(leafletpeoplelayer);
diff --git a/www/js/sendmoney.js b/www/js/sendmoney.js
index 732a108..5f76202 100644
--- a/www/js/sendmoney.js
+++ b/www/js/sendmoney.js
@@ -45,7 +45,7 @@ $("#scanqrcodebtn").on("click", function () {
                 app.dialog.alert(error, "Scan Error");
             },
             {
-                showTorchButton : true,
+                showTorchButton: true,
                 prompt: "Scan a code to send money",
                 resultDisplayDuration: 0,
                 disableSuccessBeep: true
@@ -92,6 +92,10 @@ function loadSendMoneyPage() {
             app.preloader.hide();
             console.log("Profile", data.profile);
             $("#person-name").text(data.profile.name);
+            if (data.profile.bio != "") {
+                $("#person-bio").text(data.profile.bio);
+                $("#person-bio").removeClass("display-none");
+            }
             if (data.profile.verified) {
                 $("#verified-badge").removeClass("display-none");
             } else {
diff --git a/www/pages/sendmoney.html b/www/pages/sendmoney.html
index 5929735..de62b08 100644
--- a/www/pages/sendmoney.html
+++ b/www/pages/sendmoney.html
@@ -56,8 +56,8 @@
                                     <button class="button button-round preset-amount-button" data-target="#amount-box" data-amount="20.00">$20</button>
                                 </p>
                             </div>
-                            <div class="card-footer display-block">
-                                <div class="button button-large button-fill button-round" id="sendbtn">
+                            <div class="card-footer display-block padding-vertical">
+                                <div class="button button-large button-fill button-round button-raised" id="sendbtn">
                                     <i class="fas fa-arrow-up"></i> Send
                                 </div>
                             </div>
@@ -67,7 +67,7 @@
                     <div class="col-100 tablet-50 desktop-25">
                         <div class="card">
                             <div class="card-content card-content-padding">
-                                <h3><i class="fas fa-user"></i> <span id="person-name"></span></h3>
+                                <h3 class="no-margin-top"><i class="fas fa-user"></i> <span id="person-name"></span></h3>
                                 <div>
                                     <a id="verified-badge-container" class="link popup-open" href="#" data-popup="#verification-popup">
                                         <span id="verified-badge" class="display-none">
@@ -78,6 +78,9 @@
                                         </span>
                                     </a>
                                 </div>
+                                <div id="person-bio" class="display-none padding-top-half margin-top-half">
+
+                                </div>
                             </div>
                         </div>
                     </div>