Merge "Add bootstrap 4 support"

4 files changed, 52 insertions, 66 deletions

diff --git a/dashboard/src/templates/resource/hostprofile_detail.html b/dashboard/src/templates/resource/hostprofile_detail.html
index 0776b9e..dc20600 100644
--- a/dashboard/src/templates/resource/hostprofile_detail.html
+++ b/dashboard/src/templates/resource/hostprofile_detail.html
@@ -4,45 +4,35 @@
 {% block content %}
 <div class="row">
     <div class="col-lg-6">
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
+        <div class="card mb-4">
+            <div class="card-header d-flex">
                 <h4 style="display: inline;">Available at</h4>
-                <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a>
+                <button data-toggle="collapse" data-target="#avilableAt" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
-            <div class="panel-body" id="panel_overview">
-                <table class="table">
-                    <tr>
-                        <td>
-                            <ul>
-                            {% for lab in hostprofile.labs.all %}
-                                <li>{{lab.name}}</li>
-                            {% endfor %}
-                            </ul>
-                        </td>
-                    </tr>
-                </table>
+            <div class="card-body collapse show" id="avilableAt">
+                <ul class="list-group">
+                    {% for lab in hostprofile.labs.all %}
+                        <li class="list-group-item">{{lab.name}}</li>
+                    {% endfor %}
+                </ul>
             </div>
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
+        <div class="card mb-4">
+            <div class="card-header d-flex">
                 <h4 style="display: inline;">RAM</h4>
-                <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a>
+                <button data-toggle="collapse" data-target="#ramPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
-            <div class="panel-body" id="panel_overview">
-                <table class="table">
-                    <tr>
-                        <td>{{hostprofile.ramprofile.first.amount}}G,
-                            {{hostprofile.ramprofile.first.channels}} channels</td>
-                    </tr>
-                </table>
+            <div class="card-body collapse show" id="ramPanel">
+                {{hostprofile.ramprofile.first.amount}}G,
+                {{hostprofile.ramprofile.first.channels}} channels
             </div>
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
+        <div class="card mb-4">
+            <div class="card-header d-flex">
                 <h4 style="display: inline;">CPU</h4>
-                <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a>
+                <button data-toggle="collapse" data-target="#cpuPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
-            <div class="panel-body" id="panel_overview">
+            <div class="card-body collapse show" id="cpuPanel">
                 <table class="table">
                     <tr>
                         <td>Arch:</td>
@@ -59,42 +49,12 @@
                 </table>
             </div>
         </div>
-    </div>
-    <div class="col-lg-6">
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
-                <h4 style="display: inline;">Interfaces</h4>
-                <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a>
-            </div>
-            <div class="panel-body" id="panel_overview">
-                <table class="table">
-                            {% for intprof in hostprofile.interfaceprofile.all %}
-                            <tr>
-                                <td>
-                                <table class="table borderless">
-                                    <tr>
-                                        <td>Name:</td>
-                                        <td>{{intprof.name}}</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Speed:</td>
-                                        <td>{{intprof.speed}}</td>
-                                    </tr>
-                                </table>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                </table>
-            </div>
-        </div>
-    </div>
-    <div class="col-lg-6">
-        <div class="panel panel-default">
-            <div class="panel-heading clearfix">
+        <div class="card mb-4">
+            <div class="card-header d-flex">
                 <h4 style="display: inline;">Disk</h4>
-                <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a>
+                <button data-toggle="collapse" data-target="#diskPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
             </div>
-            <div class="panel-body" id="panel_overview">
+            <div class="card-body collapse show" id="diskPanel">
                 <table class="table">
                     <tr>
                         <td>Size:</td>
@@ -112,5 +72,31 @@
             </div>
         </div>
     </div>
+    <div class="col-lg-6">
+        <div class="card">
+            <div class="card-header d-flex">
+                <h4 style="display: inline;">Interfaces</h4>
+                <button data-toggle="collapse" data-target="#interfacePanel" class="btn ml-auto btn-outline-secondary">Expand</button>
+            </div>
+            <div class="card-body collapse show" id="interfacePanel">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Speed</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for intprof in hostprofile.interfaceprofile.all %}
+                        <tr>
+                            <td>{{intprof.name}}</td>
+                            <td>{{intprof.speed}}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock content %}
diff --git a/dashboard/src/templates/resource/steps/define_hardware.html b/dashboard/src/templates/resource/steps/define_hardware.html
index 933b4ab..f85576e 100644
--- a/dashboard/src/templates/resource/steps/define_hardware.html
+++ b/dashboard/src/templates/resource/steps/define_hardware.html
@@ -1,7 +1,7 @@
 {% extends "workflow/viewport-element.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}
 <p>Note that not all labs host every kind of machine.
diff --git a/dashboard/src/templates/resource/steps/host_info.html b/dashboard/src/templates/resource/steps/host_info.html
index 0275727..bbbafdc 100644
--- a/dashboard/src/templates/resource/steps/host_info.html
+++ b/dashboard/src/templates/resource/steps/host_info.html
@@ -1,7 +1,7 @@
 {% extends "workflow/viewport-element.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}
 
diff --git a/dashboard/src/templates/resource/steps/meta_info.html b/dashboard/src/templates/resource/steps/meta_info.html
index da98267..cebd343 100644
--- a/dashboard/src/templates/resource/steps/meta_info.html
+++ b/dashboard/src/templates/resource/steps/meta_info.html
@@ -1,7 +1,7 @@
 {% extends "workflow/viewport-element.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}