Merge pull request #268 from TechMiX/fixRTLproblems

add rtl-layout class to base component

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>

frontend/src/app/components/amount/amount.component.html

@@ -6,7 +6,7 @@
     <span i18n="shared.confidential">Confidential</span>
   </ng-template>
   <ng-template #default>
-    {{ satoshis / 100000000 | number : digitsInfo }}
+    &lrm;{{ satoshis / 100000000 | number : digitsInfo }}
     <ng-template [ngIf]="network === 'liquid'">L-</ng-template>
     <ng-template [ngIf]="network === 'testnet'">t</ng-template>BTC
   </ng-template>

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) {

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -12,7 +12,7 @@
         <div class="fee-span">
           {{ block.feeRange[1] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
         </div>
-        <div class="block-size">{{ block.size | bytes: 2 }}</div>
+        <div class="block-size">&lrm;{{ block.size | bytes: 2 }}</div>
         <div class="transaction-count">
           <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
           <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>

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>

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -10,7 +10,7 @@
           <div class="fee-span">
             {{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
           </div>
-          <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
+          <div class="block-size">&lrm;{{ projectedBlock.blockSize | bytes: 2 }}</div>
           <div class="transaction-count">
             <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
             <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>

frontend/src/app/components/start/start.component.html

@@ -1,4 +1,4 @@
-<div id="blockchain-container">
+<div id="blockchain-container" dir="ltr">
   <app-blockchain></app-blockchain>
 </div>
 

frontend/src/app/components/transaction/transaction.component.html

@@ -173,7 +173,7 @@
 
     <app-transactions-list #txList [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
 
-    <h2 i18n="transaction.details">Details</h2>
+    <h2 class="text-left" i18n="transaction.details">Details</h2>
     <div class="box">
       <table class="table table-borderless table-striped">
         <tbody>

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 style="text-align: 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 style="text-align: left;">{{ vin.scriptsig }}</td>
                         </tr>
                       </ng-template>
                       <tr *ngIf="vin.witness">
                         <td i18n="transactions-list.witness">Witness</td>
-                        <td>{{ vin.witness.join(' ') }}</td>
+                        <td style="text-align: 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 style="text-align: 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 style="text-align: left;" [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
                       </tr>
                       <tr>
                         <td i18n="transactions-list.nsequence">nSequence</td>
-                        <td>{{ formatHex(vin.sequence) }}</td>
+                        <td style="text-align: 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 style="text-align: 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 style="text-align: 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 style="text-align: 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 style="text-align: 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 style="text-align: left;">{{ vout.scriptpubkey_asm | hex2ascii }}</td>
                       </tr>
                     </tbody>
                   </table>

frontend/src/styles.scss

@@ -450,3 +450,52 @@ 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;
+    }
+
+    .text-left {
+        text-align: right !important;
+    }
+
+    .text-right {
+        text-align: left !important;
+    }
+
+    .bitcoin-block {
+        direction: rtl;
+    }
+}