Merge pull request #16 from ranchimall/ui-work

UI work

css/main.css

@@ -593,8 +593,9 @@ ul {
 }
 
 #main_card {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
   height: 100%;
   width: 100%;
   transition: background-color 0.3s;
@@ -828,8 +829,8 @@ ul {
 }
 
 #contact {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-rows: auto 1fr auto;
   padding: 0;
   height: 100%;
 }
@@ -839,15 +840,31 @@ ul {
 #contact > :first-child {
   padding-top: 0;
 }
+#contact > :last-child {
+  padding: 0.5rem 1.5rem;
+  background-color: rgba(var(--text-color), 0.03);
+}
+#contact > :last-child button {
+  padding: 0.8rem 2rem;
+  border-radius: 1rem;
+  color: var(--accent-color);
+  background-color: rgba(var(--foreground-color), 1);
+}
 
 #contact__transactions {
+  position: relative;
   display: grid;
   gap: 0.5rem;
   overflow-y: auto;
   flex: 1;
-  padding: 0 max(1rem, 8vw);
+  padding: 0 max(1rem, 8vw) 1rem max(1rem, 8vw);
   align-content: flex-start;
 }
+#contact__transactions sm-spinner {
+  position: absolute;
+  justify-self: center;
+  align-self: center;
+}
 
 .transaction-message {
   background-color: rgba(var(--text-color), 0.06);
@@ -1189,6 +1206,7 @@ ul {
   #main_card {
     height: calc(100vh - 3rem);
     width: calc(100vw - 3rem);
+    grid-template-areas: "header" ".";
     position: relative;
     border-radius: 0.5rem;
     overflow: hidden;
@@ -1196,7 +1214,6 @@ ul {
     box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
   }
   #main_card:not(.nav-hidden) {
-    display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
     grid-template-areas: "nav header" "nav .";

css/main.scss

@@ -552,8 +552,9 @@ ul {
   padding: 1.5rem;
 }
 #main_card {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
   height: 100%;
   width: 100%;
   transition: background-color 0.3s;
@@ -778,8 +779,8 @@ ul {
   padding: 1rem;
 }
 #contact {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-rows: auto 1fr auto;
   padding: 0;
   height: 100%;
   & > * {
@@ -788,14 +789,30 @@ ul {
   & > :first-child {
     padding-top: 0;
   }
+  & > :last-child {
+    padding: 0.5rem 1.5rem;
+    background-color: rgba(var(--text-color), 0.03);
+    button {
+      padding: 0.8rem 2rem;
+      border-radius: 1rem;
+      color: var(--accent-color);
+      background-color: rgba(var(--foreground-color), 1);
+    }
+  }
 }
 #contact__transactions {
+  position: relative;
   display: grid;
   gap: 0.5rem;
   overflow-y: auto;
   flex: 1;
-  padding: 0 max(1rem, 8vw);
+  padding: 0 max(1rem, 8vw) 1rem max(1rem, 8vw);
   align-content: flex-start;
+  sm-spinner {
+    position: absolute;
+    justify-self: center;
+    align-self: center;
+  }
 }
 .transaction-message {
   background-color: rgba(var(--text-color), 0.06);
@@ -1121,8 +1138,8 @@ ul {
   #main_card {
     height: calc(100vh - 3rem);
     width: calc(100vw - 3rem);
+    grid-template-areas: "header" ".";
     &:not(.nav-hidden) {
-      display: grid;
       grid-template-columns: auto 1fr;
       grid-template-rows: auto 1fr;
       grid-template-areas: "nav header" "nav .";

index.html

@@ -23,7 +23,7 @@
                 FLO: ['https://flosight.duckdns.org/', 'https://livenet.flocha.in/'],
                 FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
             },
-            adminID: "FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf",
+            adminID: "FH64hLqB71e6i11rnZZW7hvzoH8daCwy1J",
             sendAmt: 0.001,
             fee: 0.0005,
 
@@ -37,7 +37,7 @@
 
             //for cloud apps
             subAdmins: [],
-            application: "TEST_MODE",
+            application: "blockchainUPI",
             appObjects: {},
             generalData: {},
             lastVC: {}
@@ -437,9 +437,9 @@
                 <h4 id="contact__title"></h4>
             </div>
             <ul id="contact__transactions"></ul>
-            <div class="flex">
+            <div class="flex gap-0-5">
-                <button class="button flex-1">Pay</button>
+                <button class="button justify-right" onclick="showTokenTransfer('request')">Request</button>
-                <button class="button flex-1">Request</button>
+                <button class="button" onclick="showTokenTransfer('send')">Pay</button>
             </div>
         </section>
         <section id="requests" class="inner-page hide">
@@ -805,7 +805,7 @@
                 </div>
             </section>
         </section>
-        <nav id="main_navbar" class="hide">
+        <nav id="main_navbar" class="hide nav-hidden">
             <ul>
                 <li>
                     <a href="#/home" class="nav-item interact">
@@ -946,10 +946,10 @@
         <section class="grid gap-2">
             <h4 id="token_transfer__title"></h4>
             <sm-form>
-                <sm-input id="tt_flo_id" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id animate required
+                <sm-input id="token_transfer__receiver" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id
-                    autofocus>
+                    animate required autofocus>
                 </sm-input>
-                <sm-input id="tt_amount" type="number" placeholder="0" required min="1">
+                <sm-input id="token_transfer__amount" type="number" placeholder="0" required min="1">
                     <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                         height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                         <g>

scripts/fn_ui.js

@@ -541,18 +541,6 @@ function buttonLoader(id, show) {
     }
 }
 
-let currentUserAction;
-function showTokenTransfer(type) {
-    getRef('tt_button').textContent = type;
-    currentUserAction = type;
-    if (type === 'send') {
-        getRef('token_transfer__title').textContent = 'Send money to FLO ID';
-    } else {
-        getRef('token_transfer__title').textContent = 'Request money from FLO ID';
-    }
-    showPopup('token_transfer_popup');
-}
-
 function getArrayOfSavedIds() {
     const arr = [];
     for (const key in floGlobals.savedIds) {
@@ -666,9 +654,30 @@ function insertElementAlphabetically(name, elementToInsert) {
     }
 }
 
+let currentUserAction;
+function showTokenTransfer(type) {
+    getRef('tt_button').textContent = type;
+    currentUserAction = type;
+    if (type === 'send') {
+        getRef('token_transfer__title').textContent = 'Send money to FLO ID';
+    } else {
+        getRef('token_transfer__title').textContent = 'Request money from FLO ID';
+    }
+    if (pagesData.lastPage === 'contact') {
+        getRef('token_transfer__receiver').value = pagesData.params.floId;
+        getRef('token_transfer__receiver').readOnly = true;
+    } else {
+        getRef('token_transfer__receiver').readOnly = false;
+    }
+    showPopup('token_transfer_popup');
+    if (pagesData.lastPage === 'contact') {
+        getRef('token_transfer__amount').focusIn();
+    }
+}
+
 function executeUserAction() {
-    const floID = getRef('tt_flo_id').value.trim(),
+    const floID = getRef('token_transfer__receiver').value.trim(),
-        amount = parseFloat(getRef('tt_amount').value),
+        amount = parseFloat(getRef('token_transfer__amount').value),
         remark = getRef('tt_remark').value.trim();
     if (currentUserAction === 'send') {
         userUI.sendMoneyToUser(floID, amount, remark);

scripts/std_ui.js

@@ -325,6 +325,7 @@ async function showPage(targetPage, options = {}) {
             break;
         case 'contact':
             getRef('contact__title').textContent = getFloIdTitle(params.floId)
+            getRef('contact__transactions').innerHTML = '<sm-spinner></sm-spinner>'
             Promise.all([
                 tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${myFloID}&destFloAddress=${params.floId}`),
                 tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${params.floId}&destFloAddress=${myFloID}`)])