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>

10 files changed, 64 insertions, 59 deletions

diff --git a/src/templates/booking/booking_calendar.html b/src/templates/booking/booking_calendar.html
index 1b29dc2..ddcb45d 100644
--- a/src/templates/booking/booking_calendar.html
+++ b/src/templates/booking/booking_calendar.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block extrahead %}
     {{ block.super }}
diff --git a/src/templates/booking/booking_delete.html b/src/templates/booking/booking_delete.html
index 76a5634..b89eb15 100644
--- a/src/templates/booking/booking_delete.html
+++ b/src/templates/booking/booking_delete.html
@@ -1,5 +1,5 @@
 {% load jira_filters %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 <p>
     Really delete Booking from {{ booking.start}} to {{ booking.end }}?
diff --git a/src/templates/booking/booking_detail.html b/src/templates/booking/booking_detail.html
index ac00e22..918f5af 100644
--- a/src/templates/booking/booking_detail.html
+++ b/src/templates/booking/booking_detail.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load staticfiles %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block extrahead %}
     {{block.super}}
@@ -19,13 +19,13 @@
 
 <div class="container-fluid">
     <div class="row">
-        <div class="col-lg-4">
-            <div class="panel panel-default">
-                <div class="panel-heading clearfix">
+        <div class="col-12 col-lg-5">
+            <div class="card mb-4">
+                <div class="card-header d-flex">
                     <h4 style="display: inline;">Overview</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="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button>
                 </div>
-                <div class="panel-body collapse in" id="panel_overview">
+                <div class="card-body collapse show" id="panel_overview">
                     <table class="table">
                         <tr>
                             <td>Purpose</td>
@@ -60,12 +60,12 @@
             </div>
             <div class="row">
                 <div class="col-lg-12">
-                    <div class="panel panel-default">
-                        <div class="panel-heading clearfix">
+                    <div class="card">
+                        <div class="card-header d-flex">
                             <h4 style="display: inline;">Pod</h4>
-                            <a data-toggle="collapse" data-target="#pod_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
+                            <button data-toggle="collapse" data-target="#pod_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
                         </div>
-                        <div class="panel-body pod_panel collapse in" id="pod_panel">
+                        <div class="card-body collapse show" id="pod_panel">
                             <table class="table">
                             {% for host in booking.resource.hosts.all %}
                             <tr>
@@ -177,14 +177,14 @@
                 </div>
             </div>
         </div>
-        <div class="col-lg-8">
-            <div class="panel panel-default">
-                <div class="panel-heading clearfix">
+        <div class="col">
+            <div class="card mb-4">
+                <div class="card-header d-flex">
                     <h4 style="display: inline;">Deployment Progress</h4>
                     <p style="display: inline; margin-left: 10px;">  These are the different tasks that have to be completed before your deployment is ready</p>
-                   <a data-toggle="collapse" data-target="#panel_tasks" class="btn pull-right" style="line-height: 1;" >Expand</a>
+                    <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button>
                 </div>
-                <div class="panel-body collapse in" id="panel_tasks">
+                <div class="card-body collapse show" id="panel_tasks">
                     <table class="table">
                         <style>
                             .progress {
@@ -269,15 +269,15 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col-lg-8">
-                    <div class="panel panel-default">
-                        <div class="panel-heading clearfix">
+                <div class="col">
+                    <div class="card">
+                        <div class="card-header d-flex">
                             <h4 style="display: inline;">PDF</h4>
-                            <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
+                            <button data-toggle="collapse" data-target="#pdf_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
                         </div>
-                        <div class="panel-body collapse in" id="pdf_panel" style="padding: 0px;">
+                        <div class="card-body collapse show" id="pdf_panel" style="padding: 0px;">
                             <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 15px; border: none;">
-{{pdf}}
+                                {{pdf}}
                             </pre>
                         </div>
                     </div>
diff --git a/src/templates/booking/booking_list.html b/src/templates/booking/booking_list.html
index a245450..591ecc9 100644
--- a/src/templates/booking/booking_list.html
+++ b/src/templates/booking/booking_list.html
@@ -1,44 +1,38 @@
 {% extends "base.html" %}
 {% load staticfiles %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block extrahead %}
     {{ block.super }}
     <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+    <link href="{% static "bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
           rel="stylesheet">
 
     <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}"
+    <link href="{% static "bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
           rel="stylesheet">
 {% endblock extrahead %}
 
 {% block content %}
     <div class="row">
-                <div class="panel-body">
-                    <div class="dataTables_wrapper">
-                        <table class="table table-striped table-bordered table-hover" id="table"
-                               cellspacing="0"
-                               width="100%">
-                            {% include "booking/booking_table.html" %}
-                        </table>
-                    </div>
-                    <!-- /.table-responsive -->
-                <!-- /.panel-body -->
-            <!-- /.panel -->
+        <div class="col">
+            <div class="panel-body">
+                <div class="dataTables_wrapper">
+                    <table class="table table-striped table-bordered table-hover" id="table"
+                            cellspacing="0"
+                            width="100%">
+                        {% include "booking/booking_table.html" %}
+                    </table>
+                </div>
+            </div>
         </div>
-        <!-- /.col-lg-12 -->
     </div>
 {% endblock content %}
 
 {% block extrajs %}
     <!-- DataTables JavaScript -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
-          rel="stylesheet">
-
-
-    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
-    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>
+    <script src={% static "bower_components/datatables.net/js/jquery.dataTables.min.js" %}></script>
+    <script src={% static "bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script>
 
     <script type="text/javascript">
         $(document).ready(function () {
diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html
index 2fbd035..b669c8e 100644
--- a/src/templates/booking/quick_deploy.html
+++ b/src/templates/booking/quick_deploy.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load staticfiles %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 {% block content %}
 <style>
     .grid_container {
diff --git a/src/templates/booking/stats.html b/src/templates/booking/stats.html
index 42eebdd..8bc68cd 100644
--- a/src/templates/booking/stats.html
+++ b/src/templates/booking/stats.html
@@ -41,17 +41,28 @@ function getData(){
 {% endblock %}
 
 {% block content %}
-    <p>Number of days to plot: </p>
-    <div class="form-group">
-        <input id="number_days" type="number" class="form-control" min="1" step="1" style="display:inline;width:200px"/>
-        <button class="btn btn-primary" onclick="getData();" style="display:inline;">Submit</button>
-    </div>
-    <div id="all_graph_container">
-        <div id="booking_graph_wrapper">
-            <div id="booking_graph_container"/>
+    <div class="container-fluid">
+        <div class="row">
+                <div class="col">
+                        <p>Number of days to plot: </p>
+                        <div class="form-group">
+                            <input id="number_days" type="number" class="form-control" min="1" step="1" style="display:inline;width:200px"/>
+                            <button class="btn btn-primary" onclick="getData();" style="display:inline;">Submit</button>
+                        </div>
+                </div>
         </div>
-        <div id="user_graph_wrapper" >
-            <div id="user_graph_container"/>
+        <div class="row">
+            <div class="col-12 col-md-10">
+                <!-- These graphs do NOT get redrawn when the browser size is changed -->
+                <div id="all_graph_container border" class="mw-100">
+                    <div id="booking_graph_wrapper">
+                        <div id="booking_graph_container"/>
+                    </div>
+                    <div id="user_graph_wrapper">
+                        <div id="user_graph_container"/>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <script>
diff --git a/src/templates/booking/steps/booking_confirm.html b/src/templates/booking/steps/booking_confirm.html
index 9c7e951..40c30a9 100644
--- a/src/templates/booking/steps/booking_confirm.html
+++ b/src/templates/booking/steps/booking_confirm.html
@@ -1,7 +1,7 @@
 {% extends "workflow/viewport-element.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}
 
diff --git a/src/templates/booking/steps/booking_meta.html b/src/templates/booking/steps/booking_meta.html
index 410a7c8..710d4ee 100644
--- a/src/templates/booking/steps/booking_meta.html
+++ b/src/templates/booking/steps/booking_meta.html
@@ -1,7 +1,7 @@
 {% extends "workflow/viewport-element.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}
 
diff --git a/src/templates/booking/steps/resource_select.html b/src/templates/booking/steps/resource_select.html
index 7ccceb3..382316f 100644
--- a/src/templates/booking/steps/resource_select.html
+++ b/src/templates/booking/steps/resource_select.html
@@ -1,7 +1,7 @@
 {% extends "workflow/viewport-element.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}
 
diff --git a/src/templates/booking/steps/swconfig_select.html b/src/templates/booking/steps/swconfig_select.html
index 15c79d8..60a0df7 100644
--- a/src/templates/booking/steps/swconfig_select.html
+++ b/src/templates/booking/steps/swconfig_select.html
@@ -1,7 +1,7 @@
 {% extends "workflow/viewport-element.html" %}
 {% load staticfiles %}
 
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}