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, 168 insertions, 134 deletions

diff --git a/src/templates/base.html b/src/templates/base.html
index 1c83a0e..62a9ed5 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -1,52 +1,51 @@
 {% extends "layout.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 {% load staticfiles %}
 {% block extrahead %}
 
 
-    <!-- Custom CSS -->
-    <link href="{% static "bower_components/startbootstrap-sb-admin-2-blackrockdigital/dist/css/sb-admin-2.css" %}"
-          rel="stylesheet">
-    <link href="{% static "css/theme.css" %}" rel="stylesheet">
-    <link href="{% static "css/detail_view.css" %}" rel="stylesheet">
-
+<!-- Custom CSS -->
+<link href="{% static "css/detail_view.css" %}" rel="stylesheet">
+<link href="{% static "css/base.css" %}" rel="stylesheet">
 <script type="text/javascript">
-    function cwf(type)
-    {
+    function cwf(type) {
         $.ajax({
             type: "POST",
             url: "/",
-            data: {"create":type},
-            beforeSend: function(request) {
+            data: {
+                "create": type
+            },
+            beforeSend: function (request) {
                 request.setRequestHeader("X-CSRFToken",
-                $('input[name="csrfmiddlewaretoken"]').val()
+                    $('input[name="csrfmiddlewaretoken"]').val()
                 );
             }
         }).done(function (data) {
             window.location.replace("/wf/");
-        }).fail(function(jqxHR, textstatus) {
-            alert("Something went wrong...");});
+        }).fail(function (jqxHR, textstatus) {
+            alert("Something went wrong...");
+        });
     }
-       function continue_wf()
-    {
+
+    function continue_wf() {
         window.location.replace("/wf/");
     }
 
-    function toggle_create_drop()
-    {
+    function toggle_create_drop() {
         drop_div = document.getElementById("create_drop");
 
-        if (drop_div.style.display === "none")
-        {
+        if (drop_div.style.display === "none") {
             drop_div.style.display = "inherit";
-        }
-        else
-        {
+        } else {
             drop_div.style.display = "none";
         }
     }
 </script>
 <style>
+    .navbar {
+        min-width: 200px;
+    }
+
     .create_drop {
         display: none;
         width: 100%;
@@ -66,137 +65,172 @@
         border-top: 1px solid #E7E7E7;
         border-bottom: 1px solid #E7E7E7;
     }
+
+    #wrapper {
+        height: 100vh;
+    }
 </style>
 
 {% endblock %}
 {% block basecontent %}
-    <div id="wrapper">
-        <!-- Navigation -->
-        <nav class="navbar navbar-default navbar-static-top" role="navigation"
-             style="margin-bottom: 0">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle" data-toggle="collapse"
-                        data-target=".navbar-collapse">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a href="https://www.opnfv.org/" class="navbar-left"><img
-                        src="{% static "img/opnfv-logo.png" %}"></a>
-                <a class="navbar-brand" href={% url 'dashboard:index' %}>Pharos Dashboard</a>
+<div id="wrapper" class="d-flex flex-column">
+    <!-- Navigation -->
+    <nav class="navbar navbar-light bg-light navbar-fixed-top border-bottom py-0" role="navigation" style="margin-bottom: 0">
+        <div class="container-fluid">
+            <div class="col order-2 order-lg-1 text-center text-lg-left">
+                <a href="https://www.opnfv.org/" class="navbar-brand">
+                    <img src="{% static "img/opnfv-logo.png" %}">
+                </a>
+                <a class="navbar-brand" href={% url 'dashboard:index' %}>
+                    Pharos Dashboard
+                </a>
             </div>
             <!-- /.navbar-header -->
+            <div class="col-2 order-1 order-lg-3 d-lg-none">
+                <button class="btn border" type="button" data-toggle="collapse" data-target="#sidebar"
+                    aria-expanded="false" aria-controls="sidebar">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+            <div class="col-2 order-3">
+                <ul class="nav ml-auto">
+                    <li class="dropdown ml-auto">
+                        <a class="nav-link p-0 text-dark p-2" data-toggle="dropdown" href="#">
+                            {% if request.user.username %}
+                                {{request.user.username}}
+                            {% else %}
+                                <i class="fas fa-user"></i>
+                            {% endif %}
+                            <i class="fas fa-caret-down rotate"></i>
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            {% if user.is_authenticated %}
+                                <a href="{% url 'account:settings' %}" class="text-dark dropdown-item">
+                                    <i class="fas fa-cog"></i>
+                                    Settings
+                                </a>
+                                <a href="{% url 'account:logout' %}?next={{ request.path }}" class="text-dark dropdown-item">
+                                    <i class="fas fa-sign-out-alt"></i>
+                                    Logout
+                                </a>
+                            {% else %}
+                                <a href="{% url 'account:login' %}" class="text-dark dropdown-item">
+                                    <i class="fas fa-sign-in-alt"></i>
+                                    Login with Jira
+                                </a>
+                            {% endif %}
+                        </div> <!-- End dropdown-menu -->
+                    </li> <!-- End dropdown -->
+                </ul>
+            </div> <!-- End top right account menu -->
+        </div>
+    </nav>
+    <!-- /.navbar-top-links -->
 
-            <ul class="nav navbar-top-links navbar-right">
-                <li class="dropdown">
-                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
-                    </a>
-                    <ul class="dropdown-menu dropdown-user">
-                        {% if user.is_authenticated %}
-                            <li><a href="{% url 'account:settings' %}"><i
-                                    class="fa fa-gear fa-fw"></i>
-                                Settings</a>
-                            </li>
-                            <li class="divider"></li>
-                            <li><a href="{% url 'account:logout' %}?next={{ request.path }}"><i
-                                    class="fa fa-sign-out fa-fw"></i>
-                                Logout</a>
-                            </li>
-                        {% else %}
-                            <li><a href="{% url 'account:login' %}"><i
-                                    class="fa fa-sign-in fa-fw"></i>
-                                Login with Jira</a>
-                            <li>
-                        {% endif %}
-                    </ul>
-                    <!-- /.dropdown-user -->
-                </li>
-                <!-- /.dropdown -->
-            </ul>
-            <!-- /.navbar-top-links -->
-
-            <div class="navbar-default sidebar" role="navigation">
-                <div class="sidebar-nav navbar-collapse">
-                    <ul class="nav" id="side-menu">
-                        <li>
-                            <a href="/"><i class="fa fa-fw"></i>Home</a>
-                        </li>
-                        <li style="width: 100%;">
-                            <a href="javascript:toggle_create_drop();"><i class="fa fa-fw"></i>Create<i
-                                    class="fa fa-fw fa-caret-down"></i>
+    <!-- Page Content -->
+    <div class="container-fluid d-lg-flex flex-lg-grow-1 px-0">
+        <div class="row h-100 w-100 mx-0">
+            <div class="col-12 col-lg-auto px-0 border-right border-left bg-light" role="navigation">
+                <nav class="navbar navbar-expand-lg border-bottom p-0 w-100">
+                    <div class="collapse navbar-collapse" id="sidebar">
+                        <div class="list-group list-group-flush w-100 bg-light">
+                            <a href="/" class="list-group-item list-group-item-action bg-light">
+                                Home
+                            </a>
+                            {% csrf_token %}
+                            <a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
+                                href="#createList" role="button">
+                                Create <i class="fas fa-angle-down rotate"></i>
+                            </a>
+                            <div class="collapse" id="createList">
+                                <a href="/booking/quick/" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    Express Booking
+                                </a>
+                                <a href="#" onclick="cwf(0)" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    Book a Pod
+                                </a>
+                                <a href="#" onclick="cwf(1)" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    Design a Pod
+                                </a>
+                                <a href="#" onclick="cwf(2)" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    Configure a Pod
+                                </a>
+                                <a href="#" onclick="cwf(3)" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    Create a Snapshot
                                 </a>
-                                {% csrf_token %}
-                                <div id="create_drop" class="create_drop" style="display:none">
-                                    <button class="btn drop_btn" onclick="location.href='/booking/quick/'">Express Booking</a>
-                                    <button class="btn drop_btn" onclick="cwf(0)">Book a Pod</button>
-                                    <button class="btn drop_btn" onclick="cwf(1)">Design a Pod</button>
-                                    <button class="btn drop_btn" onclick="cwf(2)">Configure a Pod</button>
-                                    <button class="btn drop_btn" onclick="cwf(3)">Create a Snapshot</button>
-                                    <button class="btn drop_btn" onclick="cwf(4)">Configure OPNFV</button>
-                                </div>
-                        </li>
-                        <li>
-                            <a href="{% url 'resource:hosts' %}"><i
-                                    class="fa fa-fw"></i>Hosts
+                                <a href="#" onclick="cwf(4)" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    Configure OPNFV
                                 </a>
-                        </li>
-                        {% if user.is_authenticated %}
-                        <li>
-                            <a href="{% url 'account:users' %}"><i
-                                    class="fa fa-fw"></i>User List
+                            </div>
+                            <a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action bg-light">
+                                Hosts
                             </a>
-                        </li>
-                        {% endif %}
-                        <li>
-                            <a href="{% url 'booking:list' %}"><i
-                                    class="fa fa-fw"></i>Booking List
+                            {% if user.is_authenticated %}
+                                <a href="{% url 'account:users' %}" class="list-group-item list-group-item-action bg-light">
+                                    User List
+                                </a>
+                            {% endif %}
+                            <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action bg-light">
+                                Booking List
                             </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'booking:stats' %}"><i
-                                    class="fa fa-fw"></i>Booking Statistics</a>
-                        </li>
-                        <li>
-                            <a href="{% url 'account:my-account' %}"><i
-                                    class="fa fa-fw"></i>Account
+                            <a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action bg-light">
+                                Booking Statistics
                             </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'dashboard:all_labs' %}"><i
-                                    class="fa fa-fw"></i>Lab Info
+                            <!-- <a href="{% url 'account:my-account' %}" class="list-group-item list-group-item-action bg-light">
+                                Account
+                            </a> -->
+                            <a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
+                                href="#accountList" role="button">
+                                Account <i class="fas fa-angle-down rotate"></i>
                             </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'notifier:messages' %}"><i
-                                    class="fa fa-fw"></i>Inbox
+                            <div class="collapse" id="accountList">
+                                <a href="{% url 'account:my-resources' %}" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    My Resources
+                                </a>
+                                <a href="{% url 'account:my-bookings' %}" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    My Bookings
+                                </a>
+                                <a href="{% url 'account:my-configurations' %}" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    My Configurations
+                                </a>
+                                <a href="{% url 'account:my-images' %}" class="list-group-item list-group-item-action list-group-item-secondary">
+                                    My Snapshots
+                                </a>
+                            </div>
+                            <a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action bg-light">
+                                Lab Info
                             </a>
-                        </li>
-                    </ul>
-                </div>
-                <!-- /.sidebar-collapse -->
+                            <a href="{% url 'notifier:messages' %}" class="list-group-item list-group-item-action bg-light">
+                                Inbox
+                            </a>
+                        </div>
+                    </div>
+                </nav>
+                <!--/.well -->
             </div>
-            <!-- /.navbar-static-side -->
-        </nav>
+            <!--/span-->
 
-        <!-- Page Content -->
-        <div id="page-wrapper">
-            {% if title %}
-            <div class="row">
-                <div class="col-lg-12">
-                    <h1 class="page-header">{{ title }}</h1>
+            <div class="col flex-grow-1 d-flex flex-column">
+                {% if title %}
+                <div class="row flex-shrink-1">
+                    <div class="col-lg-12">
+                        <h1 class="page-header">{{ title }}</h1>
+                    </div>
+                    <!-- /.col-lg-12 -->
                 </div>
-                <!-- /.col-lg-12 -->
+                {% endif %}
+                <div id="bsm">{% bootstrap_messages %}</div>
+                <!-- Content block placed here -->
+                {% block content %}
+                {% endblock content %}
             </div>
-            {% endif %}
-            <div id="bsm">{% bootstrap_messages %}</div>
+            <!--/span-->
 
-            {% block content %}
 
-            {% endblock content %}
         </div>
-        <!-- /#page-wrapper -->
+        <!--/row-->
     </div>
-    <!-- /#wrapper -->
+    <!-- /#page-wrapper -->
+</div>
+<!-- /#wrapper -->
 {% endblock basecontent %}