Fix tv only (#598)

* Remove TV Only container.
This commit is contained in:
Miguel Medeiros 2021-06-29 14:10:15 -03:00 committed by GitHub
parent df588695ec
commit 807d4b0327
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 27 deletions

View File

@ -35,8 +35,9 @@ describe('Mainnet', () => {
cy.viewport('macbook-16'); cy.viewport('macbook-16');
cy.visit('/'); cy.visit('/');
cy.get('li:nth-of-type(4) > a').click().then(() => { cy.get('li:nth-of-type(4) > a').click().then(() => {
cy.viewport('macbook-16');
cy.wait(1000); cy.wait(1000);
cy.get('.tv-only').should('not.be.visible'); cy.get('.blockchain-wrapper').should('be.visible');
}); });
}); });
@ -45,7 +46,7 @@ describe('Mainnet', () => {
cy.get('li:nth-of-type(4) > a').click().then(() => { cy.get('li:nth-of-type(4) > a').click().then(() => {
cy.viewport('iphone-6'); cy.viewport('iphone-6');
cy.wait(1000); cy.wait(1000);
cy.get('.tv-only').should('be.visible'); cy.get('.blockchain-wrapper').should('not.be.visible');
}); });
}); });
}); });

View File

@ -4,8 +4,6 @@
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
<div class="tv-only" i18n="television.tv-only">TV only</div>
<div class="tv-container" *ngIf="!loading"> <div class="tv-container" *ngIf="!loading">
<div class="chart-holder" *ngIf="mempoolStats.length"> <div class="chart-holder" *ngIf="mempoolStats.length">

View File

@ -31,6 +31,15 @@
.blockchain-wrapper { .blockchain-wrapper {
display: flex;
height: 100%;
min-height: 240px;
position: relative;
top: -20px;
@media(min-height: 800px) {
top: 10px;
}
.position-container { .position-container {
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -76,29 +85,13 @@
} }
} }
.tv-only {
display: block;
height: 100vh;
width: 100%;
position: relative;
display: flex;
text-align: center;
flex-direction: row;
align-items: center;
justify-content: center;
@media(min-width: 768px) {
display: none;
}
@media(max-height: 720px) {
display: flex;
}
}
.tv-container { .tv-container {
display: none; display: flex;
@media(min-width: 768px) { margin-top: 0px;
display: flex; flex-direction: column;
} @media(max-height: 700px) {
@media(max-height: 720px) { .blockchain-wrapper{
display: none; display: none !important;
}
} }
} }