From ce9b63c54ebf0fc9a6a428a80e14694ef7553401 Mon Sep 17 00:00:00 2001
From: arcbtc <ben@arc.wales>
Date: Wed, 18 Dec 2024 20:53:55 +0000
Subject: [PATCH] step1 wallet card adjust

---
 lnbits/core/templates/core/wallet.html | 127 +++++++++++++++++++++----
 1 file changed, 106 insertions(+), 21 deletions(-)

diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index 58ff78e43..4c6363bf2 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -34,31 +34,111 @@
         } : ''"
         >
           <q-card-section>
-            <h3 class="q-my-none text-no-wrap">
-              <strong v-text="formattedBalance"></strong>
-              <small> {{LNBITS_DENOMINATION}}</small>
-              <lnbits-update-balance
-                :wallet_id="this.g.wallet.id"
-                @credit-value="handleBalanceUpdate"
-                class="q-ml-md"
-              ></lnbits-update-balance>
-            </h3>
             <div class="row">
-              <div class="col">
-                <div v-if="g.wallet.currency">
+              <div class="col-1" style="max-width: 30px">
+                <q-btn
+                  v-if="g.wallet.currency"
+                  @click="swapBalancePriority"
+                  style="height: 50px"
+                  class="q-mt-lg"
+                  flat
+                  dense
+                  icon="swap_vert"
+                ></q-btn>
+              </div>
+              <div class="col-11">
+                <div
+                  class="column"
+                  v-if="!isPrioritySwapped"
+                  style="height: 100px"
+                >
+                  <div class="col-7">
+                    <div class="row">
+                      <div class="col-auto">
+                        <div class="text-h3 q-my-none text-no-wrap">
+                          <strong v-text="formattedBalance"></strong>
+                          <small> {{LNBITS_DENOMINATION}}</small>
+                        </div>
+                      </div>
+                      <div class="col-auto">
+                        <lnbits-update-balance
+                          v-if="$q.screen.lt.lg"
+                          :wallet_id="this.g.wallet.id"
+                          :callback="updateBalanceCallback"
+                          :small_btn="true"
+                        ></lnbits-update-balance>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div v-if="g.wallet.currency && fiatTracking">
+                      <span
+                        class="text-h5 text-italic"
+                        v-text="formattedFiatAmount"
+                        style="opacity: 0.75"
+                      ></span>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  class="column"
+                  v-if="isPrioritySwapped && fiatTracking"
+                  style="height: 100px"
+                >
+                  <div class="col-7">
+                    <div class="row">
+                      <div class="col-auto">
+                        <div
+                          v-if="g.wallet.currency"
+                          class="text-h3 q-my-none text-no-wrap"
+                        >
+                          <strong
+                            v-text="formattedFiatAmount"
+                          ></strong>
+                        </div>
+                      </div>
+                      <div class="col-auto">
+                        <lnbits-update-balance
+                          v-if="$q.screen.lt.lg"
+                          :wallet_id="this.g.wallet.id"
+                          :callback="updateBalanceCallback"
+                          :small_btn="true"
+                        ></lnbits-update-balance>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <span
+                      class="text-h5 text-italic"
+                      style="opacity: 0.75"
+                      v-text="formattedBalance + ' {{LNBITS_DENOMINATION}}'"
+                    >
+                    </span>
+                  </div>
+                </div>
+
+                <div class="absolute-right q-pa-md" v-if="$q.screen.gt.md && g.wallet.currency && fiatTracking">
+                  <div class="text-bold text-italic">
+                    BTC Price
+                    <span
+                      :class="{'text-positive q-pl-xs': priceChange > 0, 'text-negative q-pl-xs': priceChange < 0}"
+                      v-text="priceChange"
+                    ></span>
+                  </div>
                   <span
-                    class="text-h5 text-italic"
-                    v-text="formattedFiatBalance"
-                    style="opacity: 0.75"
+                    class="text-bold text-italic"
+                    v-text="formattedExchange"
                   ></span>
                 </div>
-              </div>
-              <div class="col">
                 <q-btn
+                  v-if="$q.screen.lt.md"
                   @click="mobileSimple = !mobileSimple"
                   color="primary"
-                  class="float-right lt-md"
+                  class="q-ml-xl absolute-right"
+                  dense
                   size="sm"
+                  style="height: 20px; margin-top: 75px"
                   flat
                   :icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
                   :label="mobileSimple ? $t('more') : $t('less')"
@@ -71,7 +151,7 @@
               <q-btn
                 unelevated
                 color="primary"
-                class="full-width"
+                class="q-mr-md"
                 @click="showParseDialog"
                 :label="$t('paste_request')"
               ></q-btn>
@@ -80,7 +160,7 @@
               <q-btn
                 unelevated
                 color="primary"
-                class="full-width"
+                class="q-mr-md"
                 @click="showReceiveDialog"
                 :label="$t('create_invoice')"
               ></q-btn>
@@ -89,14 +169,19 @@
               <q-btn
                 unelevated
                 color="secondary"
-                icon="photo_camera"
-                @click="showCamera"
+                icon="qr_code_scanner"
                 :label="$t('scan')"
               >
                 <q-tooltip
                   ><span v-text="$t('camera_tooltip')"></span
                 ></q-tooltip>
               </q-btn>
+              <lnbits-update-balance
+              v-if="$q.screen.gt.md"
+              :wallet_id="this.g.wallet.id"
+              :callback="updateBalanceCallback"
+              :small_btn="false"
+            ></lnbits-update-balance>
             </div>
           </div>
         </q-card>