machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: check buttons at graphs page

Browse Source
This commit is contained in:
Miguel Medeiros 2021-10-27 01:21:39 -03:00
parent 377eb0cae5
commit 1925023eb2
No known key found for this signature in database
GPG Key ID: 819EDEE4673F3EBB
3 changed files with 106 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/cypress/integration/mainnet/mainnet.spec.ts
View File

@ -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', () => { it('loads the tv screen - desktop', () => {
cy.viewport('macbook-16'); cy.viewport('macbook-16');
cy.visit('/'); cy.visit('/');

53
frontend/src/app/components/statistics/statistics.component.html
View File

@ -36,43 +36,44 @@
<input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y <input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
</label> </label>
</div> </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"> <ng-template [ngIf]="inverted">
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span> <span class="square" [ngStyle]="{'backgroundColor': chartColors[i]}"></span>
<span class="fee-text" >{{feeLevels[i - 1]}} - {{ fee }}</span>
</ng-template> </ng-template>
<ng-template [ngIf]="!inverted"> <ng-template [ngIf]="!inverted">
<span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span> <span class="square" [ngStyle]="{'backgroundColor': chartColors[i - 1]}"></span>
<span class="fee-text" >{{feeLevels[i + 1]}} - {{ fee }}</span>
</ng-template> </ng-template>
<span class="fee-text" >0 - {{ fee }}</span>
</li> </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>
<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>
</ng-template> </ul>
</ul> </div>
</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> </form>
</div> </div>
<div class="card-body"> <div class="card-body">

55
frontend/src/app/components/statistics/statistics.component.scss
View File

@ -34,11 +34,12 @@
} }
} }
.formRadioGroup{ .formRadioGroup {
margin-top: 6px; margin-top: 6px;
display: flex; display: flex;
@media (min-width: 653px) { flex-direction: column;
display: block; @media (min-width: 650px) {
flex-direction: row;
float: right; float: right;
margin-top: 0px; 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;
}
}
}