responsive dashboard tables
This commit is contained in:
parent
ca09e02f70
commit
5c9d410421
2 changed files with 121 additions and 86 deletions
|
|
@ -8,78 +8,59 @@
|
|||
.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: 800px) {
|
||||
|
||||
/* 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); }
|
||||
}
|
||||
@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 %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$(".nmt").each(function() {
|
||||
var nmtTable = $(this);
|
||||
var nmtHeadRow = nmtTable.find("thead tr");
|
||||
nmtTable.find("tbody tr").each(function () {
|
||||
var curRow = $(this);
|
||||
for (var i = 0; i < curRow.find("td").length; i++) {
|
||||
var rowSelector = "td:eq(" + i + ")";
|
||||
var headSelector = "th:eq(" + i + ")";
|
||||
curRow.find(rowSelector).attr('data-title', nmtHeadRow.find(headSelector).html());
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$('a[data-toggle="tooltip"]').tooltip({
|
||||
animated: 'fade',
|
||||
|
|
@ -140,6 +121,7 @@ addEventListener("DOMContentLoaded", function() {
|
|||
<div class="panel panel-info" id="deployments">
|
||||
<div class="panel-heading">Deployments</div>
|
||||
<div class="panel-body"><p>
|
||||
<div id="no-more-tables">
|
||||
<table class="table table-hover table-striped table-condensed cf">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -154,25 +136,25 @@ addEventListener("DOMContentLoaded", function() {
|
|||
<tbody>
|
||||
{% for deploy in inv_deployments %}
|
||||
<tr>
|
||||
<td>
|
||||
<a data-toggle="tooltip" title="ID# {{ deploy.machine_id }}<br />Deployment state: {{ status[deploy.machine_id] }}"><b>{% if status[deploy.machine_id] == 'running' %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a></td>
|
||||
<td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}' />">{{ deploy.machine_cpu }} Cores</a></td>
|
||||
<td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}' />">{{ deploy.machine_mem }} MB</a></td>
|
||||
<td><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}' />">{{ deploy.machine_hdd }} GB</a></td>
|
||||
<td>{% for addr in deploy.machine_addresses %}<a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}' />">{{ addr.ip }}</a><br />{% endfor %}</td>
|
||||
<td>{% if status[deploy.machine_id] == 'running' %}
|
||||
<td data-title="Name"><a data-toggle="tooltip" title="ID# {{ deploy.machine_id }}<br />Deployment state: {{ status[deploy.machine_id] }}"><b>{% if status[deploy.machine_id] == 'running' %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a></td>
|
||||
<td data-title="CPU"><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}' />">{{ deploy.machine_cpu }} Cores</a></td>
|
||||
<td data-title="Memory"><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}' />">{{ deploy.machine_mem }} MB</a></td>
|
||||
<td data-title="Disk"><a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}' />">{{ deploy.machine_hdd }} GB</a></td>
|
||||
<td data-title="Network">{% for addr in deploy.machine_addresses %}<a data-toggle="tooltip" title="<img src='data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}' />">{{ addr.ip }}</a><br />{% endfor %}</td>
|
||||
<td data-title="Control">{% if status[deploy.machine_id] == 'running' %}
|
||||
<button class="confirm command command-vmshutdown btn btn-default btn-warning" value="vmshutdown" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Shutdown</button>
|
||||
<button class="confirm command command-vmstop btn btn-default btn-danger" value="vmstop" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> Force Stop</button>
|
||||
{% else %}
|
||||
<button class="command command-vmstart btn btn-default btn-success" value="vmstart" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start</button>
|
||||
{% endif %}</td>
|
||||
<td>{% if status[deploy.machine_id] == 'running' %}
|
||||
<td data-title="Remote">{% if status[deploy.machine_id] == 'running' %}
|
||||
<button class="btn btn-default btn-info" onclick="window.open('/vmanager/vmvnc/{{ deploy.machine_id }}', '_blank');"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button>
|
||||
{% endif %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -182,6 +164,7 @@ addEventListener("DOMContentLoaded", function() {
|
|||
<div class="panel panel-info" id="domains">
|
||||
<div class="panel-heading">Domains</div>
|
||||
<div class="panel-body"><p>
|
||||
<div id="no-more-tables">
|
||||
<table class="table table-hover table-striped table-condensed cf">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -192,13 +175,14 @@ addEventListener("DOMContentLoaded", function() {
|
|||
<tbody>
|
||||
{% for domain in inv_domains %}
|
||||
<tr>
|
||||
<td><b><a href="http://{{ domain.fqdn }}">{{ domain.fqdn }}</a></b></td>
|
||||
<td>{{ domain.date_expire }}</td>
|
||||
<td>soon...</td>
|
||||
<td data-title="Domain"><b><a href="http://{{ domain.fqdn }}">{{ domain.fqdn }}</a></b></td>
|
||||
<td data-title="Expiry Date">{{ domain.date_expire }}</td>
|
||||
<td data-title="Control">soon...</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Order</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -208,6 +192,7 @@ addEventListener("DOMContentLoaded", function() {
|
|||
<div class="panel panel-info" id="addresses">
|
||||
<div class="panel-heading">Addresses</div>
|
||||
<div class="panel-body"><p>
|
||||
<div id="no-more-tables">
|
||||
<table class="table table-hover table-striped table-condensed cf">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -219,14 +204,15 @@ addEventListener("DOMContentLoaded", function() {
|
|||
<tbody>
|
||||
{% for address in inv_addresses %}
|
||||
<tr>
|
||||
<td>{{ address.ip }}</td>
|
||||
<td>{{ address.macaddr }}</td>
|
||||
<td>{{ address.rdns }}</td>
|
||||
<td>soon...</td>
|
||||
<td data-title="IP">{{ address.ip }}</td>
|
||||
<td data-title="MAC">{{ address.macaddr }}</td>
|
||||
<td data-title="RDNS">{{ address.rdns }}</td>
|
||||
<td data-title="Control">soon...</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!--<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Assign</button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -236,6 +222,7 @@ addEventListener("DOMContentLoaded", function() {
|
|||
<div class="panel panel-info" id="services">
|
||||
<div class="panel-heading">Services</div>
|
||||
<div class="panel-body"><p>
|
||||
<div id="no-more-tables">
|
||||
<table class="table table-hover table-striped table-condensed cf">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -247,14 +234,15 @@ addEventListener("DOMContentLoaded", function() {
|
|||
<tbody>
|
||||
{% for service in inv_services %}
|
||||
<tr>
|
||||
<td>{{ service.name }}</td>
|
||||
<td>{{ service.description }}</td>
|
||||
<td>{{ service.unit }}</td>
|
||||
<td>{{ service.unitprice }}</td>
|
||||
<td data-title="Name">{{ service.name }}</td>
|
||||
<td data-title="Description" >{{ service.description }}</td>
|
||||
<td data-title="Unit">{{ service.unit }}</td>
|
||||
<td data-title="Price">{{ service.unitprice }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="btn btn-default" onclick="window.open('{{ url_for('main.index') }}')"><span class="glyphicon glyphicon-plus" aria-hiddent="true"></span> Order</button>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
47
requirements.txt
Normal file
47
requirements.txt
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
alembic==0.9.2
|
||||
appdirs==1.4.3
|
||||
Babel==2.4.0
|
||||
blinker==1.4
|
||||
certifi==2017.4.17
|
||||
chardet==3.0.3
|
||||
click==6.7
|
||||
dnspython==1.15.0
|
||||
dnspython3==1.15.0
|
||||
dominate==2.3.1
|
||||
facepy==1.0.9
|
||||
Flask==0.12.2
|
||||
Flask-Babel==0.11.2
|
||||
Flask-Bootstrap==3.3.7.1
|
||||
Flask-Login==0.4.0
|
||||
Flask-Mail==0.9.1
|
||||
Flask-Migrate==2.0.4
|
||||
Flask-Moment==0.5.1
|
||||
Flask-Script==2.0.5
|
||||
Flask-SQLAlchemy==2.2
|
||||
Flask-WTF==0.14.2
|
||||
gunicorn==19.7.1
|
||||
idna==2.5
|
||||
iso3166==0.8
|
||||
itsdangerous==0.24
|
||||
Jinja2==2.9.6
|
||||
Mako==1.0.6
|
||||
MarkupSafe==1.0
|
||||
onetimepass==1.0.1
|
||||
pkg-resources==0.0.0
|
||||
psycopg2==2.7.1
|
||||
Pygments==2.2.0
|
||||
PyQRCode==1.2.1
|
||||
python-dateutil==2.6.0
|
||||
python-editor==1.0.3
|
||||
pytz==2017.2
|
||||
requests==2.17.3
|
||||
schedule==0.4.2
|
||||
six==1.10.0
|
||||
sortedcontainers==1.5.7
|
||||
SQLAlchemy==1.1.10
|
||||
traits==4.6.0
|
||||
Unipath==1.1
|
||||
urllib3==1.21.1
|
||||
visitor==0.1.3
|
||||
Werkzeug==0.12.2
|
||||
WTForms==2.1
|
||||
Loading…
Reference in a new issue