Improve landscape layout

riccardobl · Jan 4, 2024 · 72108ca · 72108ca
1 parent 9e2cd44
commit 72108ca
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 45 deletions.
diff --git a/src/assets/app/static/animations.css b/src/assets/app/static/animations.css
@@ -2,7 +2,7 @@
 *   Make everything smooth
 */
 #liquidwallet #container * {
-    transition: all 0.3s ease-in-out;
+    transition: all 0.2s ease-in-out;
 }
 
 #liquidwallet #container .text.loading {

diff --git a/src/js/ui/stages/ReceiveStage.js b/src/js/ui/stages/ReceiveStage.js
@@ -35,14 +35,16 @@ export default class ReceiveStage extends UIStage {
         let SECONDARY_CURRENCY = secondaryCurrency;
         let SECONDARY_INFO = await lq.assets().getAssetInfo(secondaryCurrency);
 
-        const c0 = $vlist(stageCntEl).fill().makeScrollable();
-        const c1 = $vlist(stageCntEl).grow(100).fill().makeScrollable();
+        const c0 = $vlist(stageCntEl, []).fill().makeScrollable();
+        const c1 = $vlist(stageCntEl, ["main"]).grow(100).fill().makeScrollable();
+
+        $title(c1).setValue("Asset");
+        const assetSelector = $inputSelect(c1, "Select Asset");
 
-        const assetSelector = $inputSelect(c0, "Select Asset");
-        $vsep(c0);
         const invoiceQr = $hlist(c0);
+        $title(c1).setValue("Address");
 
-        const invoiceTx = Html.$inputText(c0).setEditable(false);
+        const invoiceTx = Html.$inputText(c1).setEditable(false);
 
         $icon(invoiceTx)
             .setAction(() => {
@@ -51,7 +53,7 @@ export default class ReceiveStage extends UIStage {
             })
             .setValue("content_copy");
 
-        $title(c1).setValue("Settings");
+        $title(c1).setValue("Amount");
         const amountPrimaryEl = $inputNumber(c1).grow(50).setPlaceHolder("0.00");
         const tickerEl = $text(amountPrimaryEl).setValue(ASSET_INFO.ticker);
 

diff --git a/src/js/ui/stages/SendStage.js b/src/js/ui/stages/SendStage.js
@@ -45,9 +45,20 @@ export default class SendStage extends UIStage {
         let TO_ADDR = DUMMY_ADDR;
         let FEE = 0;
 
-        const c01El = $vlist(walletEl).makeScrollable().fill();
+        const c00El = $vlist(walletEl).fill().makeScrollable();
+        const c000El = $list(c00El, ["p$v", "l$h", "l$baselineAlign"]).fill();
+        const c02El = $vlist(c000El, ["main"]).makeScrollable().fill();
+        const c01El = $vlist(c000El, ["main"]).makeScrollable().fill();
+        const c03El = $hlist(c00El, []).fill();
+
+        $title(c02El).setValue("Asset");
+
+        const assetInputEl = $inputSelect(c02El, "Select Asset");
+
+        $title(c01El).setValue("To");
+
+        const addrEl = $inputText(c01El).setPlaceHolder("Address");
 
-        const assetInputEl = $inputSelect(c01El, "Select Asset");
         $text(c01El, ["warning"]).setValue(
             `
         <span>
@@ -57,8 +68,6 @@ export default class SendStage extends UIStage {
             true,
         );
 
-        const addrEl = $inputText(c01El).setPlaceHolder("Address");
-
         $icon(addrEl)
             .setValue("qr_code_scanner")
             .setAction(async () => {
@@ -133,42 +142,46 @@ export default class SendStage extends UIStage {
                 addrEl.setValue(text);
             });
 
-        $title(c01El).setValue("Amount");
+        $title(c02El).setValue("Amount");
 
-        const amountNativeEl = $inputNumber(c01El).setPlaceHolder("0.00");
+        const amountNativeEl = $inputNumber(c02El).setPlaceHolder("0.00");
         const ticker1El = $text(amountNativeEl);
 
-        const amountSecondaryEl = $inputNumber(c01El).setPlaceHolder("0.00");
+        const amountSecondaryEl = $inputNumber(c02El).setPlaceHolder("0.00");
         const ticker2El = $text(amountSecondaryEl);
 
-        const availableBalanceEl = $hlist(c01El, ["sub"]).fill();
+        const availableBalanceDataEl = $vlist(c02El, ["sub"]).fill();
+        const availableBalanceEl = $hlist(availableBalanceDataEl, ["sub"]).fill();
         $hsep(availableBalanceEl).grow(100);
         const availableBalanceTextEl = $text(availableBalanceEl).setValue("Available balance: ");
         const availableBalanceValueEl = $text(availableBalanceEl);
-        const useAllEl = $button(availableBalanceEl, ["small"]).setValue("SEND ALL");
+        const useAllRowEl = $hlist(availableBalanceDataEl, ["sub"]);
+        $hsep(useAllRowEl).grow(100);
+        const useAllEl = $button(useAllRowEl, ["small"]).setValue("SEND ALL");
 
         $title(c01El).setValue("Fee");
         const prioritySlideEl = $inputSlide(c01El);
         prioritySlideEl.setLabel(0, "Low (slow)");
         prioritySlideEl.setLabel(0.5, "Medium");
         prioritySlideEl.setLabel(1, "High (fast)");
+        const feeDataEl = $vlist(c01El, []).fill();
 
-        const feeRowEl = $hlist(c01El, ["sub"]);
+        const feeRowEl = $hlist(feeDataEl, ["sub"]);
         $hsep(feeRowEl).grow(100);
         $text(feeRowEl).setValue("Fee: ");
         const feeValueEl = $text(feeRowEl);
         $hsep(feeRowEl).setValue("/");
         const feeValueSecondaryEl = $text(feeRowEl);
-        const timeRowEl = $hlist(c01El, ["sub"]);
+        const timeRowEl = $hlist(feeDataEl, ["sub"]);
         $hsep(timeRowEl).grow(100);
         $text(timeRowEl).setValue("Confirmation time: ~");
         const timeValueEl = $text(timeRowEl).setValue("10");
         $hsep(timeRowEl).setValue("minutes");
 
-        const errorRowEl = $vlist(c01El, ["error"]);
+        const errorRowEl = $vlist(c03El, ["error"]);
         errorRowEl.hide();
 
-        const confirmBtnEl = Html.$button(c01El).setValue("Confirm and sign");
+        const confirmBtnEl = Html.$button(c03El).setValue("Confirm and sign");
 
         const loading = (v) => {
             if (!v) {

diff --git a/src/js/ui/stages/WalletStage.js b/src/js/ui/stages/WalletStage.js
@@ -30,7 +30,10 @@ export default class WalletPage extends UIStage {
         const primaryCurrency = (await store.get(`primaryCurrency${network}`)) || lq.getBaseAsset();
         const secondaryCurrency = (await store.get(`secondaryCurrency${network}`)) || "USD";
 
-        const assetsEl = $list(parentEl, ["main", "p$h", "l$v"], "assets").makeScrollable(true, true);
+        const assetsEl = $list(parentEl, ["main", "highlight", "p$h", "l$v"], "assets").makeScrollable(
+            true,
+            true,
+        );
         assetsEl.setPriority(-10);
         assetsEl.initUpdate();
 
@@ -130,7 +133,9 @@ export default class WalletPage extends UIStage {
 
     async renderHistoryPanel(parentEl, lq, filter, ui, forceRefresh = false, limit = 100, page = 0) {
         filter = this.filter;
-        const historyEl = $vlist(parentEl, ["main"], "history").makeScrollable(true, true).fill();
+        const historyEl = $vlist(parentEl, ["main", "highlight"], "history")
+            .makeScrollable(true, true)
+            .fill();
 
         const history = await lq.getHistory(); //.slice(page * limit, page * limit + limit); TODO: pagination
 
@@ -299,7 +304,9 @@ export default class WalletPage extends UIStage {
     }
 
     async renderSendReceive(parentEl, lq, filter, ui) {
-        const cntEl = $hlist(parentEl, ["buttons", "fillw", "main"], "sendReceive").setPriority(-15).fill();
+        const cntEl = $hlist(parentEl, ["buttons", "fillw", "main", "highlight"], "sendReceive")
+            .setPriority(-15)
+            .fill();
         $button(cntEl, [])
             .setValue("Receive")
             .setIconValue("arrow_downward")
@@ -315,12 +322,15 @@ export default class WalletPage extends UIStage {
     }
 
     async renderSearchBar(walletEl, lq, render, ui) {
-        const searchInputEl = $inputText(walletEl).setPlaceHolder("Search");
+        const searchBarParentEl = $hlist(walletEl, ["searchBar", "main", "highlight"])
+            .setPriority(-10)
+            .fill();
+        const searchInputEl = $inputText(searchBarParentEl).setPlaceHolder("Search");
         searchInputEl.setAttribute("autocomplete", "off");
         searchInputEl.setAttribute("autocorrect", "off");
         searchInputEl.setAttribute("autocapitalize", "off");
         searchInputEl.setAttribute("spellcheck", "false");
-        searchInputEl.setPriority(-10);
+        // searchInputEl.setPriority(-10);
         let lastValue = "";
         let scheduledTimeout = undefined;
         const searchIcon = $icon(searchInputEl, ["search"]).setValue("search");

diff --git a/src/less/stages/receive.less b/src/less/stages/receive.less
@@ -8,16 +8,14 @@
 }
 
 #liquidwallet #container.receive.stage .invoiceQr {
-    width: min(min(40vh, 100%), 300px);
+    width: min(min(40vh, 100%), 512px);
     max-width: 100%;
     margin: auto;
-    margin-bottom: 2rem;
+    margin-top: 2rem;
+    flex-shrink: 1;
 }
 
 #liquidwallet #container.receive {
     font-size: 110%;
     // max-width: 900px;
 }
-#liquidwallet #container.send {
-    max-width: 900px;
-}
diff --git a/src/less/stages/send.less b/src/less/stages/send.less
@@ -7,7 +7,4 @@
     // max-width: 900px;
 }
 
-#liquidwallet #container.send {
-    max-width: 900px;
-}
 /** if screen at least 1000px wide **/
diff --git a/src/less/stages/wallet.less b/src/less/stages/wallet.less
@@ -92,3 +92,7 @@
 #liquidwallet #container.wallet.stage #history .tx > *:last-child {
     margin-left: auto;
 }
+
+#liquidwallet #balanceSumCnt {
+    padding-top: 1.5rem;
+}
diff --git a/src/less/style.less b/src/less/style.less
@@ -151,7 +151,8 @@
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        padding-bottom: 1rem;
+        padding: 0 !important;
+        padding-bottom: 1.2rem !important;
 
         .label {
             position: absolute;
@@ -176,8 +177,7 @@
             padding: 0;
             margin: 0;
             border-radius: 20px;
-            margin-left: 1rem;
-            margin-right: 1rem;
+
             padding-left: 0.5rem;
             padding-right: 0.5rem;
             height: 2rem;
@@ -394,16 +394,23 @@
         // justify-content: center;
         @media (orientation: landscape) {
             flex-direction: row;
-
-            & > :first-child {
-                width: min(40vw, 512px);
-            }
             & > :not(.popup) {
                 flex-shrink: 1;
                 width: 100%;
             }
-        }
 
+            .list.h.fill {
+                & > :not(.popup) {
+                    flex-shrink: 1;
+                    width: 100%;
+                }
+            }
+        }
+        .icon {
+            &.img {
+                width: 100%;
+            }
+        }
         .error {
             padding: 1.2rem;
             font-size: 0.8rem;
@@ -512,6 +519,9 @@
                 font-size: 0.8rem;
             }
         }
+        button.selectBtn {
+            box-shadow: none;
+        }
 
         .iconCnt {
             display: flex;
@@ -529,6 +539,7 @@
         }
 
         .popupSelect {
+            padding: 0 !important;
             display: flex;
             justify-content: stretch;
         }
@@ -610,12 +621,27 @@
             &.outscroll > * {
                 flex-shrink: 0;
             }
-
+            column-gap: 0.2rem;
+            row-gap: 0.2rem;
             & > * {
                 /* display: flex; */
                 align-items: stretch;
                 /* padding:0; */
-                margin: 0.2rem;
+                margin-top: 0.1rem;
+                margin-bottom: 0.1rem;
+                column-gap: 0.2rem;
+                row-gap: 0.2rem;
+            }
+
+            &.highlight {
+                & > * {
+                    border-radius: 14px;
+                    box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3);
+                }
+            }
+
+            &.baselineAlign {
+                align-items: baseline !important;
             }
 
             &.main {
@@ -625,8 +651,8 @@
                 padding-right: 0.6rem;
 
                 & > * {
-                    border-radius: 14px;
-                    box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3);
+                    // border-radius: 14px;
+                    // box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3);
                     margin: 0.3rem;
                     padding: 0.6rem;
                 }