Merge pull request #24 from getumbrel/v0.1.1

Dynamic trimming of tx descriptions using CSS

src/components/BitcoinWallet.vue

@@ -74,8 +74,8 @@
               </div>
 
               <div class="d-flex w-100 justify-content-between" v-else>
-                <div>
-                  <h6 class="mb-0 font-weight-normal">
+                <div class="transaction-description">
+                  <h6 class="mb-0 font-weight-normal transaction-description-text">
                     <!-- Incoming tx icon -->
                     <svg
                       width="18"
@@ -114,10 +114,7 @@
                     </svg>
 
                     <!-- tx description -->
-                    <span
-                      style="margin-left: 6px;"
-                      :title="tx.description"
-                    >{{ tx.description.length > 19 ? tx.description.substring(0,19) + '...' : tx.description }}</span>
+                    <span style="margin-left: 6px;" :title="tx.description">{{ tx.description }}</span>
                   </h6>
 
                   <!-- Timestamp of tx -->
@@ -615,6 +612,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.transaction-description {
+  flex: 1;
+  min-width: 0;
+  .transaction-description-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: 10px;
+  }
+}
+
 // Transitions between mode/screen changes
 .lightning-mode-change-enter-active,
 .lightning-mode-change-leave-active {

src/components/LightningWallet.vue

@@ -75,8 +75,8 @@
 
               <!-- Transaction -->
               <div class="d-flex w-100 justify-content-between" v-else>
-                <div>
-                  <h6 class="mb-0 font-weight-normal">
+                <div class="transaction-description">
+                  <h6 class="mb-0 font-weight-normal transaction-description-text">
                     <!-- Incoming tx icon -->
                     <svg
                       width="18"
@@ -136,7 +136,7 @@
                       style="margin-left: 6px;"
                       :title="tx.description"
                       v-if="tx.description"
-                    >{{ tx.description.length > 19 ? tx.description.substring(0,19) + '...' : tx.description }}</span>
+                    >{{ tx.description }}</span>
 
                     <!-- If no description -->
                     <span style="margin-left: 6px;" v-else>Payment</span>
@@ -932,6 +932,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.transaction-description {
+  flex: 1;
+  min-width: 0;
+  .transaction-description-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: 10px;
+  }
+}
+
 // Transitions between mode/screen changes
 
 .lightning-mode-change-enter-active,

src/layouts/DashboardLayout.vue

@@ -78,7 +78,7 @@
         </div>
 
         <!-- Footer -->
-        <footer class="d-flex justify-content-end text-muted pr-3">
+        <footer class="d-flex justify-content-end text-muted pr-sm-2 pr-xl-3">
           <p>
             <small>
               <a href="https://getumbrel.com" target="_blank">getumbrel.com</a>

src/views/Lightning.vue

@@ -83,10 +83,10 @@
                 </a>
               </div>
             </template>
-            <div class="px-2 d-flex">
+            <div class="px-2 px-sm-3 pb-2 pb-sm-3 d-flex">
               <!-- Pubkey QR Code -->
               <qr-code :value="this.pubkey" :size="150" class="qr-image" showLogo></qr-code>
-              <div class="w-100 align-self-center ml-2">
+              <div class="w-100 align-self-center ml-3">
                 <input-copy size="sm" :value="this.pubkey"></input-copy>
               </div>
             </div>