responsive dashboard tables

app/templates/vmanager/dashboard.html

@@ -8,8 +8,7 @@
 .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) {
+@media only screen and (max-width: 768px) {
-	
         /* Force table to not be like tables anymore */
         #no-more-tables table,
         #no-more-tables thead,
@@ -56,30 +55,12 @@
         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>
+     <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>
-     <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><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><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><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>{% 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' %}
-     <td>{% 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 data-title="Domain"><b><a href="http://{{ domain.fqdn }}">{{ domain.fqdn }}</a></b></td>
-    <td>{{ domain.date_expire }}</td>
+    <td data-title="Expiry Date">{{ domain.date_expire }}</td>
-    <td>soon...</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 data-title="IP">{{ address.ip }}</td>
-     <td>{{ address.macaddr }}</td>
+     <td data-title="MAC">{{ address.macaddr }}</td>
-     <td>{{ address.rdns }}</td>
+     <td data-title="RDNS">{{ address.rdns }}</td>
-     <td>soon...</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 data-title="Name">{{ service.name }}</td>
-     <td>{{ service.description }}</td>
+     <td data-title="Description" >{{ service.description }}</td>
-     <td>{{ service.unit }}</td>
+     <td data-title="Unit">{{ service.unit }}</td>
-     <td>{{ service.unitprice }}</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>

requirements.txt

@@ -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