mirror of
https://github.com/mempool/mempool.git
synced 2024-12-29 09:44:26 +01:00
Merge pull request #890 from MiguelMedeiros/fix-buttons-graph-page
UI/UX: Fix buttons positions at graphs page.
This commit is contained in:
softsimon
GitHub
commit
cd63c6c0c1
@ -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('/');
|
||||
|
||||
@ -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="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 class="spinner-border text-light bootstrap-spinner" *ngIf="spinnerLoading"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="incoming-transactions-graph">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,17 +36,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.formRadioGroup{
|
||||
.formRadioGroup {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
@media (min-width: 653px) {
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user