From 83246be962f7a317b6b6d85fdd46beed338082ed Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 28 May 2024 21:06:58 +0000
Subject: [PATCH] Responsive active acceleration details

---
 .../active-acceleration-box.component.html    | 38 +++++++------
 .../active-acceleration-box.component.scss    | 53 ++++++++++++++++---
 2 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
index 75e821e9f..d009a5e63 100644
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html
@@ -1,8 +1,8 @@
 <table>
   <tbody>
     <tr>
-      <td class="td-width" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
-      <td>
+      <td class="td-width field-label" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
+      <td class="field-value">
         <div class="effective-fee-container">
           @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) {
             <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
@@ -11,24 +11,30 @@
           }
         </div>
       </td>
-      <td rowspan="2" *ngIf="tx && (tx.acceleratedBy || accelerationInfo) && miningStats" class="text-right" style="width: 100%;">
-        <div class="chart-container" style="width: 100px; margin-left:auto;">
-          <div
-            echarts
-            *browserOnly
-            class="chart"
-            [initOpts]="chartInitOptions"
-            [options]="chartOptions"
-            style="height: 72px"
-            (chartInit)="onChartInit($event)"
-          ></div>
+      <td class="pie-chart" rowspan="2">
+        <div class="chart-container">
+          @if (tx && (tx.acceleratedBy || accelerationInfo) && miningStats) {
+            <div
+              echarts
+              *browserOnly
+              class="chart"
+              [initOpts]="chartInitOptions"
+              [options]="chartOptions"
+              style="height: 72px; width: 72px;"
+              (chartInit)="onChartInit($event)"
+            ></div>
+          } @else {
+            <div class="chart-loading">
+              <div class="spinner-border text-light"></div>
+            </div>
+          }
         </div>
       </td>
     </tr>
     <tr>
-      <td class="td-width" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
-      <td *ngIf="acceleratedByPercentage">
-        {{ acceleratedByPercentage }} <span class="symbol">of hashrate</span>
+      <td class="td-width field-label" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
+      <td class="field-value" *ngIf="acceleratedByPercentage">
+        {{ acceleratedByPercentage }} <span class="symbol hashrate-label">of hashrate</span>
       </td>
     </tr>
   </tbody>
diff --git a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
index 6dba0b06f..12849dc65 100644
--- a/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
+++ b/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.scss
@@ -1,9 +1,50 @@
 .td-width {
-	width: 150px;
-	min-width: 150px;
+  width: 150px;
+  min-width: 150px;
 
-	@media (max-width: 768px) {
-	  width: 175px;
-	  min-width: 175px;
-	}
+  @media (max-width: 768px) {
+    width: 175px;
+    min-width: 175px;
+  }
+}
+
+.field-label {
+  @media (max-width: 849px) {
+    text-align: left;    
+  }
+  @media (max-width: 649px) {
+    width: auto;
+    min-width: auto;
+  }
+}
+
+.field-value {
+  @media (max-width: 849px) {
+    width: 100%;
+  }
+
+  .hashrate-label {
+    @media (max-width: 420px) {
+      display: none;
+    }
+  }
+}
+
+.pie-chart {
+  width: 100%;
+  vertical-align: middle;
+  text-align: center;
+
+  .chart-container {
+    width: 72px;
+    height: 100%;
+    margin-left: auto;
+  }
+
+  @media (max-width: 850px) {
+    width: 150px;
+  }
+  @media (max-width: 420px) {
+    padding-left: 0;
+  }
 }
\ No newline at end of file