Add bootstrap 4 support

Remove bootstrap 3 module and css/js
Recreated almost everything in bootstrap 4
Change workflow layout to support bootstrap 4 and flex
Add rotating glyphs for dropdowns
Change breadcrumbs to use pagination and its styling
Change account dropdown to use full width buttons
Add version sock to bootstrap4
Fix indenting in base.html
Change comments in base.html
Remove dead code in booking_list
Revert changes in mulitple_select_filter_widget
Remove dead code, whitespace in inbox
Fix formatting, dead code in viewport-base
Remove unused media tag
Make only .rotate classes rotate on dropdown click
Attach back and next to breadcrumbs
Resize breadcrumbs to be same width
Disable pointer cursor on breadcrumb hover
Change account page to account dropdown on left

Change-Id: I6c5423db6f0f6f7f0b12e55347eddcc42b56e52b
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

1 files changed, 49 insertions, 63 deletions

diff --git a/src/templates/resource/hostprofile_detail.html b/src/templates/resource/hostprofile_detail.html
index 0776b9e..dc20600 100644
--- a/src/templates/resource/hostprofile_detail.html
+++ b/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 %}