diff --git a/frontend/src/app/assets/assets.component.html b/frontend/src/app/assets/assets.component.html index 71df124ef..5d5118af0 100644 --- a/frontend/src/app/assets/assets.component.html +++ b/frontend/src/app/assets/assets.component.html @@ -1,11 +1,11 @@
-

Registered assets

-
- +
+

Registered assets

+
-
+
@@ -27,7 +27,7 @@ {{ asset.ticker }} {{ asset.entity && asset.entity.domain }} {{ asset.asset_id | shortenString : 13 }} - + @@ -52,7 +52,7 @@ - + @@ -68,4 +68,4 @@
-
\ No newline at end of file +
diff --git a/frontend/src/app/assets/assets.component.scss b/frontend/src/app/assets/assets.component.scss index 2cfc390fb..9c337d291 100644 --- a/frontend/src/app/assets/assets.component.scss +++ b/frontend/src/app/assets/assets.component.scss @@ -3,4 +3,11 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} \ No newline at end of file +} +.title-asset { + h1 { + line-height: 1; + margin: 0px; + padding-bottom: 10px; + } +} diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html index 15200b137..261b48a3e 100644 --- a/frontend/src/app/components/address/address.component.html +++ b/frontend/src/app/components/address/address.component.html @@ -51,12 +51,13 @@

- -

-   - {{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction - {{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions -

+
+

+   + {{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction + {{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions +

+
diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss index 2466d0328..bb1308a43 100644 --- a/frontend/src/app/components/address/address.component.scss +++ b/frontend/src/app/components/address/address.component.scss @@ -74,13 +74,20 @@ h1 { .tx-link { display: block; - width: 100%; - top: 12px; + height: 100%; + top: 9px; position: relative; - @media (min-width: 576px) { - top: 14px; - } + @media (min-width: 576px) { + top: 11px; + } @media (min-width: 768px) { - top: 20px; + top: 17px; + } +} + +.title-tx { + h2 { + line-height: 1; + margin-bottom: 10px; } } diff --git a/frontend/src/app/components/asset/asset.component.html b/frontend/src/app/components/asset/asset.component.html index b944ba9e2..0b6eed756 100644 --- a/frontend/src/app/components/asset/asset.component.html +++ b/frontend/src/app/components/asset/asset.component.html @@ -75,11 +75,13 @@
-

- {{ (transactions?.length | number) || '?' }} of {{ txCount | number }}  - Peg In/Out and Burn Transactions - Issuance and Burn Transactions -

+
+

+ {{ (transactions?.length | number) || '?' }} of {{ txCount | number }}  + Peg In/Out and Burn Transactions + Issuance and Burn Transactions +

+
diff --git a/frontend/src/app/components/asset/asset.component.scss b/frontend/src/app/components/asset/asset.component.scss index be0f8d1ff..270ad97e3 100644 --- a/frontend/src/app/components/asset/asset.component.scss +++ b/frontend/src/app/components/asset/asset.component.scss @@ -33,10 +33,20 @@ h1 { .tx-link { display: block; - width: 100%; - top: 14px; + height: 100%; + top: 9px; position: relative; + @media (min-width: 576px) { + top: 11px; + } @media (min-width: 768px) { - top: 20px; + top: 17px; } } +.title-tx { + h2 { + line-height: 1; + margin-bottom: 10px; + } +} + diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index 88f0d93e9..cc96660f4 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -162,7 +162,7 @@
-

+

{{ i }} transaction {{ i }} transactions diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 85f5c35b7..067d250e2 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -40,10 +40,7 @@ h1 { margin: 0px; padding: 0px; - @media (min-width: 576px) { - float: left; - margin-right: 10px; - } + line-height: 1; a { &:hover, &:focus{ text-decoration: none;; @@ -87,32 +84,23 @@ h1 { } .block-tx-title { - padding-top: 10px; - display: block; - text-align: right; - margin-top: -30px; + display: flex; + justify-content: space-between; + flex-direction: column; + margin-top: -15px; + position: relative; @media (min-width: 550px) { - margin-top: 0px; - padding-top: 10px; + margin-top: 1rem; + flex-direction: row; } h2 { - display: inline-block; - float: left; - line-height: 1.6; + line-height: 1; margin: 0; - margin-bottom: -15px; - padding-right: 10px; - padding-top: 15px; position: relative; - top: -22px; - width: auto; + padding-bottom: 10px; @media (min-width: 550px) { - padding-top: 0px; - top: 0px; - } - @media (min-width: 768px) { - padding-top: 5px; - line-height: 1; + padding-bottom: 0px; + align-self: end; } } } @@ -122,7 +110,7 @@ h1 { } .next-previous-blocks { - font-size: 30px; + font-size: 28px; display: inline-block; @media (min-width: 768px) { font-size: 36px; @@ -138,7 +126,7 @@ h1 { } .disable { - font-size: 30px; + font-size: 28px; color: #393e5c73; @media (min-width: 768px) { font-size: 36px; diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.html b/frontend/src/app/components/mempool-block/mempool-block.component.html index 2d72ff730..d59b3c477 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.html +++ b/frontend/src/app/components/mempool-block/mempool-block.component.html @@ -1,7 +1,7 @@
-

{{ ordinal$ | async }}

+

{{ ordinal$ | async }}

diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.scss b/frontend/src/app/components/mempool-block/mempool-block.component.scss index 530eeb88e..e74689a9a 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.scss +++ b/frontend/src/app/components/mempool-block/mempool-block.component.scss @@ -24,9 +24,9 @@ h1 { margin: 0px; padding: 0px; + line-height: 1; @media (min-width: 576px) { float: left; - margin-right: 10px; } } diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index f2428cdb8..31d26f381 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -192,15 +192,19 @@
-

Inputs & Outputs

+
+

Inputs & Outputs

+
- +
-

Details

+
+

Details

+
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss index 77e582767..d6a736191 100644 --- a/frontend/src/app/components/transaction/transaction.component.scss +++ b/frontend/src/app/components/transaction/transaction.component.scss @@ -21,28 +21,29 @@ } .title-block { - height: 100px; flex-direction: column; - h1 { - margin-bottom: 0rem; - } - @media (min-width: 650px) { - height: 80px; + @media (min-width: 650px) { flex-direction: row; - h1 { - margin-bottom: 1rem; - } - } + } + h1 { + margin: 0rem; + line-height: 1; + } } .tx-link { display: flex; + margin-bottom: 0px; + margin-top: 8px; @media (min-width: 650px) { - margin-left: 15px; align-self: end; - margin-bottom: 9px; + margin-left: 15px; + margin-top: 0px; + margin-bottom: -3px; } @media (min-width: 768px) { - margin-bottom: 2px; + margin-bottom: 0px; + top: 1px; + position: relative; } } @@ -71,10 +72,6 @@ color: #dc3545; } -.btn { - margin-top: 5px; -} - .container-xl { margin-bottom: 40px; } @@ -123,9 +120,26 @@ } } -.effective-fee-container{ +.effective-fee-container { display: block; @media (min-width: 768px){ display: inline-block; } } + + +.title { + h2 { + line-height: 1; + margin: 0; + padding-bottom: 10px; + } +} + +.btn-outline-info { + margin-top: -10px; + @media (min-width: 768px){ + display: inline-block; + margin-top: 0px; + } +} diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss index 42da648d6..5a96d2d3c 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.scss +++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss @@ -4,22 +4,22 @@ } .green, .grey, .red { font-size: 16px; - top: -2px; + top: -2px; position: relative; @media( min-width: 576px){ font-size: 19px; } } .green { - color:#28a745; + color:#28a745; } .red { - color:#dc3545; + color:#dc3545; } .grey { - color:#6c757d; + color:#6c757d; } .mobile-bottomcol { @@ -43,7 +43,7 @@ } } -.extra-info { +.extra-info { display: none; @media (min-width: 576px) { display: inline-table; @@ -75,11 +75,11 @@ } } .fiat { - margin-left: 10px; + margin-left: 10px; } .tx-page-container { - padding: 10px; + padding: 10px; margin-bottom: 10px; margin-top: 10px; } @@ -112,6 +112,10 @@ width: 100%; color: #d43131; text-align: right; - margin-top: 0px; - margin-bottom: 10px; -} \ No newline at end of file + margin-top: 0px; + margin-bottom: 10px; +} + +h2 { + line-height: 1; +} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 08c655471..9c09212a9 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -197,18 +197,21 @@ body { display: flex; flex-direction: row; justify-content: space-between; - height: 80px; } .title-address, .title-asset { color: #FFF; - padding-top: 20px; padding-bottom: 10px; display: flex; - flex-direction: row; - justify-content: space-between; - height: 80px; - margin-top: -20px; + flex-direction: column; + margin-bottom: 7px; + @media (min-width: 576px) { + flex-direction: row; + margin-bottom: 0px; + } + h1 { + line-height: 1; + } } .smaller-text { @@ -300,7 +303,7 @@ html:lang(ru) .card-title { left: -1px; position: relative; } - &:nth-child(4){ + &:nth-child(4) { display: none; } } @@ -391,10 +394,10 @@ html:lang(ru) .card-title { left: -1px; position: relative; } - &:nth-child(4){ + &:nth-child(4) { display: none; } - &:nth-child(5){ + &:nth-child(5) { display: none; } } @@ -469,10 +472,10 @@ html:lang(ru) .card-title { thead { th { - &:nth-child(4){ + &:nth-child(4) { display: table-cell; } - &:nth-child(5){ + &:nth-child(5) { display: table-cell; } } @@ -664,7 +667,7 @@ h1, h2, h3 { } } -.flex{ +.flex { display: flex; } @@ -685,125 +688,124 @@ th { .reserved { color: #ff8c00 } .rtl-layout { - .fa-arrow-alt-circle-right { - @extend .fa-arrow-alt-circle-right; - -webkit-transform: scaleX(-1); - transform: scaleX(-1); - } + .fa-arrow-alt-circle-right { + @extend .fa-arrow-alt-circle-right; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } - .table td { - text-align: right; - .fiat { - @extend .fiat; - margin-left: 0px !important; - margin-right: 15px; - } + .table td { + text-align: right; + .fiat { + @extend .fiat; + margin-left: 0px !important; + margin-right: 15px; } + } - .table th { - text-align: right; + .table th { + text-align: right; + } + + .title-block { + text-align: right; + } + + .mr-3 { + @extend .ml-3; + margin-right: 0 !important; + } + + .mr-1 { + @extend .ml-1; + } + + .float-left { + float: right !important; + } + + .float-right { + float: left !important; + } + + .text-left { + text-align: right !important; + } + + .text-right { + text-align: left !important; + } + + .bitcoin-block { + direction: rtl; + } + + .next-previous-blocks { + @extend .next-previous-blocks; + direction: ltr; + } + + .tx-link { + @extend .tx-link; + margin-left: 0px; + margin-right: 10px; + } + + .pagination-container { + @extend .pagination-container; + ul { + @extend ul; + padding-left: 0px; + padding-right: 5px; } + } - .title-block { - text-align: right; + .search-box-container { + @extend .search-box-container; + margin-right: 0 !important; + margin-left: 0.5rem !important; + } + + .code { + @extend .code; + text-align: left !important; + direction: ltr; + .subtitle { + @extend .subtitle; + direction: rtl; + text-align: right !important; } + } - .mr-3 { - @extend .ml-3; - margin-right: 0 !important; - } - - .mr-1 { - @extend .ml-1; - } - - .float-left { - float: right !important; - } - - .float-right { - float: left !important; - } - - .text-left { - text-align: right !important; - } - - .text-right { - text-align: left !important; - } - - .bitcoin-block { - direction: rtl; - } - - .next-previous-blocks { - @extend .next-previous-blocks; + .container-graph { + @extend .container-graph; + .formRadioGroup { + @extend .formRadioGroup; direction: ltr; } + } - .tx-link { - @extend .tx-link; - margin-left: 0px; + .mempool-graph { + @extend .mempool-graph; + direction: ltr; + } + .title-block { + .title { + float: right; + } + } + .container-buttons { + float: left !important; + width: auto !important; + } + .tx-link { + margin-right: 0px; + @media (min-width: 768px) { margin-right: 10px; } - - .pagination-container { - @extend .pagination-container; - ul { - @extend ul; - padding-left: 0px; - padding-right: 5px; - } - } - - .search-box-container { - @extend .search-box-container; - margin-right: 0 !important; - margin-left: 0.5rem !important; - } - - .code { - @extend .code; - text-align: left !important; - direction: ltr; - .subtitle { - @extend .subtitle; - direction: rtl; - text-align: right !important; - } - } - - .container-graph { - @extend .container-graph; - .formRadioGroup { - @extend .formRadioGroup; - direction: ltr; - } - } - - .mempool-graph { - @extend .mempool-graph; - direction: ltr; - } - .title-block { - .title { - float: right; - } - } - .container-buttons { - float: left !important; - width: auto !important; - } - .tx-link { - margin-right: 0px; - @media (min-width: 768px) { - margin-right: 10px; - } - } + } } - .scriptmessage { overflow: hidden; display: inline-block; @@ -880,7 +882,7 @@ th { padding: 0; } - .collapsed{ + .collapsed { background-color: #2d3348; color: #1bd8f4; }