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] 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;
+    }
+  }
+}