Merge pull request #4274 from mempool/mononaut/fix-faq-blockchain

Fix faq blockchain positioning

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">
+  <div class="blockchain-wrapper" [dir]="timeLtr ? 'rtl' : 'ltr'" [class.time-ltr]="timeLtr">
-    <app-blockchain></app-blockchain>
+    <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>
 

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;
+  min-height: 220px;
-  scrollbar-width: none;
+  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 {

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