From e0adc505dbe4acbaad56db634ed5c8e07a1bff03 Mon Sep 17 00:00:00 2001
From: TechMiX <mytechmix@gmail.com>
Date: Wed, 9 Dec 2020 01:57:18 +0100
Subject: [PATCH] add rtl-layout class to base component

---
 .../components/address/address.component.html |  2 +-
 .../src/app/components/app/app.component.ts   |  2 +
 .../latest-blocks.component.html              |  2 +-
 .../transactions-list.component.html          | 24 ++++++------
 frontend/src/styles.scss                      | 37 +++++++++++++++++++
 5 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 35a02bf38..41728c083 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -1,5 +1,5 @@
 <div class="container-xl">
-  <h1 style="float: left;" i18n="shared.address">Address</h1>
+  <h1 class="float-left" i18n="shared.address">Address</h1>
   <a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;">
     <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
     <span class="d-none d-lg-inline">{{ addressString }}</span>
diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts
index 59f4fed32..86f244d47 100644
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -19,10 +19,12 @@ export class AppComponent implements OnInit {
   ) {
     if (this.locale.startsWith('ar') || this.locale.startsWith('fa')) {
       this.dir = 'rtl';
+      this.class = 'rtl-layout';
     }
   }
 
   @HostBinding('attr.dir') dir = 'ltr';
+  @HostBinding('class') class;
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvents(event: KeyboardEvent) {
diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
index 46e043107..5c8853158 100644
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
@@ -1,5 +1,5 @@
 <div class="container-xl">
-  <h1 style="float: left;" i18n="latest-blocks.blocks">Blocks</h1>
+  <h1 class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
   <br>
 
   <div class="clearfix"></div>
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index a3af65da1..5ea8bd9b2 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
   <div *ngIf="!transactionPage" class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
-    <a [routerLink]="['/tx/' | relativeUrl, tx.txid]" [state]="{ data: tx }">
+    <a class="float-left" [routerLink]="['/tx/' | relativeUrl, tx.txid]" [state]="{ data: tx }">
       <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 16 }}</span>
       <span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>
     </a>
@@ -69,32 +69,32 @@
                       <ng-template [ngIf]="vin.scriptsig">
                         <tr>
                           <td i18n="transactions-list.scriptsig.asm|ScriptSig (ASM)">ScriptSig (ASM)</td>
-                          <td [innerHTML]="vin.scriptsig_asm | asmStyler"></td>
+                          <td class="text-left" [innerHTML]="vin.scriptsig_asm | asmStyler"></td>
                         </tr>
                         <tr>
                           <td i18n="transactions-list.scriptsig.hex|ScriptSig (HEX)">ScriptSig (HEX)</td>
-                          <td>{{ vin.scriptsig }}</td>
+                          <td class="text-left">{{ vin.scriptsig }}</td>
                         </tr>
                       </ng-template>
                       <tr *ngIf="vin.witness">
                         <td i18n="transactions-list.witness">Witness</td>
-                        <td>{{ vin.witness.join(' ') }}</td>
+                        <td class="text-left">{{ vin.witness.join(' ') }}</td>
                       </tr>
                       <tr *ngIf="vin.inner_redeemscript_asm">
                         <td i18n="transactions-list.p2sh-redeem-script">P2SH redeem script</td>
-                        <td [innerHTML]="vin.inner_redeemscript_asm | asmStyler"></td>
+                        <td class="text-left" [innerHTML]="vin.inner_redeemscript_asm | asmStyler"></td>
                       </tr>
                       <tr *ngIf="vin.inner_witnessscript_asm">
                         <td i18n="transactions-list.p2wsh-witness-script">P2WSH witness script</td>
-                        <td [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
+                        <td class="text-left" [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
                       </tr>
                       <tr>
                         <td i18n="transactions-list.nsequence">nSequence</td>
-                        <td>{{ formatHex(vin.sequence) }}</td>
+                        <td class="text-left">{{ formatHex(vin.sequence) }}</td>
                       </tr>
                       <tr *ngIf="vin.prevout">
                         <td i18n="transactions-list.previous-output-script">Previous output script</td>
-                        <td [innerHTML]="vin.prevout.scriptpubkey_asm | asmStyler">{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"</td>
+                        <td class="text-left" [innerHTML]="vin.prevout.scriptpubkey_asm | asmStyler">{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"</td>
                       </tr>
                     </tbody>
                   </table>
@@ -164,19 +164,19 @@
                     <tbody>
                       <tr *ngIf="vout.scriptpubkey_type">
                         <td i18n="transactions-list.vout.scriptpubkey-type">Type</td>
-                        <td>{{ vout.scriptpubkey_type.toUpperCase() }}</td>
+                        <td class="text-left">{{ vout.scriptpubkey_type.toUpperCase() }}</td>
                       </tr>
                       <tr>
                         <td i18n="transactions-list.scriptpubkey.asm|ScriptPubKey (ASM)">ScriptPubKey (ASM)</td>
-                        <td [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
+                        <td class="text-left" [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
                       </tr>
                       <tr>
                         <td i18n="transactions-list.scriptpubkey.hex|ScriptPubKey (HEX)">ScriptPubKey (HEX)</td>
-                        <td>{{ vout.scriptpubkey }}</td>
+                        <td class="text-left">{{ vout.scriptpubkey }}</td>
                       </tr>
                       <tr *ngIf="vout.scriptpubkey_type == 'op_return'">
                         <td>OP_RETURN <span i18n="transactions-list.vout.scriptpubkey-type.data">data</span></td>
-                        <td>{{ vout.scriptpubkey_asm | hex2ascii }}</td>
+                        <td class="text-left">{{ vout.scriptpubkey_asm | hex2ascii }}</td>
                       </tr>
                     </tbody>
                   </table>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index f1a0ab361..43a3ddc47 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -450,3 +450,40 @@ th {
 .crypto { color: #fa3d3d }
 .locktime { color: #ff8c00 }
 .reserved { color: #ff8c00 }
+
+.rtl-layout {
+    .arrow {
+        @extend .arrow;
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+    }
+
+    .table td {
+        text-align: right;
+    }
+
+    .table th {
+        text-align: right;
+    }
+
+    .title-block {
+        text-align: right;
+    }
+
+    .mr-3 {
+        @extend .ml-3;
+        margin-right: 0 !important;
+    }
+
+    .mr-1 {
+        @extend .ml-1;
+    }
+
+    .float-left {
+        float: right !important;
+    }
+
+    .float-right {
+        float: left !important;
+    }
+}