Merge pull request #890 from MiguelMedeiros/fix-buttons-graph-page

UI/UX: Fix buttons positions at graphs page.

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('/');

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)
@@ -36,44 +35,46 @@
                 <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
               </label>
             </div>
-
+            <div class="small-buttons">
-            <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
+              <div ngbDropdown #myDrop="ngbDropdown">
-              <button class="btn btn-primary btn-sm ml-2" id="dropdownFees" ngbDropdownAnchor (click)="myDrop.toggle()">
+                <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>
+                  <fa-icon [icon]="['fas', 'filter']" [fixedWidth]="true" i18n-title="statistics.component-filter.title" title="Filter"></fa-icon>
-              </button>
+                </button>
-              <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
+                <div class="dropdown-fees" ngbDropdownMenu aria-labelledby="dropdownFees">
-                <ul>
+                  <ul>
-                  <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
+                    <ng-template ngFor let-fee let-i="index" [ngForOf]="feeLevels">
-                    <ng-template [ngIf]="fee === 1">
+                      <ng-template [ngIf]="fee === 1">
-                      <li (click)="filterFees(fee)" [class]="filterFeeIndex > fee ? 'inactive' : ''">
+                        <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 class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
         </div>
         <div class="card-body">
           <div class="incoming-transactions-graph">

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) {
+  position: absolute;
-    margin-left: 0px;
+  top: 17px;
-    order: 1;
+  right: 25px;
+  @media (min-width: 720px) {
+    position: relative;
+    top: 0px;
+    right: 0px;
   }
 }
 
@@ -34,17 +36,18 @@
   }
 }
 
-.formRadioGroup{
+.formRadioGroup {
   margin-top: 6px;
   display: flex;
-  @media (min-width: 653px) {
+  flex-direction: column;
-    display: block;
+  @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;
     }
   }
@@ -106,3 +109,48 @@
     }
   }
 }
+
+.btn-group-toggle {
+  display: inline-flex;
+  @media (min-width: 720px) {
+    display: block;
+  }
+}
+
+.small-buttons {
+  width: 100%;
+  display: flex;
+  font-size: 12px;
+  margin: 5px 0px;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+
+  @media (min-width: 720px) {
+    margin: 2px 0px;
+    width: auto;
+    flex-direction: row;
+  }
+  @media (min-width: 768px) {
+    margin: 0px 0px;
+  }
+  .btn {
+    width: 49.25%;
+    @media (min-width: 720px) {
+      width: auto;
+    }
+  }
+  .dropdown {
+    width: 49.25%;
+    display: flex;
+    @media (min-width: 720px) {
+      width: auto;
+      margin: 0px 5px;
+    }
+  }
+  #dropdownFees {
+    width: 100%;
+    @media (min-width: 720px) {
+      width: auto;
+    }
+  }
+}