Improve Bitcoin page status layout

This commit is contained in:
Taylor Helsper 2021-03-11 22:59:03 -06:00
parent 78b4252ce0
commit 58b57b44d4
6 changed files with 126 additions and 95 deletions

View File

@ -43,14 +43,25 @@ table{
border-collapse: collapse;
}
td {
padding-top: 9px;
td, th {
padding-top: 8px;
padding-bottom: 6px;
border-collapse: collapse;
border-top: #e7e7e7 1px solid;
}
.td_left_header {
padding-right: 40px;
min-width: 120px;
}
.info_table {
font-size: 16px;
}
.info_table th {
font-weight: normal;
padding-right: 30px;
min-width: 100px;
text-align: left;
}
.mynode_back_div {

View File

@ -23,88 +23,95 @@
</div>
<div class="main_header">Bitcoin Status</div>
<br/>
<div class="app_tile_row">
<div class="info_tile">
<div class="info_tile_header">Blocks</div>
<div class="info_tile_contents">{{block_num}}</div>
</div>
<div class="info_tile">
<div class="info_tile_header">Headers</div>
<div class="info_tile_contents">{{header_num}}</div>
</div>
<div class="info_tile">
<div class="info_tile_header">Difficulty</div>
<div class="info_tile_contents">{{difficulty}}</div>
</div>
{% if is_testnet_enabled %}
<div class="info_tile">
<div class="info_tile_header">Network</div>
<div class="info_tile_contents">Testnet</div>
</div>
{% endif %}
<div class="info_tile">
<div class="info_tile_header">Version</div>
<div class="info_tile_contents">{{version}}</div>
</div>
</div>
<div class="app_tile_row">
<div class="info_tile">
<div class="info_tile_header">Mempool TX</div>
<div class="info_tile_contents">{{mempool_tx}}</div>
</div>
<div class="info_tile">
<div class="info_tile_header">Mempool Size</div>
<div class="info_tile_contents">{{mempool_size}}</div>
</div>
<div class="info_tile">
<div class="info_tile_header">Disk Usage</div>
<div class="info_tile_contents">{{disk_size}} GB</div>
</div>
<div class="info_tile">
<div class="info_tile_header">RPC Username</div>
<div class="info_tile_contents">mynode</div>
</div>
<div class="info_tile">
<div class="info_tile_header">RPC Password</div>
<div class="info_tile_header">Status</div>
<div class="info_tile_contents">
<p id="rpc_password" style="display: none; margin: 0;">{{rpc_password}}</p>
<a id="show_rpc_password" class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;">show</a>
<table class="info_table">
<tr>
<th>Blocks</th>
<td>{{block_num}}</td>
</tr>
<tr>
<th>Headers</th>
<td>{{header_num}}</td>
</tr>
<tr>
<th>Difficulty</th>
<td>{{difficulty}}</td>
</tr>
{% if is_testnet_enabled %}
<tr>
<th>Network</th>
<td>Testnet</td>
</tr>
{% endif %}
<tr>
<th>Version</th>
<td>{{version}}</td>
</tr>
</table>
</div>
</div>
</div>
<div class="app_tile_row">
{% if confirmed_balance > 0.0 or unconfirmed_balance > 0.0 %}
<div class="info_tile">
<div class="info_tile_header">Wallet Backup</div>
<div class="info_tile_header">Info</div>
<div class="info_tile_contents">
<a class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;" href="/bitcoind/wallet.dat">download</a>
<table class="info_table">
<tr>
<th>Mempool TX</th>
<td>{{mempool_tx}}</td>
</tr>
<tr>
<th>Mempool Size</th>
<td>{{mempool_size}}</td>
</tr>
<tr>
<th>Disk Usage</th>
<td>{{disk_size}} GB</td>
</tr>
<tr>
<th>RPC Username</th>
<td>mynode</td>
</tr>
<tr>
<th>RPC Password</th>
<td>
<p id="rpc_password" style="display: none; margin: 0;">{{rpc_password}}</p>
<a id="show_rpc_password" class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;">show</a>
</td>
</tr>
</table>
</div>
</div>
{% endif %}
<div class="info_tile">
<div class="info_tile_header">Bitcoin Config</div>
<div class="info_tile_header">Bitcoin</div>
<div class="info_tile_contents">
<a class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;" href="/bitcoind/config">view / edit</a>
<table class="info_table">
<tr>
<th>Config</th>
<td><a class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;" href="/bitcoind/config">view / edit</a></td>
</tr>
<tr>
<th>CLI</th>
<td><a class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;" href="/bitcoind/cli">CLI</a></td>
</tr>
<tr>
<th>Whitepaper</th>
<td><a class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;" href="/bitcoind/bitcoin_whitepaper.pdf">download</a></td>
</tr>
{% if confirmed_balance > 0.0 or unconfirmed_balance > 0.0 %}
<tr>
<th>Wallet Backup</th>
<td><a class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;" href="/bitcoind/wallet.dat">download</a></td>
</tr>
{% endif %}
</table>
</div>
</div>
<div class="info_tile">
<div class="info_tile_header">CLI</div>
<div class="info_tile_contents">
<a class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;" href="/bitcoind/cli">CLI</a>
</div>
</div>
{% if bitcoin_whitepaper_exists %}
<div class="info_tile">
<div class="info_tile_header">Bitcoin Whitepaper</div>
<div class="info_tile_contents">
<a class="ui-button ui-widget ui-corner-all mynode_button_small" style="width: 70%;" href="/bitcoind/bitcoin_whitepaper.pdf">download</a>
</div>
</div>
{% endif %}
</div>
<div class="app_tile_row">
@ -114,6 +121,7 @@
</div>
</div>
{% if confirmed_balance > 0.0 %}
<br/>
<div class="main_header">Wallet balance</div>

View File

@ -1,13 +1,13 @@
<div class="settings_block_subheader">
Info
</div>
<table border="0">
<table border="0" class="info_table">
<tr>
<td class="td_left_header">Serial Number</td>
<th>Serial Number</th>
<td>{{serial_number}}</td>
</tr>
<tr>
<td class="td_left_header">Product Key</td>
<th>Product Key</th>
<td>
{% if product_key_skipped %}
{{product_key}}
@ -20,21 +20,21 @@
</td>
</tr>
<tr>
<td class="td_left_header">Device Type</td >
<th>Device Type</th>
<td>{{device_type}}</td>
</tr>
<tr>
<td class="td_left_header">Device RAM</td>
<th>Device RAM</th>
<td>{{device_ram}} GB</td>
</tr>
<tr>
<td class="td_left_header">Local IP</td>
<th>Local IP</th>
<td>{{local_ip}}</td>
</tr>
{% if throttled_data['RAW_DATA'] != "0x0" and throttled_data['RAW_DATA'] != "MISSING" %}
{% if throttled_data['UNDERVOLTED'] or throttled_data['CAPPED'] or throttled_data['THROTTLED'] or throttled_data['SOFT_TEMPLIMIT'] %}
<tr>
<td class="td_left_header">Active Throttling Data</td>
<th>Active Throttling Data</th>
<td style="color: red; font-size: 10px">
{% if throttled_data['UNDERVOLTED'] %}Undervolted<br/>{% endif %}
{% if throttled_data['CAPPED'] %}Capped CPU<br/>{% endif %}
@ -45,7 +45,7 @@
{% endif %}
{% if throttled_data['HAS_UNDERVOLTED'] or throttled_data['HAS_CAPPED'] or throttled_data['HAS_THROTTLED'] or throttled_data['HAS_SOFT_TEMPLIMIT'] %}
<tr>
<td class="td_left_header">Historic Throttling Data<br/><span style="font-size: 10px;">*Occurred since last reboot</span></td>
<th>Historic Throttling Data<br/><span style="font-size: 10px;">*Occurred since last reboot</span></th>
<td style="color: red; font-size: 10px;">
{% if throttled_data['HAS_UNDERVOLTED'] %}Undervolted<br/>{% endif %}
{% if throttled_data['HAS_CAPPED'] %}Capped CPU<br/>{% endif %}
@ -55,9 +55,21 @@
</tr>
{% endif %}
{% endif %}
{% if oom_error %}
<tr>
<th>Memory</th>
<td style="color: black; font-size: 12px;">
<!--<span class="ui-icon ui-icon-alert"></span> <b>Low Memory</b> <span class="ui-icon ui-icon-alert"></span><br/>-->
<b>Low Memory</b><br/>
Your device was running low on memory and a process has been restarted. You may want to disable some applications.<br/>
<span style="font-size: 10px;">{{ oom_info }}</span><br/><br/>
<a href="/settings/clear-oom-error" class="ui-button ui-widget ui-corner-all settings_button_small">Clear Warning</a>
</td>
</tr>
{% endif %}
{% if has_checkin_error %}
<tr>
<td class="td_left_header">Server</td>
<th>Server</th>
<td style="color: red;"><b>Error contacting mynodebtc.com via Tor!</b><br/>You may have issues checking for new versions or saving product keys.</td>
</tr>
{% endif %}

View File

@ -1,7 +1,7 @@
<div class="settings_block_subheader">Status</div>
<table border="0">
<table class="info_table">
<tr>
<td class="td_left_header">Details</td>
<th>Details</th>
<td>
{% if is_netdata_enabled %}
{% if is_bitcoin_synced %}
@ -18,35 +18,35 @@
</td>
</tr>
<tr>
<td class="td_left_header">Manage</td>
<th>Manage</th>
<td>
<a id="linux_terminal" class="ui-button ui-widget ui-corner-all settings_button_small" href="#">Linux Terminal</a>
</td>
</tr>
<tr>
<td class="td_left_header">Disk Usage</td>
<th>Disk Usage</th>
<td>{{drive_usage}}</td>
</tr>
<tr>
<td class="td_left_header">CPU</td>
<th>CPU</th>
<td>{{cpu_usage}}</td>
</tr>
<tr>
<td class="td_left_header">RAM</td>
<th>RAM</th>
<td>{{ram_usage}}</td>
</tr>
{% if device_temp != '...' %}
<tr>
<td class="td_left_header">Temperature</td>
<th>Temperature</th>
<td>{{device_temp}} &deg;C</td>
</tr>
{% endif %}
<tr>
<td class="td_left_header">Uptime</td>
<th>Uptime</th>
<td>{{uptime}}</td>
</tr>
<tr>
<td class="td_left_header">Date</td>
<th>Date</th>
<td>{{date}}</td>
</tr>
</table>

View File

@ -442,14 +442,14 @@
<div class="settings_block_header">myNode</div>
<div class="settings_block_subheader">Version</div>
<table border="0">
<table class="info_table">
<tr>
<td class="td_left_header">Current Version</td>
<th>Current Version</th>
<td>{{current_version}}</td>
<td></td>
</tr>
<tr>
<td>Latest Version</td>
<th>Latest Version</th>
<td>{{latest_version}}</td>
<td>
&nbsp;<a href="/settings/get-latest-version" class="ui-button ui-widget ui-corner-all settings_button_small">Check for Updates</a>
@ -486,17 +486,17 @@
This will change the password you use in the myNode GUI, the password for SSH, and the password for apps like RTL.
<br/><br/>
<form action="/settings/password" method="POST">
<table border="0">
<table class="info_table">
<tr>
<td class="td_left_header">Current Password</td>
<th>Current Password</th>
<td><input type="password" id="current_password" name="current_password" width="20" class="ui-corner-all settings_input"/></td>
</tr>
<tr>
<td class="td_left_header">Password</td>
<th>Password</th>
<td><input type="password" id="password1" name="password1" width="20" class="ui-corner-all settings_input"/></td>
</tr>
<tr>
<td class="td_left_header">Repeat Password</td>
<th>Repeat Password</th>
<td><input type="password" id="password2" name="password2" width="20" class="ui-corner-all settings_input"/></td>
</tr>
</table>

View File

@ -186,9 +186,9 @@
<div class="settings_block_header">myNode</div>
<div class="settings_block_subheader">Version</div>
<table border="0">
<table clsas="info_table">
<tr>
<td class="td_left_header">Current Version</td>
<th>Current Version</th>
<td>{{current_version}}</td>
<td></td>
</tr>