From 34c9ca419757d9790165df9897c63c77926d415a Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 15 Nov 2021 12:00:41 +0400
Subject: [PATCH] Adding version and locktime to transaction details

fixes #929
---
 .../transaction/transaction.component.html    | 112 ++++++++++++------
 .../transaction/transaction.component.scss    |   2 +-
 2 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 31d26f381..5235c2b3d 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -206,26 +206,44 @@
       <h2 i18n="transaction.details">Details</h2>
     </div>
     <div class="box">
-      <table class="table table-borderless table-striped">
-        <tbody>
-          <tr>
-            <td i18n="transaction.size|Transaction Size">Size</td>
-            <td [innerHTML]="'&lrm;' + (tx.size | bytes: 2)"></td>
-          </tr>
-          <tr>
-            <td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
-            <td [innerHTML]="'&lrm;' + (tx.weight / 4 | vbytes: 2)"></td>
-          </tr>
-          <tr>
-            <td i18n="transaction.weight|Transaction Weight">Weight</td>
-            <td [innerHTML]="'&lrm;' + (tx.weight | wuBytes: 2)"></td>
-          </tr>
-          <tr>
-            <td i18n="transaction.hex">Transaction Hex</td>
-            <td><a target="_blank" href="{{ network === '' ? '' : '/' + network }}/api/tx/{{ txId }}/hex"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="row">
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td i18n="transaction.size|Transaction Size">Size</td>
+                <td [innerHTML]="'&lrm;' + (tx.size | bytes: 2)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
+                <td [innerHTML]="'&lrm;' + (tx.weight / 4 | vbytes: 2)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.weight|Transaction Weight">Weight</td>
+                <td [innerHTML]="'&lrm;' + (tx.weight | wuBytes: 2)"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td i18n="transaction.version">Version</td>
+                <td [innerHTML]="'&lrm;' + (tx.version | number)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.locktime">Locktime</td>
+                <td [innerHTML]="'&lrm;' + (tx.locktime | number)"></td>
+              </tr>
+              <tr>
+                <td i18n="transaction.hex">Transaction Hex</td>
+                <td><a target="_blank" href="{{ network === '' ? '' : '/' + network }}/api/tx/{{ txId }}/hex"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"></fa-icon></a></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
 
   </ng-template>
@@ -286,22 +304,44 @@
 
     <h2 i18n="transaction.details">Details</h2>
     <div class="box">
-      <table class="table table-borderless table-striped">
-        <tbody>
-          <tr>
-            <td><span class="skeleton-loader"></span></td>
-            <td><span class="skeleton-loader"></span></td>
-          </tr>
-          <tr>
-            <td><span class="skeleton-loader"></span></td>
-            <td><span class="skeleton-loader"></span></td>
-          </tr>
-          <tr>
-            <td><span class="skeleton-loader"></span></td>
-            <td><span class="skeleton-loader"></span></td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="row">
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td><span class="skeleton-loader"></span></td>
+                <td><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
     </div>
 
   </ng-template>
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index d6a736191..d7d9fb5df 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -110,7 +110,7 @@
 		}
 		&:last-child {
 			text-align: right;
-			@media (min-width: 768px) {
+			@media (min-width: 850px) {
 			text-align: left;
 			}
 		}