responsive clock, fix blockchain

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

@@ -1,11 +1,25 @@
 <div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
-  <div class="position-container" [ngClass]="network ? network : ''">
+  <div class="position-container" [ngClass]="network ? network : ''" [style.top]="(height / 3) + 'px'">
     <span>
       <div class="blocks-wrapper">
-        <app-mempool-blocks [tiny]="true" [count]="3"></app-mempool-blocks>
-        <app-blockchain-blocks [tiny]="true"></app-blockchain-blocks>
+        <app-mempool-blocks [minimal]="true" [count]="mempoolBlocks" [blockWidth]="blockWidth"></app-mempool-blocks>
+        <app-blockchain-blocks [minimal]="true" [count]="blockchainBlocks" [blockWidth]="blockWidth"></app-blockchain-blocks>
+      </div>
+      <div class="divider" [style.top]="-(height / 6) + 'px'">
+        <svg
+          viewBox="0 0 2 175"
+          [style.width]="'2px'"
+          [style.height]="(5 * height / 6) + 'px'"
+        >
+          <line
+            class="divider-line"
+            x0="0"
+            x1="0"
+            y0="0"
+            y1="175px"
+          ></line>
+        </svg>
       </div>
-      <div class="divider"></div>
     </span>
   </div>
 </div>

frontend/src/app/components/clockchain/clockchain.component.scss

@@ -1,15 +1,17 @@
 .divider {
-  width: 4px;
-  height: 180px;
-  left: 0;
-  top: -40px;
   position: absolute;
-  margin-bottom: 120px;
-  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0' x2='0' y2='100%' stroke='white' stroke-width='8' stroke-dasharray='18%2c32' stroke-dashoffset='-5' stroke-linecap='square'/%3e%3c/svg%3e");
+  left: -1px;
+  top: 0;
+  .divider-line {
+    stroke: white;
+    stroke-width: 4px;
+    stroke-linecap: butt;
+    stroke-dasharray: 25px 25px;
+  }
 }
 
 .blockchain-wrapper {
-  height: 250px;
+  height: 100%;
 
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
@@ -20,37 +22,10 @@
 .position-container {
   position: absolute;
   left: 0;
-  top: 75px;
+  top: 0;
   transform: translateX(50vw);
 }
 
-.position-container.liquid, .position-container.liquidtestnet {
-  transform: translateX(420px);
-}
-
-.blockchain-wrapper {
-  .position-container {
-    transform: translateX(95vw);
-  }
-  .position-container.liquid, .position-container.liquidtestnet {
-    transform: translateX(50vw);
-  }
-  .position-container.loading {
-    transform: translateX(50vw);
-  }
-}
-.blockchain-wrapper.time-ltr {
-  .position-container {
-    transform: translateX(5vw);
-  }
-  .position-container.liquid, .position-container.liquidtestnet {
-    transform: translateX(50vw);
-  }
-  .position-container.loading {
-    transform: translateX(50vw);
-  }
-}
-
 .black-background {
   background-color: #11131f;
   z-index: 100;

frontend/src/app/components/clockchain/clockchain.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, ChangeDetectorRef } from '@angular/core';
 import { firstValueFrom, Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';
 
@@ -8,7 +8,15 @@ import { StateService } from '../../services/state.service';
   styleUrls: ['./clockchain.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ClockchainComponent implements OnInit, OnDestroy {
+export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() width: number = 300;
+  @Input() height: number = 60;
+
+  mempoolBlocks: number = 3;
+  blockchainBlocks: number = 6;
+  blockWidth: number = 50;
+  dividerStyle;
+
   network: string;
   timeLtrSubscription: Subscription;
   timeLtr: boolean = this.stateService.timeLtr.value;
@@ -19,9 +27,12 @@ export class ClockchainComponent implements OnInit, OnDestroy {
 
   constructor(
     public stateService: StateService,
+    private cd: ChangeDetectorRef,
   ) {}
 
   ngOnInit() {
+    this.ngOnChanges();
+
     this.network = this.stateService.network;
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
       this.timeLtr = !!ltr;
@@ -34,6 +45,17 @@ export class ClockchainComponent implements OnInit, OnDestroy {
     });
   }
 
+  ngOnChanges() {
+    this.blockWidth = Math.floor(7 * this.height / 12);
+    this.mempoolBlocks = Math.floor(((this.width / 2) - (this.blockWidth * 0.32)) / (1.24 * this.blockWidth));
+    this.blockchainBlocks = this.mempoolBlocks;
+    this.dividerStyle = {
+      width: '2px',
+      height: `${this.height}px`,
+    };
+    this.cd.markForCheck();
+  }
+
   ngOnDestroy() {
     this.timeLtrSubscription.unsubscribe();
     this.connectionStateSubscription.unsubscribe();