From 1925023eb2f6232af441b01ffdbd5d432aecc9ca Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Wed, 27 Oct 2021 01:21:39 -0300
Subject: [PATCH 1/2] fix: check buttons at graphs page

---
 .../integration/mainnet/mainnet.spec.ts       | 27 +++++++++
 .../statistics/statistics.component.html      | 53 +++++++++---------
 .../statistics/statistics.component.scss      | 55 ++++++++++++++++++-
 3 files changed, 106 insertions(+), 29 deletions(-)

diff --git a/frontend/cypress/integration/mainnet/mainnet.spec.ts b/frontend/cypress/integration/mainnet/mainnet.spec.ts
index f700c00d9..e0691266f 100644
--- a/frontend/cypress/integration/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts
@@ -271,6 +271,33 @@ describe('Mainnet', () => {
             });
         });
 
+        describe('graphs page', () => {
+          it('check buttons - mobile', () => {
+              cy.viewport('iphone-6');
+              cy.visit('/graphs');
+              cy.waitForSkeletonGone();
+              cy.get('.small-buttons > :nth-child(2)').should('be.visible');
+              cy.get('#dropdownFees').should('be.visible');
+              cy.get('.btn-group').should('be.visible');
+          });
+          it('check buttons - tablet', () => {
+            cy.viewport('ipad-2');
+            cy.visit('/graphs');
+            cy.waitForSkeletonGone();
+            cy.get('.small-buttons > :nth-child(2)').should('be.visible');
+            cy.get('#dropdownFees').should('be.visible');
+            cy.get('.btn-group').should('be.visible');
+          });
+          it('check buttons - desktop', () => {
+            cy.viewport('macbook-16');
+            cy.visit('/graphs');
+            cy.waitForSkeletonGone();
+            cy.get('.small-buttons > :nth-child(2)').should('be.visible');
+            cy.get('#dropdownFees').should('be.visible');
+            cy.get('.btn-group').should('be.visible');
+          });
+        });
+
         it('loads the tv screen - desktop', () => {
             cy.viewport('macbook-16');
             cy.visit('/');
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index ef43900b5..183f73935 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -36,43 +36,44 @@
                 <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
               </label>
             </div>
-
-            <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
-              <button class="btn btn-primary btn-sm ml-2" id="dropdownFees" ngbDropdownAnchor (click)="myDrop.toggle()">
-                <fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title" title="Filter"></fa-icon>
-              </button>
-              <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
-                <ul>
-                  <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
-                    <ng-template [ngIf]="fee === 1">
-                      <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
+            <div class="small-buttons">
+              <div ngbDropdown #myDrop="ngbDropdown">
+                <button class="btn btn-primary btn-sm" id="dropdownFees" ngbDropdownAnchor (click)="myDrop.toggle()">
+                  <fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title" title="Filter"></fa-icon>
+                </button>
+                <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
+                  <ul>
+                    <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
+                      <ng-template [ngIf]="fee === 1">
+                        <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
+                          <ng-template [ngIf]="inverted">
+                            <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
+                          </ng-template>
+                          <ng-template [ngIf]="!inverted">
+                            <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
+                          </ng-template>
+                          <span class="fee-text" >0 - {{ fee }}</span>
+                        </li>
+                      </ng-template>
+                      <ng-template [ngIf]="fee <= 500 && fee !== 1">
+                        <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
                         <ng-template [ngIf]="inverted">
                           <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
+                          <span class="fee-text" >{{feeLevels[i - 1]}} - {{ fee }}</span>
                         </ng-template>
                         <ng-template [ngIf]="!inverted">
                           <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
+                          <span class="fee-text" >{{feeLevels[i + 1]}} - {{ fee }}</span>
                         </ng-template>
-                        <span class="fee-text" >0 - {{ fee }}</span>
                       </li>
-                    </ng-template>
-                    <ng-template [ngIf]="fee <= 500 && fee !== 1">
-                      <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
-                      <ng-template [ngIf]="inverted">
-                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
-                        <span class="fee-text" >{{feeLevels[i - 1]}} - {{ fee }}</span>
                       </ng-template>
-                      <ng-template [ngIf]="!inverted">
-                        <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
-                        <span class="fee-text" >{{feeLevels[i + 1]}} - {{ fee }}</span>
-                      </ng-template>
-                    </li>
                     </ng-template>
-                  </ng-template>
-                </ul>
+                  </ul>
+                </div>
               </div>
-            </div>
 
-            <button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
+              <button (click)="invertGraph()" class="btn btn-primary btn-sm"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
+            </div>
           </form>
         </div>
         <div class="card-body">
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index ca367bf17..b9d8f48ac 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -34,11 +34,12 @@
   }
 }
 
-.formRadioGroup{
+.formRadioGroup {
   margin-top: 6px;
   display: flex;
-  @media (min-width: 653px) {
-    display: block;
+  flex-direction: column;
+  @media (min-width: 650px) {
+    flex-direction: row;
     float: right;
     margin-top: 0px;
   }
@@ -106,3 +107,51 @@
     }
   }
 }
+
+.btn-group-toggle {
+  display: inline-flex;
+  @media (min-width: 650px) {
+    display: block;
+  }
+  label {
+    padding: 5px;
+  }
+}
+
+.small-buttons {
+  width: 100%;
+  display: flex;
+  font-size: 12px;
+  margin: 5px 0px;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+
+  @media (min-width: 650px) {
+    margin: 2px 0px;
+    width: auto;
+    flex-direction: row;
+  }
+  @media (min-width: 768px) {
+    margin: 0px 0px;
+  }
+  .btn {
+    width: 49.25%;
+    @media (min-width: 650px) {
+      width: auto;
+    }
+  }
+  .dropdown {
+    width: 49.25%;
+    display: flex;
+    @media (min-width: 650px) {
+      width: auto;
+      margin: 0px 5px;
+    }
+  }
+  #dropdownFees {
+    width: 100%;
+    @media (min-width: 650px) {
+      width: auto;
+    }
+  }
+}

From d1e72c0cc0ee10f7cd14ff82d892be12c2e38756 Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Fri, 29 Oct 2021 10:46:16 -0300
Subject: [PATCH 2/2] Fix loading icon position.

---
 .../statistics/statistics.component.html      |  2 +-
 .../statistics/statistics.component.scss      | 29 +++++++++----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index 183f73935..e6925a512 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -12,7 +12,6 @@
         <div class="card-header">
           <i class="fa fa-area-chart"></i> <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
           <form [formGroup]="radioGroupForm" class="formRadioGroup" (click)="saveGraphPreference()">
-            <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
             <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
               <label ngbButtonLabel class="btn-primary btn-sm">
                 <input ngbButton type="radio" [value]="'2h'" [routerLink]="['/graphs' | relativeUrl]" fragment="2h"> 2H (LIVE)
@@ -75,6 +74,7 @@
               <button (click)="invertGraph()" class="btn btn-primary btn-sm"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" i18n-title="statistics.component-invert.title" title="Invert"></fa-icon></button>
             </div>
           </form>
+          <div class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
         </div>
         <div class="card-body">
           <div class="incoming-transactions-graph">
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index b9d8f48ac..e9dadd274 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -18,12 +18,14 @@
 .bootstrap-spinner {
   width: 22px;
   height: 22px;
-  margin-right: 10px;
-  order: 2;
   margin-left: 10px;
-  @media (min-width: 653px) {
-    margin-left: 0px;
-    order: 1;
+  position: absolute;
+  top: 17px;
+  right: 25px;
+  @media (min-width: 720px) {
+    position: relative;
+    top: 0px;
+    right: 0px;
   }
 }
 
@@ -38,14 +40,14 @@
   margin-top: 6px;
   display: flex;
   flex-direction: column;
-  @media (min-width: 650px) {
+  @media (min-width: 720px) {
     flex-direction: row;
     float: right;
     margin-top: 0px;
   }
   .btn-sm {
     font-size: 10px;
-    @media (min-width: 768px) {
+    @media (min-width: 790px) {
       font-size: 14px;
     }
   }
@@ -110,12 +112,9 @@
 
 .btn-group-toggle {
   display: inline-flex;
-  @media (min-width: 650px) {
+  @media (min-width: 720px) {
     display: block;
   }
-  label {
-    padding: 5px;
-  }
 }
 
 .small-buttons {
@@ -126,7 +125,7 @@
   justify-content: space-between;
   flex-direction: row-reverse;
 
-  @media (min-width: 650px) {
+  @media (min-width: 720px) {
     margin: 2px 0px;
     width: auto;
     flex-direction: row;
@@ -136,21 +135,21 @@
   }
   .btn {
     width: 49.25%;
-    @media (min-width: 650px) {
+    @media (min-width: 720px) {
       width: auto;
     }
   }
   .dropdown {
     width: 49.25%;
     display: flex;
-    @media (min-width: 650px) {
+    @media (min-width: 720px) {
       width: auto;
       margin: 0px 5px;
     }
   }
   #dropdownFees {
     width: 100%;
-    @media (min-width: 650px) {
+    @media (min-width: 720px) {
       width: auto;
     }
   }