From 80afcae645a282235a08428c3e2e3b7179539443 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 23 Sep 2023 00:40:47 +0100
Subject: [PATCH] Fix faq blockchain positioning

---
 .../app/docs/api-docs/api-docs.component.html | 12 +++++-
 .../app/docs/api-docs/api-docs.component.scss | 43 ++++++++++++++++---
 .../app/docs/api-docs/api-docs.component.ts   |  9 +++-
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/docs/api-docs/api-docs.component.html b/frontend/src/app/docs/api-docs/api-docs.component.html
index 40a7ae486..48a8bf418 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.html
+++ b/frontend/src/app/docs/api-docs/api-docs.component.html
@@ -137,8 +137,16 @@
 
 <ng-template type="what-is-a-mempool-explorer">
   <p>A mempool explorer is a tool that enables you to view real-time and historical information about a node's mempool, visualize its transactions, and search and view those transactions.</p><p>The mempool.space website invented the concept of visualizing a Bitcoin node's mempool as <b>projected blocks</b>. These blocks are the inspiration for our half-filled block logo.</p><p>Projected blocks are on the left of the dotted white line, and confirmed blocks are on the right.</p>
-  <div class="blockchain-wrapper">
-    <app-blockchain></app-blockchain>
+  <div class="blockchain-wrapper" [dir]="timeLtr ? 'rtl' : 'ltr'" [class.time-ltr]="timeLtr">
+    <div class="position-container">
+      <span>
+        <div class="blocks-wrapper">
+          <app-mempool-blocks></app-mempool-blocks>
+          <app-blockchain-blocks></app-blockchain-blocks>
+        </div>
+        <div id="divider"></div>
+      </span>
+    </div>
   </div>
 </ng-template>
 
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss
index b90b843d9..f90274046 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs.component.scss
@@ -259,13 +259,46 @@ h3 {
 }
 
 .blockchain-wrapper {
-  position: relative;
+  display: block;
+  height: 100%;
   width: 100%;
-  overflow: auto;
-  scrollbar-width: none;
+  min-height: 220px;
+  position: relative;
+  overflow: hidden;
+
+  .position-container {
+    position: absolute;
+    left: 50%;
+    bottom: 150px;
+  }
+
+  #divider {
+    width: 2px;
+    height: 175px;
+    left: 0;
+    top: -40px;
+    position: absolute;
+  }
+
+  &.time-ltr {
+    .blocks-wrapper {
+      transform: scaleX(-1);
+    }
+  }
 }
-.blockchain-wrapper::-webkit-scrollbar {
-  display: none;
+
+:host-context(.ltr-layout) {
+  .blockchain-wrapper.time-ltr .blocks-wrapper,
+  .blockchain-wrapper .blocks-wrapper {
+    direction: ltr;
+  }
+}
+
+:host-context(.rtl-layout) {
+  .blockchain-wrapper.time-ltr .blocks-wrapper,
+  .blockchain-wrapper .blocks-wrapper {
+    direction: rtl;
+  }
 }
 
 #disclaimer {
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.ts b/frontend/src/app/docs/api-docs/api-docs.component.ts
index b0ae5967d..333bb01ad 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.ts
+++ b/frontend/src/app/docs/api-docs/api-docs.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, QueryList, AfterViewInit, ViewChildren } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
-import { Observable, merge, of, Subject } from 'rxjs';
+import { Observable, merge, of, Subject, Subscription } from 'rxjs';
 import { tap, takeUntil } from 'rxjs/operators';
 import { ActivatedRoute } from "@angular/router";
 import { faqData, restApiDocsData, wsApiDocsData } from './api-docs-data';
@@ -30,6 +30,8 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
   officialMempoolInstance: boolean;
   auditEnabled: boolean;
   mobileViewport: boolean = false;
+  timeLtrSubscription: Subscription;
+  timeLtr: boolean = this.stateService.timeLtr.value;
 
   @ViewChildren(FaqTemplateDirective) faqTemplates: QueryList<FaqTemplateDirective>;
   dict = {};
@@ -104,12 +106,17 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
           this.electrsPort = 51302; break;
       }
     });
+
+    this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
+      this.timeLtr = !!ltr;
+    });
   }
 
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.complete();
     window.removeEventListener('scroll', this.onDocScroll);
+    this.timeLtrSubscription.unsubscribe();
   }
 
   onDocScroll() {