apply no-more-tables to more tables
This commit is contained in:
parent
15732f5c54
commit
b92a165eec
7 changed files with 49 additions and 102 deletions
|
@ -13,6 +13,7 @@
|
||||||
<div class="panel panel-info" id="addresses">
|
<div class="panel panel-info" id="addresses">
|
||||||
<div class="panel-heading">Addresses</div>
|
<div class="panel-heading">Addresses</div>
|
||||||
<div class="panel-body"><p>
|
<div class="panel-body"><p>
|
||||||
|
<div class="no-more-tables">
|
||||||
<table class="table table-hover table-striped table-condensed cf">
|
<table class="table table-hover table-striped table-condensed cf">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -22,7 +23,6 @@
|
||||||
<th>Server</th>
|
<th>Server</th>
|
||||||
<th>VLAN</th>
|
<th>VLAN</th>
|
||||||
<th>Deploy</th>
|
<th>Deploy</th>
|
||||||
<th>Server</th>
|
|
||||||
<th>rDNS</th>
|
<th>rDNS</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
@ -30,17 +30,17 @@
|
||||||
{% for address in addresses %}
|
{% for address in addresses %}
|
||||||
<tr>
|
<tr>
|
||||||
{% if address.reserved == True %}<tr class="danger">{% else %}<tr>{% endif %}
|
{% if address.reserved == True %}<tr class="danger">{% else %}<tr>{% endif %}
|
||||||
<!--<td>region1</td>-->
|
<!--<td data-title="Region">region1</td>-->
|
||||||
<td>{{ address.ip }}</td>
|
<td data-title="IP">{{ address.ip }}</td>
|
||||||
{% if address.user_id != None %}
|
{% if address.user_id != None %}
|
||||||
<td><a href="{{ url_for('admin.dashboard', user_pid=address.user_id) }}">{{ address.owner.email }}</a></td>
|
<td data-title="Assignee"><a href="{{ url_for('admin.dashboard', user_pid=address.user_id) }}">{{ address.owner.email }}</a></td>
|
||||||
{% else %}
|
{% else %}
|
||||||
<td></td>
|
<td></td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if address.assignee != None %}
|
{% if address.assignee != None %}
|
||||||
<td>{{ address.assignee.deploy.server.name }}</td>
|
<td data-title="Server">{{ address.assignee.deploy.server.name }}</td>
|
||||||
<td>{{ address.assignee.vlan_id }}</td>
|
<td data-title="VLAN">{{ address.assignee.vlan_id }}</td>
|
||||||
<td>{{ address.assignee.deploy.machine_alias }}</td>
|
<td data-title="Deploy">{{ address.assignee.deploy.machine_alias }}</td>
|
||||||
{% else %}
|
{% else %}
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
@ -48,7 +48,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if address.rdns != None %}
|
{% if address.rdns != None %}
|
||||||
<td>{{ address.rdns }}</td>
|
<td data-title="rDNS">{{ address.rdns }}</td>
|
||||||
{% else %}
|
{% else %}
|
||||||
<td></td>
|
<td></td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
<div class="panel panel-info" id="deployments">
|
<div class="panel panel-info" id="deployments">
|
||||||
<div class="panel-heading">Deployments</div>
|
<div class="panel-heading">Deployments</div>
|
||||||
<div class="panel-body"><p>
|
<div class="panel-body"><p>
|
||||||
|
<div class="no-more-tables">
|
||||||
<table class="table table-hover table-striped table-condensed cf">
|
<table class="table table-hover table-striped table-condensed cf">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -36,17 +37,17 @@
|
||||||
<tr>
|
<tr>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<td><a class="rrd" data-toggle="tooltip" title="Protected: {{ deploy.protected }}<br />Online: {{ deploy.connected }}<br />ID: {{ deploy.machine_id }}"><b>{% if deploy.protected == True %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a></td>
|
<td data-title="Alias"><a class="rrd" data-toggle="tooltip" title="Protected: {{ deploy.protected }}<br />Online: {{ deploy.connected }}<br />ID: {{ deploy.machine_id }}"><b>{% if deploy.protected == True %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a></td>
|
||||||
<td>{{ deploy.machine_cpu }}</td>
|
<td data-title="CPU">{{ deploy.machine_cpu }}</td>
|
||||||
<td>{{ deploy.machine_mem }} MB</td>
|
<td data-title="Memory">{{ deploy.machine_mem }} MB</td>
|
||||||
<td>{{ deploy.machine_hdd }} GB</td>
|
<td data-title="HDD">{{ deploy.machine_hdd }} GB</td>
|
||||||
{% if deploy.date_last_charge == None %}
|
{% if deploy.date_last_charge == None %}
|
||||||
<td>Never</td>
|
<td data-title="Last Charged">Never</td>
|
||||||
{% else %}
|
{% else %}
|
||||||
<td>{{ moment(deploy.date_last_charge).format('lll') }} ({{ moment(deploy.date_last_charge).fromNow() }})</td>
|
<td data-title="Last Charged">{{ moment(deploy.date_last_charge).format('lll') }} ({{ moment(deploy.date_last_charge).fromNow() }})</td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<td>{{ deploy.daysleft }}</td>
|
<td data-title="Days Left">{{ deploy.daysleft }}</td>
|
||||||
<td><a href="{{ url_for('admin.dashboard', user_pid=deploy.user_id) }}">{{ deploy.owner.email }}</a></td>
|
<td data-title="Owner"><a href="{{ url_for('admin.dashboard', user_pid=deploy.user_id) }}">{{ deploy.owner.email }}</a></td>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
<div class="panel panel-info" id="services">
|
<div class="panel panel-info" id="services">
|
||||||
<div class="panel-heading">Services</div>
|
<div class="panel-heading">Services</div>
|
||||||
<div class="panel-body"><p>
|
<div class="panel-body"><p>
|
||||||
|
<div class="no-more-tables">
|
||||||
<table class="table table-hover table-striped table-condensed cf">
|
<table class="table table-hover table-striped table-condensed cf">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -35,12 +36,12 @@
|
||||||
<tr>
|
<tr>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<td><a href="{{ url_for('admin.dashboard', user_pid=service.user_id) }}">{{ service.owner.email }}</a></td>
|
<td data-title="Owner"><a href="{{ url_for('admin.dashboard', user_pid=service.user_id) }}">{{ service.owner.email }}</a></td>
|
||||||
<td>{{ service.category }}</td>
|
<td data-title="Category">{{ service.category }}</td>
|
||||||
<td>{{ service.description }}</td>
|
<td data-title="Description">{{ service.description }}</td>
|
||||||
<td>{{ service.price }}</td>
|
<td data-title="Price">{{ service.price }}</td>
|
||||||
<td>{{ moment(service.date_last_charge).format('ll') }} ({{ moment(service.date_last_charge).fromNow() }})</td>
|
<td data-title="Last Charged">{{ moment(service.date_last_charge).format('ll') }} ({{ moment(service.date_last_charge).fromNow() }})</td>
|
||||||
<td>{{ service.daysleft }}</td>
|
<td data-title="Days Left">{{ service.daysleft }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
@ -9,8 +9,7 @@
|
||||||
<div class="panel panel-info">
|
<div class="panel panel-info">
|
||||||
<div class="panel-heading">All Transactions</div>
|
<div class="panel-heading">All Transactions</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
|
<div class="no-more-tables">
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table table-hover table-striped table-condensed cf">
|
<table class="table table-hover table-striped table-condensed cf">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -26,18 +25,18 @@
|
||||||
{% for transaction in transactions %}
|
{% for transaction in transactions %}
|
||||||
{% if transaction.value > 0 %}
|
{% if transaction.value > 0 %}
|
||||||
<tr class="default">
|
<tr class="default">
|
||||||
<td>{{ transaction.pid }}</td>
|
<td data-title="ID">{{ transaction.pid }}</td>
|
||||||
<td>{{ transaction.description }}</td>
|
<td data-title="Description">{{ transaction.description }}</td>
|
||||||
<td>{{ transaction.value }} {{ transaction.currency }}</td>
|
<td data-title="Amount">{{ transaction.value }} {{ transaction.currency }}</td>
|
||||||
<td>{{ moment(transaction.date_created).format('lll') }}</td>
|
<td data-title="Date">{{ moment(transaction.date_created).format('lll') }}</td>
|
||||||
<td><a href="{{ url_for('admin.transaction', user_pid=transaction.owner.pid) }}">{{ transaction.owner.email }}</a></td>
|
<td data-title="User"><a href="{{ url_for('admin.transaction', user_pid=transaction.owner.pid) }}">{{ transaction.owner.email }}</a></td>
|
||||||
{% else %}
|
{% else %}
|
||||||
<tr class="default">
|
<tr class="default">
|
||||||
<td>{{ transaction.pid }}</td>
|
<td data-title="ID">{{ transaction.pid }}</td>
|
||||||
<td>{{ transaction.description }}</td>
|
<td data-title="Description">{{ transaction.description }}</td>
|
||||||
<td>{{ transaction.value }} {{ transaction.currency }}</td>
|
<td data-title="Amount">{{ transaction.value }} {{ transaction.currency }}</td>
|
||||||
<td>{{ moment(transaction.date_created).format('lll') }}</td>
|
<td data-title="Date">{{ moment(transaction.date_created).format('lll') }}</td>
|
||||||
<td><a href="{{ url_for('admin.transaction', user_pid=transaction.owner.pid) }}">{{ transaction.owner.email }}</a></td>
|
<td data-title="User"><a href="{{ url_for('admin.transaction', user_pid=transaction.owner.pid) }}">{{ transaction.owner.email }}</a></td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
@ -8,25 +8,26 @@
|
||||||
<div class="panel panel-info" id="users">
|
<div class="panel panel-info" id="users">
|
||||||
<div class="panel-heading">List Active Users</div>
|
<div class="panel-heading">List Active Users</div>
|
||||||
<div class="panel-body"><p>
|
<div class="panel-body"><p>
|
||||||
|
<div class="no-more-tables">
|
||||||
<table class="table table-hover table-striped table-condensed cf">
|
<table class="table table-hover table-striped table-condensed cf">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>id</td>
|
|
||||||
<td>email</td>
|
<td>email</td>
|
||||||
<td>last seen</td>
|
<td>last seen</td>
|
||||||
<td>last ip</td>
|
<td>last ip</td>
|
||||||
<td>wallet</td>
|
<td>wallet</td>
|
||||||
|
<td>currency</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for usr in users %}
|
{% for usr in users %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ usr.pid }}</td>
|
<td data-title="Email"><font {% if usr.is_administrator() == True %}color="red"{% endif %}>{{ usr.email }}</td>
|
||||||
<td><font {% if usr.is_administrator() == True %}color="red"{% endif %}>{{ usr.email }}</td>
|
<td data-title="Last Seen">{{ moment(usr.last_seen).format('lll') }}</td>
|
||||||
<td>{{ moment(usr.last_seen).format('lll') }}</td>
|
<td data-title="Last IP"><a href="https://apps.db.ripe.net/search/query.html?searchtext={{ usr.last_ip }}" data-toggle="tooltip" title="RIPE Whois Search" target="_blank">{{ usr.last_ip }}</a></td>
|
||||||
<td><a href="https://apps.db.ripe.net/search/query.html?searchtext={{ usr.last_ip }}" data-toggle="tooltip" title="RIPE Whois Search" target="_blank">{{ usr.last_ip }}</a></td>
|
<td data-title="Wallet">{{ usr.wallet }}</td>
|
||||||
<td>{{ usr.wallet }}<td>
|
<td data-title="Currency">{{ usr.currency }}</td>
|
||||||
<td><a href="{{ url_for('admin.charge', user_pid=usr.pid) }}" data-toggle="tooltip" title="Add Funds"><span class="glyphicon glyphicon-plus"></span></a>
|
<td><a href="{{ url_for('admin.charge', user_pid=usr.pid) }}" data-toggle="tooltip" title="Add Funds"><span class="glyphicon glyphicon-plus"></span></a>
|
||||||
<a href="{{ url_for('admin.transaction', user_pid=usr.pid) }}" data-toggle="tooltip" title="List Transactions"><span class="glyphicon glyphicon-credit-card"></span></a>
|
<a href="{{ url_for('admin.transaction', user_pid=usr.pid) }}" data-toggle="tooltip" title="List Transactions"><span class="glyphicon glyphicon-credit-card"></span></a>
|
||||||
<a href="{{ url_for('admin.dashboard', user_pid=usr.pid) }}" data-toggle="tooltip" title="Show Dashboard"><span class="glyphicon glyphicon-modal-window"></span></a>
|
<a href="{{ url_for('admin.dashboard', user_pid=usr.pid) }}" data-toggle="tooltip" title="Show Dashboard"><span class="glyphicon glyphicon-modal-window"></span></a>
|
||||||
|
|
|
@ -2,62 +2,6 @@
|
||||||
|
|
||||||
{% block styles %}
|
{% block styles %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
.tg {border-collapse:collapse;border-spacing:0;}
|
|
||||||
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:1px 1px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
|
|
||||||
.tg th{font-family:Arial, sans-serif;font-size:14px;padding:1px 1px;font-weight:normal;padding:border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
|
|
||||||
.tg .tg-yw4l{vertical-align:top}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
/* Force table to not be like tables anymore */
|
|
||||||
.no-more-tables table,
|
|
||||||
.no-more-tables thead,
|
|
||||||
.no-more-tables tbody,
|
|
||||||
.no-more-tables th,
|
|
||||||
.no-more-tables td,
|
|
||||||
.no-more-tables tr {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide table headers (but not display: none;, for accessibility) */
|
|
||||||
.no-more-tables thead tr {
|
|
||||||
position: absolute;
|
|
||||||
top: -9999px;
|
|
||||||
left: -9999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-more-tables tr { border: 1px solid #ccc; }
|
|
||||||
|
|
||||||
.no-more-tables td {
|
|
||||||
/* Behave like a "row" */
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 50%;
|
|
||||||
white-space: normal;
|
|
||||||
text-align:left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-more-tables td:before {
|
|
||||||
/* Now like a table header */
|
|
||||||
/* position: absolute; */
|
|
||||||
/* Top/left values mimic padding */
|
|
||||||
top: 6px;
|
|
||||||
left: 6px;
|
|
||||||
width: 45%;
|
|
||||||
padding-right: 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Label the data
|
|
||||||
*/
|
|
||||||
.no-more-tables td:before { content: attr(data-title); }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
|
@ -144,6 +88,7 @@ addEventListener("DOMContentLoaded", function() {
|
||||||
<div class="panel panel-info" id="services">
|
<div class="panel panel-info" id="services">
|
||||||
<div class="panel-heading">Services</div>
|
<div class="panel-heading">Services</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
|
<div class="no-more-tables">
|
||||||
{% include "panel/services.html" %}
|
{% include "panel/services.html" %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -77,14 +77,14 @@ var myChart = new Chart(ctx, {
|
||||||
{% for transaction in transactions %}
|
{% for transaction in transactions %}
|
||||||
{% if transaction.value < 0 %}
|
{% if transaction.value < 0 %}
|
||||||
<tr class="default">
|
<tr class="default">
|
||||||
<td>{{ moment(transaction.date_created).format('lll') }}</td>
|
<td data-title="Date">{{ moment(transaction.date_created).format('lll') }}</td>
|
||||||
<td>{{ transaction.description }}</td>
|
<td data-title="Description">{{ transaction.description }}</td>
|
||||||
<td>{{ transaction.value|abs }} {{ transaction.currency }}</td>
|
<td data-title="Amount">{{ transaction.value|abs }} {{ transaction.currency }}</td>
|
||||||
{% else %}
|
{% else %}
|
||||||
<tr class="default">
|
<tr class="default">
|
||||||
<td>{{ moment(transaction.date_created).format('lll') }}</td>
|
<td data-title="Date">{{ moment(transaction.date_created).format('lll') }}</td>
|
||||||
<td>{{ transaction.description }}</td>
|
<td data-title="Description">{{ transaction.description }}</td>
|
||||||
<td>{{ transaction.value|abs }} {{ transaction.currency }}</td>
|
<td data-title="Amount">{{ transaction.value|abs }} {{ transaction.currency }}</td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
Loading…
Reference in a new issue