From 5937e959c3085b56c4c027f0da9fbd7ce7396a3c Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 6 Mar 2023 19:59:56 -0600
Subject: [PATCH] Fix miscellaneous RTL layout bugs

---
 .../block-fees-graph.component.scss           | 25 ----------
 .../block-prediction-graph.component.scss     | 25 ----------
 .../block-rewards-graph.component.scss        | 25 ----------
 .../block-sizes-weights-graph.component.scss  | 25 ----------
 .../components/graphs/graphs.component.html   |  7 ++-
 .../components/graphs/graphs.component.scss   | 11 +++-
 .../hashrate-chart.component.scss             | 25 ----------
 .../hashrate-chart-pools.component.scss       | 25 ----------
 .../pool-ranking/pool-ranking.component.scss  | 25 ----------
 .../lightning/channel/channel.component.scss  |  2 +-
 .../channels-list.component.scss              |  8 +++
 .../app/lightning/group/group.component.html  |  2 +-
 .../app/lightning/group/group.component.scss  | 16 +++++-
 .../app/lightning/node/node.component.html    |  2 +-
 .../nodes-networks-chart.component.scss       | 25 ----------
 .../nodes-per-isp-chart.component.scss        | 25 ----------
 .../lightning-statistics-chart.component.scss | 25 ----------
 frontend/src/styles.scss                      | 50 ++++++++++++++++---
 18 files changed, 82 insertions(+), 266 deletions(-)

diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
index ec1755e7d..65447419a 100644
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
@@ -54,31 +54,6 @@
   max-height: 270px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .disabled {
   pointer-events: none;
   opacity: 0.5;
diff --git a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
index ec1755e7d..65447419a 100644
--- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
+++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
@@ -54,31 +54,6 @@
   max-height: 270px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .disabled {
   pointer-events: none;
   opacity: 0.5;
diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
index ec1755e7d..65447419a 100644
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
@@ -54,31 +54,6 @@
   max-height: 270px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .disabled {
   pointer-events: none;
   opacity: 0.5;
diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
index 85765e0e1..65447419a 100644
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
@@ -54,31 +54,6 @@
   max-height: 270px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 1130px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 1130px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .disabled {
   pointer-events: none;
   opacity: 0.5;
diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html
index af5136a38..105c6cbf2 100644
--- a/frontend/src/app/components/graphs/graphs.component.html
+++ b/frontend/src/app/components/graphs/graphs.component.html
@@ -1,10 +1,9 @@
-<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING" class="mb-3 d-flex menu"
-  style="padding: 0px 35px;">
+<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING" class="mb-3 d-flex menu">
 
-  <a routerLinkActive="active" class="btn btn-primary mr-1" [class]="padding"
+  <a routerLinkActive="active" class="btn btn-primary" [class]="padding"
     [routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>
 
-  <div ngbDropdown class="mr-1" [class]="padding" *ngIf="stateService.env.MINING_DASHBOARD">
+  <div ngbDropdown [class]="padding" *ngIf="stateService.env.MINING_DASHBOARD">
     <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="mining">Mining</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]"
diff --git a/frontend/src/app/components/graphs/graphs.component.scss b/frontend/src/app/components/graphs/graphs.component.scss
index b952137b9..0a066266d 100644
--- a/frontend/src/app/components/graphs/graphs.component.scss
+++ b/frontend/src/app/components/graphs/graphs.component.scss
@@ -1,6 +1,15 @@
 .menu {
   flex-grow: 1;
+  padding: 0 35px;
   @media (min-width: 576px) {
     max-width: 400px;
   }
-}
+
+  & > * {
+    margin: 0;
+    margin-inline-end: 0.25rem;
+    &.last-child {
+      margin-inline-end: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index 154d46fa6..2c9a4447c 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -54,31 +54,6 @@
   height: 240px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .pool-distribution {
   min-height: 56px;
   display: block;
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
index 00414e4df..8f619aa85 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@@ -48,31 +48,6 @@
   max-height: 293px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .loadingGraphs {
   position: absolute;
   top: 50%;
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
index 277c7d4ad..b10fb66a8 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -33,31 +33,6 @@
   }
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .bottom-padding {
   @media (max-width: 992px) {
     padding-bottom: 65px
diff --git a/frontend/src/app/lightning/channel/channel.component.scss b/frontend/src/app/lightning/channel/channel.component.scss
index 9405af103..9451c8112 100644
--- a/frontend/src/app/lightning/channel/channel.component.scss
+++ b/frontend/src/app/lightning/channel/channel.component.scss
@@ -78,5 +78,5 @@ h3 {
 
 .details-button {
   align-self: center;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
diff --git a/frontend/src/app/lightning/channels-list/channels-list.component.scss b/frontend/src/app/lightning/channels-list/channels-list.component.scss
index b460e8a51..fa2fe3cf5 100644
--- a/frontend/src/app/lightning/channels-list/channels-list.component.scss
+++ b/frontend/src/app/lightning/channels-list/channels-list.component.scss
@@ -19,6 +19,14 @@
   }
 }
 
+:host-context(.rtl-layout) .formRadioGroup {
+  direction: ltr;
+  @media (min-width: 435px) {
+    right: unset;
+    left: 0;
+  }
+}
+
 .btn-group {
   @media (max-width: 435px) {
     flex-grow: 1;
diff --git a/frontend/src/app/lightning/group/group.component.html b/frontend/src/app/lightning/group/group.component.html
index 541885cce..de85b299e 100644
--- a/frontend/src/app/lightning/group/group.component.html
+++ b/frontend/src/app/lightning/group/group.component.html
@@ -92,7 +92,7 @@
               </ng-template>
               <input type="text" class="form-control" aria-label="Text input with dropdown button"
                 [value]="node.socketsObject[selectedSocketIndex].socket">
-              <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible[i] = 1"
+              <button class="btn btn-secondary" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible[i] = 1"
                 (mouseout)="qrCodeVisible[i] = 0">
                 <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
                 <div class="qr-wrapper" [hidden]="!qrCodeVisible[i]">
diff --git a/frontend/src/app/lightning/group/group.component.scss b/frontend/src/app/lightning/group/group.component.scss
index fedf2d78e..6deb4ca14 100644
--- a/frontend/src/app/lightning/group/group.component.scss
+++ b/frontend/src/app/lightning/group/group.component.scss
@@ -8,7 +8,7 @@
 }
 
 h1 {
-  margin-left: 15px;
+  margin-inline-start: 15px;
 }
 
 .qr-wrapper {
@@ -57,3 +57,17 @@ h1 {
 .description-text {
   white-space: break-spaces;
 }
+
+.timestamp-first .input-group {
+  input {
+    margin-inline-end: .25rem;
+  }
+}
+
+:host-context(.rtl-layout) {
+  .timestamp-first .input-group {
+    button {
+      margin-inline-end: .25rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index 42d8f568d..111dc3bd0 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -57,7 +57,7 @@
             </tr>
             <tr *ngIf="(avgChannelDistance$ | async) as avgDistance;">
               <td i18n="lightning.avg-distance" class="text-truncate">Avg channel distance</td>
-              <td>{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
+              <td class="direction-ltr">{{ avgDistance | number : '1.0-0' }} <span class="symbol">km</span> <span class="separator">/</span> {{ kmToMiles(avgDistance) | number : '1.0-0' }} <span class="symbol">mi</span></td>
             </tr>
           </tbody>
         </table>
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
index 366d75a94..d44c90956 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@@ -53,31 +53,6 @@
   height: 145px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .pool-distribution {
   min-height: 56px;
   display: block;
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
index 54055de36..e36747e08 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
@@ -34,31 +34,6 @@
   }
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .bottom-padding {
   @media (max-width: 992px) {
     padding-bottom: 65px
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
index 7c7d38ed9..da8da11f4 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@@ -53,31 +53,6 @@
   height: 145px;
 }
 
-.formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
 .pool-distribution {
   min-height: 56px;
   display: block;
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index b0cdb5ef6..d9ea867dc 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -746,7 +746,37 @@ th {
   font-family: monospace;
 }
 
+.full-container .card-header .formRadioGroup {
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 991px) {
+    position: relative;
+    top: -100px;
+  }
+  @media (min-width: 830px) and (max-width: 991px) {
+    position: relative;
+    top: 0px;
+  }
+  @media (min-width: 830px) {
+    flex-direction: row;
+    float: right;
+    margin-top: 0px;
+  }
+  .btn-sm {
+    font-size: 9px;
+    @media (min-width: 830px) {
+      font-size: 14px;
+    }
+  }
+}
+
+.direction-ltr {
+  direction: ltr;
+}
+
 .rtl-layout {
+  text-align: start;
 
   .navbar-brand {
     margin-right: 0px;
@@ -882,19 +912,25 @@ th {
     }
   }
 
-  .container-graph {
+  .chart {
+    direction: ltr;
+  }
+
+  .formRadioGroup {
+    @media (min-width: 830px) {
+      float: left;
+    }
+  }
+
+  .container-graph, .full-container, .toggle-holder {
     @extend .container-graph;
     .formRadioGroup {
       @extend .formRadioGroup;
       direction: ltr;
     }
-  }
 
-  .full-container {
-    @extend .full-container;
-    .formRadioGroup {
-      @extend .formRadioGroup;
-      direction: ltr;
+    .card-header, h1, h2, h3 {
+      direction: rtl;
     }
   }