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

General responsive improvments.

Browse Source
This commit is contained in:
softsimon
2020-03-05 16:13:46 +07:00
parent 9851ae7169
commit b60d9cdfbc
16 changed files with 83 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@@ -60,44 +60,29 @@
z-index: 100;
}
@media (max-width: 767.98px) {
.block-height {
bottom: 125px;
left: inherit;
text-shadow: inherit;
z-index: inherit;
}
.blocks-container {
top: -40px;
}
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
position:absolute;
top: -24px;
left: -20px;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
}
@media (min-width: 768px) {
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
position:absolute;
top: -24px;
left: -20px;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
}
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
position: absolute;
top: -12px;
left: -20px;
background-color: #191c27;
transform: skewY(50deg);
transform-origin: top;
}
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
position: absolute;
top: -12px;
left: -20px;
background-color: #191c27;
transform: skewY(50deg);
transform-origin: top;
}
.black-background {

18
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -62,19 +62,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
getStyleForBlock(block: Block) {
const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100;
if (window.innerWidth <= 768) {
return {
top: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
} else {
return {
left: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
}
return {
left: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
}
}