From ef49457ec6af5ea2eaa560ebb18b058d1a17c42b Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Fri, 25 Mar 2022 17:48:24 +0900
Subject: [PATCH 1/2] Pool addresses collapse - Cleanup mobile layout

---
 .../app/components/pool/pool.component.html   | 118 ++++++++++++++----
 .../app/components/pool/pool.component.scss   |  17 ++-
 .../src/app/components/pool/pool.component.ts |   2 +
 3 files changed, 106 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index 240648e2c..3ee144f64 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -9,44 +9,104 @@
 
     <div class="box">
       <div class="row">
+
         <div class="col-lg-9">
           <table class="table table-borderless table-striped" style="table-layout: fixed;">
             <tbody>
-              <tr>
-                <td class="label">Tags</td>
-                <td class="text-truncate" *ngIf="poolStats.pool.regexes.length else nodata">
-                  <div class="scrollable">
+
+              <!-- Regexes desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.tags">Tags</td>
+                <td *ngIf="poolStats.pool.regexes.length else nodata">
+                  {{ poolStats.pool.regexes }}
+                </td>
+              </tr>
+
+              <!-- Regexes mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span i18n="mining.tags" class="label">Tags</span>
+                  <div *ngIf="poolStats.pool.regexes.length else nodata" class="overflow-auto">
                     {{ poolStats.pool.regexes }}
                   </div>
                 </td>
               </tr>
-              <tr>
-                <td class="label">Addresses</td>
-                <td class="text-truncate" *ngIf="poolStats.pool.addresses.length else nodata">
-                  <div class="scrollable">
-                    <a *ngFor="let address of poolStats.pool.addresses"
+
+              <!-- Addresses desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.addresses">Addresses</td>
+                <td *ngIf="poolStats.pool.addresses.length else nodata">
+                  <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address">
+                    {{ poolStats.pool.addresses[0] }}
+                  </a>
+                  <button *ngIf="poolStats.pool.addresses.length >= 2" style="transform: translateY(-3px);"
+                    type="button" class="btn btn-outline-info btn-sm float-right" (click)="collapse.toggle()"
+                    [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
+                    <span i18n="show">Show</span> {{ poolStats.pool.addresses.length }}
+                  </button>
+                  <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
+                    <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
                       [routerLink]="['/address' | relativeUrl, address]">{{
                       address }}<br></a>
                   </div>
                 </td>
-                <ng-template #nodata>
-                  <td class="right-mobile">~</td>
-                </ng-template>
+              </tr>
+
+              <!-- Addresses mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.addresses">Addresses</span>
+                  <div *ngIf="poolStats.pool.addresses.length else nodatamobile">
+                    <button *ngIf="poolStats.pool.addresses.length >= 2" type="button"
+                      class="btn btn-outline-info btn-sm float-right small-button" (click)="collapse.toggle()"
+                      [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
+                      <span i18n="show">Show</span> {{ poolStats.pool.addresses.length }}
+                    </button>
+                    <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
+                      {{ poolStats.pool.addresses[0] | shortenString: 40 }}
+                    </a>
+                    <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
+                      <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
+                        [routerLink]="['/address' | relativeUrl, address]">{{
+                        address | shortenString: 40 }}<br></a>
+                    </div>
+                  </div>
+                </td>
               </tr>
             </tbody>
           </table>
         </div>
+
         <div class="col-lg-3">
           <table class="table table-borderless table-striped">
             <tbody>
-              <tr>
-                <td class="label">Mined Blocks</td>
+
+              <!-- Mined blocks desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
                 <td class="data">{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</td>
               </tr>
-              <tr>
-                <td class="label">Empty Blocks</td>
+              <!-- Mined blocks desktop -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
+                  <div>{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</div>
+                </td>
+              </tr>
+
+              <!-- Empty blocks desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.empty-blocks">Empty Blocks</td>
                 <td class="data">{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</td>
               </tr>
+              <!-- Empty blocks mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan="2">
+                  <span class="label" i18n="mining.empty-blocks">Blocks</span>
+                  <div>{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</div>
+                </td>
+              </tr>
+
             </tbody>
           </table>
         </div>
@@ -54,14 +114,20 @@
     </div>
   </div>
 
+  <ng-template #nodata>
+    <td>~</td>
+  </ng-template>
+  <ng-template #nodatamobile>
+    <div>~</div>
+  </ng-template>
+
   <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
   <div class="text-center loadingGraphs" *ngIf="isLoading">
     <div class="spinner-border text-light"></div>
   </div>
 
-  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll
-    [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50"
-    (scrolled)="loadMore()">
+  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
+    [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
     <thead>
       <th class="height" i18n="latest-blocks.height">Height</th>
       <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
@@ -147,7 +213,9 @@
   <div>
     <div class="mb-3" style="display:flex; position: relative">
       <div class="skeleton-loader mr-3" style="width: 50px; height: 50px"></div>
-      <h1 class="m-0 pt-1 pt-md-0"><div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div></h1>
+      <h1 class="m-0 pt-1 pt-md-0">
+        <div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div>
+      </h1>
     </div>
 
     <div class="box">
@@ -157,13 +225,13 @@
             <tbody>
               <tr>
                 <td class="label">Tags</td>
-                <td class="text-truncate">
+                <td>
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
               <tr>
                 <td class="label">Addresses</td>
-                <td class="text-truncate">
+                <td>
                   <div class="scrollable">
                     <div class="skeleton-loader"></div>
                   </div>
@@ -176,17 +244,17 @@
           </table>
         </div>
         <div class="col-lg-3">
-          <table class="table table-borderless table-striped" >
+          <table class="table table-borderless table-striped">
             <tbody>
               <tr>
                 <td class="label">Mined Blocks</td>
-                <td class="text-truncate">
+                <td>
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
               <tr>
                 <td class="label">Empty Blocks</td>
-                <td class="text-truncate">
+                <td>
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index 2a06de54a..cae0cc173 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -46,6 +46,9 @@ div.scrollable {
 
 .label {
   width: 35%;
+  @media (max-width: 767.98px) {
+    font-weight: bold;
+  }
 }
 
 .data {
@@ -132,12 +135,6 @@ div.scrollable {
   text-align: left;
 }
 
-.right-mobile {
-  @media (max-width: 450px) {
-    text-align: right;
-  }
-}
-
 .skeleton-loader {
   max-width: 200px;
 }
@@ -151,3 +148,11 @@ div.scrollable {
     top: 600px;
   }
 }
+
+.small-button {
+  height: 20px;
+  transform: translateY(-20px);
+  font-size: 10px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts
index dee4a9713..17b7fa029 100644
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@@ -19,6 +19,8 @@ export class PoolComponent implements OnInit {
   @Input() right: number | string = 45;
   @Input() left: number | string = 75;
 
+  gfg = true;
+  
   formatNumber = formatNumber;
   poolStats$: Observable<PoolStat>;
   blocks$: Observable<BlockExtended[]>;

From 5d9e8d0177d53ba2f77fc193630f4a9e614fa98d Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 29 Mar 2022 10:52:50 +0900
Subject: [PATCH 2/2] Fix pool page skeleton

---
 .../app/components/pool/pool.component.html   | 77 +++++++++++++++----
 .../app/components/pool/pool.component.scss   |  7 +-
 2 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index 3ee144f64..9750e503c 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -35,14 +35,14 @@
               <!-- Addresses desktop -->
               <tr *ngIf="!isMobile()">
                 <td class="label" i18n="mining.addresses">Addresses</td>
-                <td *ngIf="poolStats.pool.addresses.length else nodata">
+                <td *ngIf="poolStats.pool.addresses.length else nodata" style="padding-bottom: 0;">
                   <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address">
                     {{ poolStats.pool.addresses[0] }}
                   </a>
                   <button *ngIf="poolStats.pool.addresses.length >= 2" style="transform: translateY(-3px);"
                     type="button" class="btn btn-outline-info btn-sm float-right" (click)="collapse.toggle()"
                     [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
-                    <span i18n="show">Show</span> {{ poolStats.pool.addresses.length }}
+                    <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
                   </button>
                   <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
                     <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
@@ -60,7 +60,7 @@
                     <button *ngIf="poolStats.pool.addresses.length >= 2" type="button"
                       class="btn btn-outline-info btn-sm float-right small-button" (click)="collapse.toggle()"
                       [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
-                      <span i18n="show">Show</span> {{ poolStats.pool.addresses.length }}
+                      <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
                     </button>
                     <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
                       {{ poolStats.pool.addresses[0] | shortenString: 40 }}
@@ -223,41 +223,88 @@
         <div class="col-lg-9">
           <table class="table table-borderless table-striped">
             <tbody>
-              <tr>
-                <td class="label">Tags</td>
+
+              <!-- Regexes desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.tags">Tags</td>
                 <td>
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
-              <tr>
-                <td class="label">Addresses</td>
-                <td>
-                  <div class="scrollable">
+
+              <!-- Regexes mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.tags">Tags</span>
+                  <div class="overflow-auto">
                     <div class="skeleton-loader"></div>
                   </div>
                 </td>
+              </tr>
+
+              <!-- Addresses desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.addresses">Addresses</td>
+                <td>
+                  <div class="skeleton-loader"></div>
+                </td>
                 <ng-template #nodata>
                   <td>~</td>
                 </ng-template>
               </tr>
+
+              <!-- Addresses mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.addresses">Addresses</span>
+                  <div>
+                    <div class="skeleton-loader"></div>
+                  </div>
+                </td>
+              </tr>
+
             </tbody>
           </table>
         </div>
+
         <div class="col-lg-3">
           <table class="table table-borderless table-striped">
             <tbody>
-              <tr>
-                <td class="label">Mined Blocks</td>
-                <td>
+
+              <!-- Mined blocks desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
+                <td class="data">
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
-              <tr>
-                <td class="label">Empty Blocks</td>
-                <td>
+              <!-- Mined blocks desktop -->
+              <tr *ngIf="isMobile()">
+                <td colspan=2>
+                  <span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
+                  <div>
+                    <div class="skeleton-loader"></div>
+                  </div>
+                </td>
+              </tr>
+
+              <!-- Empty blocks desktop -->
+              <tr *ngIf="!isMobile()">
+                <td class="label" i18n="mining.empty-blocks">Empty Blocks</td>
+                <td class="data">
                   <div class="skeleton-loader"></div>
                 </td>
               </tr>
+              <!-- Empty blocks mobile -->
+              <tr *ngIf="isMobile()">
+                <td colspan="2">
+                  <span class="label" i18n="mining.empty-blocks">Blocks</span>
+                  <div>
+                    <div class="skeleton-loader"></div>
+                  </div>
+                </td>
+              </tr>
+
             </tbody>
           </table>
         </div>
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index cae0cc173..211469c1b 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -45,16 +45,17 @@ div.scrollable {
 }
 
 .label {
-  width: 35%;
+  width: 30%;
   @media (max-width: 767.98px) {
     font-weight: bold;
   }
 }
 
 .data {
-  text-align: left;
+  text-align: right;
   padding-left: 25%;
-  @media (max-width: 991px) {
+  @media (max-width: 992px) {
+    text-align: left;
     padding-left: 12px;
   }
   @media (max-width: 450px) {