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

New concept for dashboard layout components. (#469)

Browse Source 
* New concept for dashboard layout components.

* Align dashboard componentes.

* Add divider to fee box component.

* Remove TV icon from mobile and tablet queries.

* Fix form input overflow.

* Add responsive css to statistic component.

* Add responsive css to about page.

* Add global padding bottom.

* Fix graph page styles.

* Add responsive chart and scrollable table.

* Fix mobile css query for navbar menus.

* Fix pagination responsive css.

* Add CSS animated logo.

* Revert "Add CSS animated logo."

This reverts commit 92af38294c0d4fe815a801b37635cde7f8ee1ced.

* Add extra skeleton to fee-box-component.

* Fix latest-blocks and latest-transactions table css.

* Adapt Bisq pages to responsive layout.

* Remove parenthesis from fiat amout.
Fiat prive break not break on desktop.
Transaction ID align left.
Fee box skeleton width resize.

* Fix mobile table text-size.

* Fix dashboard mempool info mobile alignment.
This commit is contained in:
Miguel Medeiros
2021-05-03 10:11:30 -03:00
committed by GitHub
parent 39bb93970b
commit 2f8f3ca2e9
50 changed files with 1485 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@@ -198,7 +198,7 @@
<div>
<div class="float-left mt-2-5" *ngIf="!transactionPage && tx.fee">
{{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span i18n="shared.sat|sat">sat</span> (<app-fiat [value]="tx.fee"></app-fiat>)</span>
{{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="d-none d-sm-inline-block">&nbsp;&ndash; {{ tx.fee | number }} <span class="symbol" i18n="shared.sat|sat">sat</span> <span class="fiat"><app-fiat [value]="tx.fee"></app-fiat></span></span>
</div>
<div class="float-right">

101
frontend/src/app/components/transactions-list/transactions-list.component.scss
View File

@@ -19,9 +19,9 @@
left: 0;
right: calc(-1*30px/3);
width: 0;
height: 0;
height: 0;
border-top: 6.66px solid transparent;
border-bottom: 6.66px solid transparent
border-bottom: 6.66px solid transparent
}
.arrow:after {
@@ -38,52 +38,49 @@
}
.arrow.green:before {
border-left: 10px solid #28a745;
border-left: 10px solid #28a745;
}
.arrow.green:after {
background-color:#28a745;
background-color:#28a745;
}
.arrow.red:before {
border-left: 10px solid #dc3545;
border-left: 10px solid #dc3545;
}
.arrow.red:after {
background-color:#dc3545;
background-color:#dc3545;
}
.arrow.grey:before {
border-left: 10px solid #6c757d;
border-left: 10px solid #6c757d;
}
.arrow.grey:after {
background-color:#6c757d;
background-color:#6c757d;
}
.scriptmessage {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
width: 100%;
max-width: 50px;
@media (min-width: 768px) {
max-width: 200px;
}
}
.scriptmessage.longer {
max-width: 500px;
@media (min-width: 375px) {
max-width: 200px !important;
}
}
@media (max-width: 767.98px) {
.mobile-bottomcol {
margin-top: 15px;
}
.scriptmessage {
max-width: 90px !important;
}
.scriptmessage.longer {
max-width: 280px !important;
}
.details-table td:first-child {
white-space: pre-wrap;
.mobile-bottomcol {
margin-top: 15px;
@media (min-width: 992px) {
margin-top: 0px;
}
}
@@ -93,6 +90,9 @@
.details-table td {
padding: 0.75rem;
&:first-child {
white-space: pre-wrap;
}
}
.details-table td:nth-child(2) {
@@ -101,3 +101,58 @@
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
.smaller-text {
font-size: 12px;
@media (min-width: 576px) {
font-size: 14px !important;
}
}
.longer {
max-width: 100% !important;
width: 200px;
display: inline-block;
}
.row{
flex-direction: column;
@media (min-width: 992px) {
flex-direction: row;
}
}
.extra-info {
display: none;
@media (min-width: 576px) {
display: inline-table;
}
.fiat {
font-size: 14px;
margin-left: 10px;
text-align: right;
}
.sats {
color: #ffffff66;
font-size: 11px;
}
}
.transaction-fee {
display: block;
margin: 0px auto 5px;
@media (min-width: 576px) {
display: inline-table;
}
}
.btn-container {
text-align: right;
@media (min-width: 576px) {
display: inline-table;
float: right;
}
}
.fiat {
margin-left: 10px;
}