From 46d5daea155ec515de1e1b7db21fb677e6145112 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Thu, 19 Dec 2024 18:56:49 +0100 Subject: [PATCH 1/7] fix(style): allow scroll when y-overflow --- src/App.js | 74 +++++++++++++++++++++------------------------- src/stylesheet.css | 18 +---------- 2 files changed, 35 insertions(+), 57 deletions(-) diff --git a/src/App.js b/src/App.js index 83f9956..70b9abc 100644 --- a/src/App.js +++ b/src/App.js @@ -15,46 +15,40 @@ import Info from './Pages/Info'; class WitnetExplorer extends React.Component{ render(){ return( -
-
-
- - - - - Witnet Explorer - - - - - - -
- - - - - - - - - - - - - -
-
-
+ + + + + Witnet Explorer + + + + + + +
+ + + + + + + + + + + + + ) } } diff --git a/src/stylesheet.css b/src/stylesheet.css index 4960183..2008e27 100644 --- a/src/stylesheet.css +++ b/src/stylesheet.css @@ -6,9 +6,8 @@ } html, body { - overflow-y: hidden; - overflow-x: hidden; font-family: "courier-prime-v1-latin-regular"; + overscroll-behavior: none; } body { @@ -166,21 +165,6 @@ body { background: #ffffff; } -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-thumb { - background: rgba(0,0,0,0.2); - border-radius: 10px; -} - -::-webkit-scrollbar-thumb:hover { - background: rgba(0,0,0,0.3); - border-radius: 10px; -} - .flex-container { box-sizing: border-box; display: flex; From 69c1cf0b3fbaa8d347ab824ad96e69f0371b89f7 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Thu, 19 Dec 2024 18:57:38 +0100 Subject: [PATCH 2/7] fix(style): avoid Home warnings --- src/Pages/Home.js | 50 +++++++++++++++++++---------------------------- 1 file changed, 20 insertions(+), 30 deletions(-) diff --git a/src/Pages/Home.js b/src/Pages/Home.js index e45e094..a7a950c 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -87,11 +87,11 @@ export default class Home extends Component{ var value = table_row[2]; return ( - - + + {label} - + {Formatter.formatValue(value)} @@ -122,11 +122,11 @@ export default class Home extends Component{ var value = table_row[2]; return ( - - + + {label} - + {Formatter.formatValueSuffix(value, 2)} @@ -147,20 +147,20 @@ export default class Home extends Component{ var block_link = "/search/" + block.hash; return ( - - + + {block.hash} - + {block.data_request} - + {block.value_transfer} - + {TimeConverter.convertUnixTimestamp(block.timestamp, "hour")} @@ -181,15 +181,15 @@ export default class Home extends Component{ var hash_link = "/search/" + transaction.hash; return ( - - + + {transaction.hash} - + {TimeConverter.convertUnixTimestamp(transaction.timestamp, "hour")} - + { transaction.confirmed ? @@ -220,17 +220,13 @@ export default class Home extends Component{ Network stats - - {this.network_stats_card} - + {this.network_stats_card}
Supply info
- - {this.supply_stats_card} - + {this.supply_stats_card} @@ -247,9 +243,7 @@ export default class Home extends Component{ Blocks - - {this.latest_blocks_card} - + {this.latest_blocks_card} @@ -266,9 +260,7 @@ export default class Home extends Component{ Data requests - - {this.latest_data_requests_card} - + {this.latest_data_requests_card} @@ -285,9 +277,7 @@ export default class Home extends Component{ Value transfers - - {this.latest_value_transfers_card} - + {this.latest_value_transfers_card} From 582c33d6851a3731f6e9c3d15f429fe0ca346695 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Wed, 15 Jan 2025 18:03:22 +0100 Subject: [PATCH 3/7] fix(style): adjust table and card style --- src/Pages/Home.js | 36 ++++++++++++++++++++---------------- src/stylesheet.css | 24 ++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 16 deletions(-) diff --git a/src/Pages/Home.js b/src/Pages/Home.js index a7a950c..2cd5e81 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -88,10 +88,11 @@ export default class Home extends Component{ return ( - - {label} + + - + {label} + {Formatter.formatValue(value)} @@ -113,7 +114,7 @@ export default class Home extends Component{ ]; return ( - +
{ table_rows.map(function(table_row) { @@ -122,11 +123,14 @@ export default class Home extends Component{ var value = table_row[2]; return ( - - + + - @@ -213,22 +217,22 @@ export default class Home extends Component{ - - - + + +
Network stats
{this.network_stats_card} - +
Supply info
{this.supply_stats_card} - + Last updated: {update_timestamp} @@ -245,7 +249,7 @@ export default class Home extends Component{ {this.latest_blocks_card} - + Last updated: {update_timestamp} @@ -262,7 +266,7 @@ export default class Home extends Component{ {this.latest_data_requests_card} - + Last updated: {update_timestamp} @@ -279,7 +283,7 @@ export default class Home extends Component{ {this.latest_value_transfers_card} - + Last updated: {update_timestamp} diff --git a/src/stylesheet.css b/src/stylesheet.css index 2008e27..0017207 100644 --- a/src/stylesheet.css +++ b/src/stylesheet.css @@ -176,3 +176,27 @@ body { width: 100%; image-rendering: pixelated; } + +.card-section-spacer { + margin-top: 1rem; +} + +.card-bottom-info { + margin-top: 1rem; +} + +/* Table custom style */ + +.custom-td { + border: none; + white-space: nowrap; +} +.custom-td:last-child { + text-align: right; +} +.table>:not(caption)>*>* { + padding: 0.15rem 0.25rem; +} +.td-icon { + margin-right: 0.5rem; +} From 8f2b239b1301143cc8bcc3cc4107878cfac01e73 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Thu, 16 Jan 2025 11:18:14 +0100 Subject: [PATCH 4/7] fix(style): adjust table and card style in `BlockPanel` --- src/Pages/SearchPages/BlockPanel.js | 63 ++++++++++++++++------------- 1 file changed, 34 insertions(+), 29 deletions(-) diff --git a/src/Pages/SearchPages/BlockPanel.js b/src/Pages/SearchPages/BlockPanel.js index 242a940..16cb988 100644 --- a/src/Pages/SearchPages/BlockPanel.js +++ b/src/Pages/SearchPages/BlockPanel.js @@ -11,66 +11,73 @@ export default class BlockPanel extends Component { var block_link = "/search/" + data.hash; var miner_link = "/search/" + miner; return ( - -
- {label} +
+ + + {label} + {Formatter.formatValueSuffix(value, 2)}
+
- - + - - + - - + - + - - - + - - + - - + - + - + */}
- {"Block"} + + + {"Block"} {data.hash} - {"Data request weight"} + + + {"Data request weight"} {data.data_request_weight}
- {"Time"} + + + {"Time"} {TimeConverter.convertUnixTimestamp(data.timestamp, "full") + " (epoch: " + data.epoch + ")"} - {"Value transfer weight"} + + + + {"Value transfer weight"} + {data.value_transfer_weight}
- {"Miner"} + + + {"Miner"} {miner} - {"Block weight"} + + + {"Block weight"} {data.weight}
- {"Status"} + {/*
+ + {"Status"} { data.confirmed ? "Confirmed" : "Mined" }
- ); } @@ -493,9 +500,7 @@ export default class BlockPanel extends Component { - - {this.generateDetailsCard(data.details, data.transactions.mint.miner)} - + {this.generateDetailsCard(data.details, data.transactions.mint.miner)} From 504fe6d158956cb781a8ac0cd5f969f0adbc1ba9 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Thu, 16 Jan 2025 12:56:29 +0100 Subject: [PATCH 5/7] fix(style): adjust table and card style in `DataRequest` --- .../DataRequestPages/DataRequest.js | 144 +++++++++--------- src/stylesheet.css | 2 + 2 files changed, 78 insertions(+), 68 deletions(-) diff --git a/src/Pages/SearchPages/DataRequestPages/DataRequest.js b/src/Pages/SearchPages/DataRequestPages/DataRequest.js index b0fbf01..565d40a 100644 --- a/src/Pages/SearchPages/DataRequestPages/DataRequest.js +++ b/src/Pages/SearchPages/DataRequestPages/DataRequest.js @@ -15,37 +15,41 @@ export default class DataRequest extends Component { var RAD_hash_link = "/search/" + transaction.RAD_bytes_hash; var block_link = "/search/" + transaction.block; return ( - +
- - + - + - - + - + - - + - + - - + - + @@ -54,11 +58,12 @@ export default class DataRequest extends Component { var address_link = "/search/" + address; if (idx === 0) { return ( - - + - + @@ -66,9 +71,8 @@ export default class DataRequest extends Component { } else { return ( - - - + @@ -76,19 +80,21 @@ export default class DataRequest extends Component { } }) } - - + - + - - + - + -
- {"Transaction"} +
+ + {"Transaction"} {transaction.hash}
- {"DRO hash"} +
+ + {"DRO hash"} {transaction.DRO_bytes_hash}
- {"RAD hash"} +
+ + {"RAD hash"} {transaction.RAD_bytes_hash}
- {"Block"} +
+ + {"Block"} {transaction.block}
- {"Addresses"} +
+ + {"Addresses"} {address}
+
{address}
- {"Timestamp"} +
+ + {"Timestamp"} {TimeConverter.convertUnixTimestamp(transaction.timestamp, "full") + " (epoch: " + transaction.epoch + ")"}
- {"Status"} +
+ + {"Status"} { transaction.confirmed ? "Confirmed" @@ -96,7 +102,6 @@ export default class DataRequest extends Component { }
); @@ -104,61 +109,68 @@ export default class DataRequest extends Component { generateDataRequestCard(data_request) { return ( - +
- - + - + - - + - + - - + - + - - + - + - - + - + - - + - + - - + - + @@ -174,18 +186,14 @@ export default class DataRequest extends Component { - - {this.generateTransactionCard(this.props.data)} - + {this.generateTransactionCard(this.props.data)} - - {this.generateDataRequestCard(this.props.data)} - + {this.generateDataRequestCard(this.props.data)} diff --git a/src/stylesheet.css b/src/stylesheet.css index 0017207..6a52e3c 100644 --- a/src/stylesheet.css +++ b/src/stylesheet.css @@ -192,7 +192,9 @@ body { white-space: nowrap; } .custom-td:last-child { + width: 100%; text-align: right; + padding-left: 1rem; } .table>:not(caption)>*>* { padding: 0.15rem 0.25rem; From b8d83e610bdfce776ee88fbb319797456678aa5c Mon Sep 17 00:00:00 2001 From: gabaldon Date: Thu, 16 Jan 2025 14:12:01 +0100 Subject: [PATCH 6/7] fix(style): adjust table and card style in `ValueTransferPanel` --- src/Pages/SearchPages/ValueTransferPanel.js | 67 +++++++++++---------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/src/Pages/SearchPages/ValueTransferPanel.js b/src/Pages/SearchPages/ValueTransferPanel.js index 32bc2ec..4790e9e 100644 --- a/src/Pages/SearchPages/ValueTransferPanel.js +++ b/src/Pages/SearchPages/ValueTransferPanel.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { Link } from "react-router-dom"; -import { Card, Container, Form } from "react-bootstrap"; +import { Card, Container, Form, Table } from "react-bootstrap"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Formatter from "../../Services/Formatter"; @@ -31,29 +31,32 @@ export default class ValueTransferPanel extends Component { } return ( -
- {"Witnesses"} +
+ + {"Witnesses"} {data_request.witnesses}
- {"Reward"} +
+ + {"Reward"} {Formatter.formatWitValue(data_request.witness_reward, 2)}
- {"Collateral"} +
+ + {"Collateral"} {Formatter.formatWitValue(data_request.collateral, 2)}
- {"Consensus"} +
+ + {"Consensus"} {data_request.consensus_percentage + "%"}
- {"Miner fee"} +
+ + {"Miner fee"} {Formatter.formatWitValue(data_request.miner_fee, 2)}
- {"Priority"} +
+ + {"Priority"} {Formatter.formatValueReducingDecimals(data_request.priority, 3)}
- {"Weight"} +
+ + {"Weight"} {Formatter.formatValue(data_request.weight, 0)}
+
- - + - - + - - + - - + - - + - - + - - + -
- {"Transaction"} + + + {"Transaction"} {transaction.hash}
- {"Block"} + + + {"Block"} {transaction.block}
- {"Fee"} + + + {"Fee"} { this.state.showNanoWitValues ? Formatter.formatValue(transaction.fee) + " nWIT" @@ -62,34 +65,38 @@ export default class ValueTransferPanel extends Component {
- {"Weight"} + + + {"Weight"} {Formatter.formatValue(transaction.weight, 0)}
- {"Priority"} + + + {"Priority"} {Formatter.formatValue(transaction.priority, 0)}
- {"Timestamp"} + + + {"Timestamp"} {transaction_time}
- {"Status"} + + + {"Status"} { transaction.confirmed ? "Confirmed" @@ -98,13 +105,13 @@ export default class ValueTransferPanel extends Component {
+ ); } generateInputOutputAddresses(data, showNanoWitValues) { return ( - +
+ @@ -215,7 +222,7 @@ export default class ValueTransferPanel extends Component { }) } -
{input.address}
+ ); } @@ -371,7 +378,7 @@ export default class ValueTransferPanel extends Component { generateUtxoCheck() { return ( -
+ - - { this.generateDetailsCard(this.props.data) } @@ -422,8 +427,6 @@ export default class ValueTransferPanel extends Component { { this.generateNanoWitValuesCheck() } - - From ca27e9845107cd82cda331e8940a0748649fb5fd Mon Sep 17 00:00:00 2001 From: gabaldon Date: Mon, 20 Jan 2025 18:46:11 +0100 Subject: [PATCH 7/7] fix(style): adjust cards margins and home layout --- src/Components/Paginator.js | 2 +- src/Pages/Home.js | 82 +++++++++++++++++++------------------ src/Pages/Reputation.js | 65 ++++++++++++++--------------- src/stylesheet.css | 44 +++++++++++++++++++- 4 files changed, 118 insertions(+), 75 deletions(-) diff --git a/src/Components/Paginator.js b/src/Components/Paginator.js index 80dee35..1ec713f 100644 --- a/src/Components/Paginator.js +++ b/src/Components/Paginator.js @@ -78,7 +78,7 @@ class Paginator extends Component { } return ( - + this.setPage(1)} disabled={paginator.current_page === 1}> {"<<"} diff --git a/src/Pages/Home.js b/src/Pages/Home.js index 2cd5e81..d9b4306 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -78,7 +78,7 @@ export default class Home extends Component{ ]; return ( - +
{ table_rows.map(function(table_row) { @@ -87,7 +87,7 @@ export default class Home extends Component{ var value = table_row[2]; return ( - + @@ -114,7 +114,7 @@ export default class Home extends Component{ ]; return ( -
+
{ table_rows.map(function(table_row) { @@ -144,27 +144,27 @@ export default class Home extends Component{ generateLatestBlocks(blocks) { return ( -
+
{ blocks.slice(0, this.state.rows_per_card).map(function(block) { var block_link = "/search/" + block.hash; return ( - - + - - - @@ -178,7 +178,7 @@ export default class Home extends Component{ generateTransactionCard(transactions, icon) { return ( -
- +
+ {block.hash} - + + {block.data_request} - + + {block.value_transfer} + {TimeConverter.convertUnixTimestamp(block.timestamp, "hour")}
+
{ transactions.slice(0, this.state.rows_per_card).map(function(transaction) { @@ -186,14 +186,14 @@ export default class Home extends Component{ return ( - - - - + - -
- Network stats -
- - {this.network_stats_card} - -
- Supply info -
- - {this.supply_stats_card} +
+ +
+ Network stats +
+ + {this.network_stats_card} + +
+ Supply info +
+ + {this.supply_stats_card} +
- + Last updated: {update_timestamp} - - + +
Blocks @@ -250,15 +252,15 @@ export default class Home extends Component{ {this.latest_blocks_card} - + Last updated: {update_timestamp}
- - + +
Data requests @@ -267,15 +269,15 @@ export default class Home extends Component{ {this.latest_data_requests_card} - + Last updated: {update_timestamp}
- - + +
Value transfers @@ -284,7 +286,7 @@ export default class Home extends Component{ {this.latest_value_transfers_card} - + Last updated: {update_timestamp} diff --git a/src/Pages/Reputation.js b/src/Pages/Reputation.js index 92dfa32..3e63ffe 100644 --- a/src/Pages/Reputation.js +++ b/src/Pages/Reputation.js @@ -58,14 +58,14 @@ export default class Reputation extends Component{ var reputation_link = {reputation.address} return ( -
- + - - @@ -86,34 +86,35 @@ export default class Reputation extends Component{ var row_stop = this.state.current_page * this.state.rows_per_page; return ( - - - -
- + + {transaction.hash} + {TimeConverter.convertUnixTimestamp(transaction.timestamp, "hour")} + { transaction.confirmed ? @@ -217,31 +217,33 @@ export default class Home extends Component{
+
{reputation_link} + {reputation.reputation} + {reputation.eligibility.toFixed(4) + "%"}
- - - - - - - - - {this.state.reputation_rows.slice(row_start, row_stop)} - -
- {"Addresses " + (row_start + 1) + " to " + row_stop} - - {"Reputation"} - - {"Eligibility"} -
- + + + + + + + + + + + + + {this.state.reputation_rows.slice(row_start, row_stop)} + +
+ {"Addresses " + (row_start + 1) + " to " + row_stop} + + {"Reputation"} + + {"Eligibility"} +
+
+ +
- - + + Last updated: {this.state.last_updated} - ); @@ -178,8 +179,8 @@ export default class Reputation extends Component{ {this.reputation_chart} {this.eligibility_chart} - - Last updated: {this.state.last_updated} + + Last updated: {this.state.last_updated} ); @@ -189,7 +190,7 @@ export default class Reputation extends Component{ this.setState({ window_width: window.innerWidth, window_height: window.innerHeight, - rows_per_page: Math.floor(window.innerHeight * 0.7 / 20) + rows_per_page: Math.floor(window.innerHeight * 0.7 / 25) }); } diff --git a/src/stylesheet.css b/src/stylesheet.css index 6a52e3c..020c700 100644 --- a/src/stylesheet.css +++ b/src/stylesheet.css @@ -182,7 +182,10 @@ body { } .card-bottom-info { - margin-top: 1rem; + margin: 0rem 0.75rem 0.25rem 0.75rem; + padding-bottom: 0.5rem; + opacity: 0.8; + } /* Table custom style */ @@ -190,15 +193,52 @@ body { .custom-td { border: none; white-space: nowrap; + min-width: 25%; } .custom-td:last-child { width: 100%; text-align: right; - padding-left: 1rem; + padding-right: 0rem; +} +.table { + margin-bottom: 0px; +} +.table-responsive { + height: max-content; + max-height: 93%; } .table>:not(caption)>*>* { padding: 0.15rem 0.25rem; + padding-right: 1rem; } .td-icon { margin-right: 0.5rem; } + +/* Home Cards Layout */ + +.home-card { + height: 70vh; +} +.home-card>.card-body { + height: 0%; +} +.home-table { + height: max-content; + max-height: 100%; +} +.home-table>tbody { + height: max-content; + max-height: 93%; +} +.card-body { + height: max-content; + max-height: 100%; + overflow-x: auto; +} + +@media (max-width: 700px) { + .home-card { + height: max-content; + } +}