From 5c9d410421464f891d79b28aeb8092802c5e1f92 Mon Sep 17 00:00:00 2001
From: deflax <daniel@deflax.net>
Date: Thu, 8 Jun 2017 17:42:09 +0300
Subject: [PATCH] responsive dashboard tables

---
 app/templates/vmanager/dashboard.html | 160 ++++++++++++--------------
 requirements.txt                      |  47 ++++++++
 2 files changed, 121 insertions(+), 86 deletions(-)
 create mode 100644 requirements.txt

diff --git a/app/templates/vmanager/dashboard.html b/app/templates/vmanager/dashboard.html
index 3e96689..a1260a2 100644
--- a/app/templates/vmanager/dashboard.html
+++ b/app/templates/vmanager/dashboard.html
@@ -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>
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..3b834d9
--- /dev/null
+++ b/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