Merge "Add bootstrap 4 support"

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 %}