Use grid layout for home page apps

This commit is contained in:
Taylor Helsper 2021-04-03 23:26:37 -05:00
parent ad32433be2
commit 4f34897ca9
3 changed files with 25 additions and 12 deletions

View File

@ -179,6 +179,14 @@ td, th {
}
.app_tile_grid_container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 0px;
width: 850px;
margin: auto;
}
.app_tile_row {
margin: auto;
display: flex;
@ -205,6 +213,7 @@ td, th {
height: 180px;
padding: 10px;
margin: 6px 10px 6px 10px;
margin-bottom: 16px;
background: #f0f0f0;
}
.app_tile_short {
@ -415,6 +424,8 @@ table.bitcoind_table td {
.app_status {
font-size: 12px;
line-height: 130%;
text-align: center;
width: 100%;
}
.app_beta_tag_image {
width: 50px;

View File

@ -1,7 +1,8 @@
<div class="main_header">Apps</div>
<!-- ROW 1 -->
<div class="app_tile_row">
<div class="app_tile_grid_container">
<div class="app_tile">
<div class="app_status_icon {{ rtl_status_color }}" id="rtl_status_icon"></div>
<!--
@ -20,6 +21,7 @@
{% endif %}
</div>
</div>
<div class="app_tile">
<div class="app_status_icon {{ electrs_status_color }}" id="electrs_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/electrum_logo.png")}}"/></div>
@ -32,6 +34,7 @@
<a class="ui-button ui-widget ui-corner-all mynode_button" href="#" id="toggle-electrs">{% if electrs_enabled %}Disable{% else %}Enable{% endif %}</a>
</div>
</div>
<div class="app_tile">
<div class="app_status_icon {{ btcpayserver_status_color }}" id="btcpayserver_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/btcpayserver.png")}}"/></div>
@ -50,6 +53,7 @@
{% endif %}
</div>
</div>
<div class="app_tile">
<div class="app_status_icon {{mempoolspace_status_color}}" id="mempoolspace_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/mempoolspace.png")}}"/></div>
@ -80,11 +84,7 @@
{% endif %}
</div>
</div>
</div>
<!-- ROW 2 -->
<div class="app_tile_row">
<div class="app_tile">
<div class="app_status_icon {{ btcrpcexplorer_status_color }}" id="btcrpcexplorer_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/btc_rpc_explorer.png")}}"/></div>
@ -101,6 +101,7 @@
{% endif %}
</div>
</div>
{% if not is_device_from_reseller %}
<div class="app_tile">
<div class="app_status_icon {{ dojo_status_color }}" id="dojo_status_icon"></div>
@ -122,6 +123,7 @@
{% endif %}
</div>
</div>
<div class="app_tile">
<div class="app_status_icon {{ whirlpool_status_color }}" id="whirlpool_status_icon"></div>
{% if ui_settings['darkmode'] %}
@ -141,6 +143,7 @@
</div>
</div>
{% endif %}
<div class="app_tile">
<!--<div class="app_status_icon green" id="joininbox_status_icon"></div>-->
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/joininbox.png")}}"/></div>
@ -150,6 +153,7 @@
<a class="ui-button ui-widget ui-corner-all mynode_button" href="/joininbox">Info</a>
</div>
</div>
<div class="app_tile">
<div class="app_status_icon {{ thunderhub_status_color }}" id="thunderhub_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/thunderhub.png")}}"/></div>
@ -170,11 +174,7 @@
{% endif %}
</div>
</div>
</div>
<!-- ROW 3 -->
<div class="app_tile_row">
<div class="app_tile">
<div class="app_status_icon {{ caravan_status_color }}" id="caravan_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/caravan.png")}}"/></div>
@ -193,6 +193,7 @@
{% endif %}
</div>
</div>
<div class="app_tile">
<div class="app_status_icon {{ specter_status_color }}" id="specter_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/specter.png")}}"/></div>
@ -231,6 +232,7 @@
{% endif %}
</div>
</div>
<div class="app_tile">
<div class="app_status_icon {{ sphinxrelay_status_color }}" id="sphinxrelay_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/sphinx.png")}}"/></div>
@ -251,6 +253,7 @@
{% endif %}
</div>
</div>
<div class="app_tile">
<div class="app_status_icon {{ lnbits_status_color }}" id="lnbits_status_icon"></div>
<div class="app_logo"><img class="app_logo_icon" src="{{ url_for('static', filename="images/lnbits.png")}}"/></div>
@ -271,10 +274,9 @@
{% endif %}
</div>
</div>
</div>
<!-- BETA APPS -->
<!-- <div class="main_header">Beta Apps</div> -->
<!-- REMOTE SERVICES -->
<div class="app_tile_row">

View File

@ -8,7 +8,7 @@ apps = [{"name": "bitcoin/bitcoin", "current_version_var
{"name": "lightningnetwork/lnd", "current_version_variable": "LND_VERSION"},
{"name": "lightninglabs/loop", "current_version_variable": "LOOP_VERSION"},
{"name": "lightninglabs/pool", "current_version_variable": "POOL_VERSION"},
{"name": "romanz/electrs", "current_version": "v0.8.6"},
{"name": "romanz/electrs", "current_version": "v0.8.9"},
{"name": "mempool/mempool", "current_version_variable": "MEMPOOL_VERSION"},
{"name": "Ride-The-Lightning/RTL", "current_version_variable": "RTL_VERSION"},
{"name": "janoside/btc-rpc-explorer", "current_version_variable": "BTCRPCEXPLORER_VERSION"},