Merge pull request #3244 from mempool/mononaut/fix-ln-rtl

Fix miscellaneous RTL layout bugs

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;

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;

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;

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;

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"
+<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING" class="mb-3 d-flex menu">
-  style="padding: 0px 35px;">
 
-  <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]"

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;
+    }
+  }
+}

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;

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%;

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

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;
 }

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;

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]">

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;
+    }
+  }
+}

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>

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;

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

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;

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 {
+    .card-header, h1, h2, h3 {
-    @extend .full-container;
+      direction: rtl;
-    .formRadioGroup {
-      @extend .formRadioGroup;
-      direction: ltr;
     }
   }