Replace and change CSS

Fix animation bugs
Fix layout issues
Replace custom CSS to bootstrap classes
Remove unused files
Change code to use es6 syntax
Add dropdown styles

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

9 files changed, 221 insertions, 555 deletions

diff --git a/src/templates/dashboard/genericselect.html b/src/templates/dashboard/genericselect.html
index 441d8dc..f54cd90 100644
--- a/src/templates/dashboard/genericselect.html
+++ b/src/templates/dashboard/genericselect.html
@@ -5,77 +5,18 @@
 
 {% block content %}
 
-<style>
-    #page-wrapper {
-        display: flex;
-        flex-direction: column;
-    }
-
-    #{{select_type}}_form_div div {
-    }
-
-    #{{select_type}}_form_div > * {
-        margin-left: 10px;
-        margin-right: 10px;
-        margin-bottom: 20px;
-    }
-
-    #{{select_type}}_form_div div * {
-    }
-
-    #{{select_type}}_form_div {
-        flex: 1;
-        margin: 30px;
-        display: flex;
-        flex-direction: column;
-    }
-
-    #select_section {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-    }
-
-    #{{select_type}}_select_form {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .autocomplete {
-        flex: 1;
-    }
-
-    #create_section {
-    }
-
-    #select_header_section {
-    }
-
-    h3 {
-        margin-top: 0;
-        margin-bottom: 0;
-        vertical-align: middle;
-    }
-
-    .divider {
-        border-top: 1px solid #ccc;
-    }
-
-
-</style>
-
-<div id="{{select_type}}_form_div">
+<div id="{{select_type}}_form_div" class="h-100 border d-flex flex-column p-4">
     <h3 id="create_section">Create a Resource
         <button class="btn btn-primary {% if disabled %} disabled {% endif %}"
             {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})"
             {% endif %}>Here
         </button>
     </h3>
-    <div class="divider"></div>
+    <div class="border-top"></div>
     <h3 id="select_header_section">Or select from the list below:</h3>
-    <div id="select_section">
-        <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform">
+    <div id="select_section" class="d-flex flex-column">
+        <form id="{{select_type}}_select_form" method="post" action=""
+            class="form d-flex flex-column" id="{{select_type}}selectorform">
         {% csrf_token %}
         {{ form|default:"<p>no form loaded</p>" }}
         {% buttons %}
diff --git a/src/templates/dashboard/grid.html b/src/templates/dashboard/grid.html
deleted file mode 100644
index ca47f44..0000000
--- a/src/templates/dashboard/grid.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "base.html" %}
-{% load staticfiles %}
-{% if script %} <script>{{ script }}</script> {% endif %}
-{% block content %}
-    {% for item in grid_items %}
-        <div class="grid-item" style="border:2px; border-style:solid; border-color:black; margin:3px">
-            {{ item }}
-        </div>
-    {% endfor %}
-{% endblock content %}
diff --git a/src/templates/dashboard/host_profile_detail.html b/src/templates/dashboard/host_profile_detail.html
index abc7648..f65d4fe 100644
--- a/src/templates/dashboard/host_profile_detail.html
+++ b/src/templates/dashboard/host_profile_detail.html
@@ -18,7 +18,6 @@
       }
     );
 </script>
-
 <style media="screen">
 
   @media screen and (min-width: 0px) and (max-width: 767px)
diff --git a/src/templates/dashboard/lab_detail.html b/src/templates/dashboard/lab_detail.html
index 336b32e..3c41caf 100644
--- a/src/templates/dashboard/lab_detail.html
+++ b/src/templates/dashboard/lab_detail.html
@@ -11,80 +11,92 @@
     <div class="col-lg-4">
         <div class="card my-2">
             <div class="card-header d-flex">
-               <h4>Lab Profile</h4>
-               <button class="btn btn-outline-secondary ml-auto" data-toggle="collapse" data-target="#panel_overview">Expand</button>
+                <h4>Lab Profile</h4>
+                <button class="btn btn-outline-secondary ml-auto" data-toggle="collapse" data-target="#panel_overview">Expand</button>
             </div>
-            <div id="panel_overview" class="card-body collapse show">
-                <table class="table">
-                    <tr>
-                        <td>Lab Name: </td><td>{{lab.name}}</td>
-                    </tr>
-                    <tr>
-                        <td>Lab Location: </td><td>{{lab.location}}</td>
-                    </tr>
-                    <tr>
-                        <td>Lab Email: </td>
-                        <td>{{lab.contact_email}}</td>
-                    </tr>
-                    {% if lab.contact_phone %}
-                    <tr>
-                        <td>Lab Phone: </td>
-                        <td>{{lab.contact_phone}}</td>
-                    </tr>
-                    {% endif %}
-                    <tr>
-                        <td>Lab Status: </td>
-                        {% if lab.status < 100 %}
-                        <td><div style="border-radius: 50%; background:#40B976; height: 20px; width: 20px; display: inline-block;"></div>
-                        Up</td>
-                        {% elif lab.status < 200 %}
-                        <td>
-                        <div style="border-radius: 50%; background:#eeee00; height: 20px; width: 20px; display: inline-block;"></div>
-                        Temporarily Offline</td>
-                        {% else %}
-                        <td>
-                        <div style="border-radius: 50%; background:#e50000; height: 20px; width: 20px; display: inline-block;"></div>
-                        Offline Indefinitely</td>
+            <div class="collapse show" id="panel_overview">
+                <div class="card-body">
+                    <table class="table">
+                        <tr>
+                            <td>Lab Name: </td>
+                            <td>{{lab.name}}</td>
+                        </tr>
+                        <tr>
+                            <td>Lab Location: </td>
+                            <td>{{lab.location}}</td>
+                        </tr>
+                        <tr>
+                            <td>Lab Email: </td>
+                            <td>{{lab.contact_email}}</td>
+                        </tr>
+                        {% if lab.contact_phone %}
+                            <tr>
+                                <td>Lab Phone: </td>
+                                <td>{{lab.contact_phone}}</td>
+                            </tr>
                         {% endif %}
-                    </tr>
-                </table>
+                        <tr>
+                            <td>Lab Status: </td>
+                            {% if lab.status < 100 %}
+                                <td>
+                                    <div class="rounded-circle bg-success square-20 d-inline-block"></div>
+                                    Up
+                                </td>
+                            {% elif lab.status < 200 %}
+                                <td>
+                                    <div class="rounded-circle bg-warning square-20 d-inline-block"></div>
+                                    Temporarily Offline
+                                </td>
+                            {% else %}
+                                <td>
+                                    <div class="rounded-circle bg-danger square-20 d-inline-block"></div>
+                                    Offline Indefinitely
+                                </td>
+                            {% endif %}
+                        </tr>
+                    </table>
+                </div>
             </div>
         </div>
         <div class="card my-2">
             <div class="card-header d-flex">
                 <h4 class="d-inline-block">Host Profiles</h4>
-               <button data-toggle="collapse" data-target="#profile_panel" class="btn btn-outline-secondary ml-auto" style="line-height: 1;" >Expand</button>
+                <button data-toggle="collapse" data-target="#profile_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
             </div>
-            <div id="profile_panel" class="card-body collapse show">
-                <table class="table">
-                    {% for profile in hostprofiles %}
-                    <tr>
-                        <td>{{profile.name}}</td>
-                        <td>{{profile.description}}</td>
-                        <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-info">Profile</a></td>
-                    </tr>
-                    {% endfor %}
-                </table>
+            <div class="collapse show" id="profile_panel">
+                <div class="card-body">
+                    <table class="table">
+                        {% for profile in hostprofiles %}
+                            <tr>
+                                <td>{{profile.name}}</td>
+                                <td>{{profile.description}}</td>
+                                <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-info">Profile</a></td>
+                            </tr>
+                        {% endfor %}
+                    </table>
+                </div>
             </div>
         </div>
 
 
         <div class="card my-2">
             <div class="card-header d-flex">
-                <h4 style="display: inline;">Networking Capabilities</h4>
-            <button data-toggle="collapse" data-target="#network_panel" class="btn btn-outline-secondary ml-auto" style="line-height: 1;" >Expand</button>
+                <h4 class="d-inline">Networking Capabilities</h4>
+                <button data-toggle="collapse" data-target="#network_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
             </div>
 
-            <div class="card-body collapse show" id="network_panel">
-                <table class="table">
-                    <tr>
-                        <td>Block Size: (number of VLANs allowed per deployment)</td><td>{{lab.vlan_manager.block_size}}</td>
-                    </tr>
-                    <tr>
-                        <td>Overlapping Vlans Allowed (user can pick which VLANs they wish to use): </td>
-                        <td>{{lab.vlan_manager.allow_overlapping}}</td>
-                    </tr>
-                </table>
+            <div class="collapse show" id="network_panel">
+                <div class="card-body">
+                    <table class="table">
+                        <tr>
+                            <td>Block Size: (number of VLANs allowed per deployment)</td><td>{{lab.vlan_manager.block_size}}</td>
+                        </tr>
+                        <tr>
+                            <td>Overlapping Vlans Allowed (user can pick which VLANs they wish to use): </td>
+                            <td>{{lab.vlan_manager.allow_overlapping}}</td>
+                        </tr>
+                    </table>
+                </div>
             </div>
         </div>
         <div class="card my-2">
@@ -92,23 +104,25 @@
                 <h4>Images</h4>
                 <button data-toggle="collapse" data-target="#image_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
             </div>
-            <div class="card-body collapse show" id="image_panel">
-                <table class="table">
-                    <tr>
-                        <th>Name</th>
-                        <th>Owner</th>
-                        <th>For Host Type</th>
-                        <th>Description</th>
-                    </tr>
-                    {% for image in images %}
-                    <tr>
-                        <td>{{image.name}}</td>
-                        <td>{{image.owner}}</td>
-                        <td>{{image.host_type}}</td>
-                        <td>{{image.description}}</td>
-                    </tr>
-                    {% endfor %}
-                </table>
+            <div class="collapse show" id="image_panel">
+                <div class="card-body">
+                    <table class="table">
+                        <tr>
+                            <th>Name</th>
+                            <th>Owner</th>
+                            <th>For Host Type</th>
+                            <th>Description</th>
+                        </tr>
+                        {% for image in images %}
+                            <tr>
+                                <td>{{image.name}}</td>
+                                <td>{{image.owner}}</td>
+                                <td>{{image.host_type}}</td>
+                                <td>{{image.description}}</td>
+                            </tr>
+                        {% endfor %}
+                    </table>
+                </div>
             </div>
         </div>
 
@@ -120,29 +134,31 @@
                 <button data-toggle="collapse" data-target="#lab_hosts_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
             </div>
 
-            <div class="card-body collapse show" id="lab_hosts_panel">
-                <table class="table">
-                    <tr>
-                        <th>Name</th>
-                        <th>Profile</th>
-                        <th>Booked</th>
-                        <th>Working</th>
-                        <th>Vendor</th>
-                    </tr>
-                    {% for host in lab.host_set.all %}
-                    <tr>
-                        <td>{{host.labid}}</td>
-                        <td>{{host.profile}}</td>
-                        <td>{{host.booked}}</td>
-                        {% if host.working %}
-                        <td style="background-color: #40B976;">{{host.working}}</td>
-                        {% else %}
-                        <td>{{host.working}}</td>
-                        {% endif %}
-                        <td>{{host.vendor}}</td>
-                    </tr>
-                    {% endfor %}
-                </table>
+            <div class="collapse show" id="lab_hosts_panel">
+                <div class="card-body">
+                    <table class="table">
+                        <tr>
+                            <th>Name</th>
+                            <th>Profile</th>
+                            <th>Booked</th>
+                            <th>Working</th>
+                            <th>Vendor</th>
+                        </tr>
+                        {% for host in lab.host_set.all %}
+                            <tr>
+                                <td>{{host.labid}}</td>
+                                <td>{{host.profile}}</td>
+                                <td>{{host.booked}}</td>
+                                {% if host.working %}
+                                    <td class="bg-success text-white">{{host.working}}</td>
+                                {% else %}
+                                    <td>{{host.working}}</td>
+                                {% endif %}
+                                <td>{{host.vendor}}</td>
+                            </tr>
+                        {% endfor %}
+                    </table>
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/templates/dashboard/lab_list.html b/src/templates/dashboard/lab_list.html
index 9cde80c..2efebfc 100644
--- a/src/templates/dashboard/lab_list.html
+++ b/src/templates/dashboard/lab_list.html
@@ -1,26 +1,28 @@
 {% extends "base.html" %}
 {% block content %}
 <h2>Labs</h2>
-<div class="card_container">
+<div class="row">
     {% for lab in labs %}
-    <div class="card">
-        <div class="card-header">
-            <h3 class="mt-2">{{lab.name}}</h3>
-        </div>
-        <div class="p-4">
-            <ul class="list-group">
-                <li class="list-group-item">name: {{lab.name}}</li>
-                <li class="list-group-item">description: {{lab.description}}</li>
-                <li class="list-group-item">location: {{lab.location}}</li>
-                {% if lab.status == 0 %}
-                <li class="list-group-item">status: Up</li>
-                {% elif lab.status == 100 %}
-                <li class="list-group-item">status: Down for Maintenance</li>
-                {% elif lab.status == 200 %}
-                <li class="list-group-item">status: Down</li>
-                {% endif %}
-            </ul>
-            <a class="btn btn-primary mt-4 w-100" href="/lab/{{lab.name}}/">Details</a>
+    <div class="p-2 col-12 col-md-6 col-lg-4 col-xl-3">
+        <div class="card h-100">
+            <div class="card-header">
+                <h3 class="mt-2">{{lab.name}}</h3>
+            </div>
+            <div class="p-4">
+                <ul class="list-group">
+                    <li class="list-group-item">name: {{lab.name}}</li>
+                    <li class="list-group-item">description: {{lab.description}}</li>
+                    <li class="list-group-item">location: {{lab.location}}</li>
+                    {% if lab.status == 0 %}
+                    <li class="list-group-item">status: Up</li>
+                    {% elif lab.status == 100 %}
+                    <li class="list-group-item">status: Down for Maintenance</li>
+                    {% elif lab.status == 200 %}
+                    <li class="list-group-item">status: Down</li>
+                    {% endif %}
+                </ul>
+                <a class="btn btn-primary mt-4 w-100" href="/lab/{{lab.name}}/">Details</a>
+            </div>
         </div>
     </div>
     {% endfor %}
diff --git a/src/templates/dashboard/landing.html b/src/templates/dashboard/landing.html
index e6a235f..d4776cc 100644
--- a/src/templates/dashboard/landing.html
+++ b/src/templates/dashboard/landing.html
@@ -2,7 +2,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="" style="text-align: center;">
+<div class="text-center">
     {% if not request.user.is_anonymous %}
     {% if not request.user.userprofile.ssh_public_key %}
     <div class="alert alert-danger" role="alert">
@@ -15,53 +15,11 @@
 </div>
 {% csrf_token %}
 
-<style>
-    .wf_create {
-        display: inline-block;
-        text-align: center;
-    }
-
-    .wf_create_div {
-        text-align: center;
-    }
-
-    .hidden_form {
-        display: none;
-    }
-
-    .panel {
-        border: none;
-    }
-
-    .panels {
-        display: grid;
-        grid-template-columns: 33% 34% 33%;
-    }
-
-    .landing_container {
-        display: grid;
-        grid-template-columns: 1fr 30px 1fr;
-    }
-
-    .grid_panel {
-        padding: 30px;
-    }
-
-    .btn-primary {
-        margin: 10px;
-    }
-
-    h2 {
-        border-bottom: 1px solid #cccccc;
-    }
-
-    h1 {}
-</style>
 <div class="container-fluid">
     <div class="row">
         <!-- About us -->
         <div class="col-12 col-lg-6 mb-4">
-            <h2>About Us:</h2>
+            <h2 class="border-bottom">About Us:</h2>
             <p>The Lab as a Service (LaaS) project aims to help in the development and testing of LFN projects such as
                 OPNFV
                 by hosting hardware and providing access to the community. Currently, the only participating lab is the
@@ -73,56 +31,54 @@
         </div>
         <!-- Get started -->
         <div class="col-12 col-lg-6 mb-4">
-            <h2>Get Started:</h2>
+            <h2 class="border-bottom">Get Started:</h2>
             {% if request.user.is_anonymous %}
-            <h4 style="text-align:center;">To get started, please log in with your <a href="/accounts/login">Linux
-                    Foundation Jira account</a></h4>
+            <h4 class="text-center">
+                To get started, please log in with your <a href="/accounts/login">Linux Foundation Jira account</a>
+            </h4>
             {% else %}
             <p>To get started, book a server below:</p>
-            <a class="wf_create btn btn-primary"
-                style="display: flex; flex-direction: column; justify-content: center; margin: 20px; height: 100pt; vertical-align: middle; text-align: center; color: #FFF;"
+            <a class="btn btn-primary d-flex flex-column justify-content-center align-content-center border text-white p-4"
                 href="/booking/quick/">
-                <p style="font-size: xx-large">Book a Server</p>
+                <h4>Book a Server</h4>
             </a>
-            <p>PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options
+            <p class="mt-4">PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options
                 below:
             </p>
-            <div class='container'>
-                <div class="row">
-                    <div class="col-12 col-xl-4">
-                        <button class="wf_create btn btn-primary w-100" onclick="cwf(0)">Book a Pod</button>
-                    </div>
-                    <div class="col-12 col-xl-4">
-                        <button class="wf_create btn btn-primary w-100" onclick="cwf(1)">Design a Pod</button>
-                    </div>
-                    <div class="col-12 col-xl-4">
-                        <button class="wf_create btn btn-primary w-100" onclick="cwf(2)">Configure a Pod</button>
-                    </div>
+            <div class="row">
+                <div class="col-12 col-xl-4">
+                    <button class="btn btn-primary w-100" onclick="cwf(0)">Book a Pod</button>
+                </div>
+                <div class="col-12 col-xl-4">
+                    <button class="btn btn-primary w-100" onclick="cwf(1)">Design a Pod</button>
+                </div>
+                <div class="col-12 col-xl-4">
+                    <button class="btn btn-primary w-100" onclick="cwf(2)">Configure a Pod</button>
                 </div>
-                {% endif %}
             </div>
+            {% endif %}
         </div>
         <!-- Returning users -->
         {% if not request.user.is_anonymous %}
         <div class="col-12 col-lg-6 offset-lg-6 mb-4 mt-lg-4">
-            <h2 class="ht-4">Returning Users:</h2>
+            <h2 class="ht-4 border-bottom">Returning Users:</h2>
             <p>If you're a returning user, some of the following options may be of interest:</p>
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-xl-4">
-                        <button class="wf_create btn btn-primary w-100" onclick="cwf(3)">Snapshot a Host</button>
-                    </div>
-                    <div class="col-12 col-xl-4">
-                        <a class="wf_create btn btn-primary w-100" href="{% url 'account:my-bookings' %}">My
-                            Bookings</a>
-                    </div>
-                    {% if manager == True %}
+            <div class="row">
+                <div class="col-12 col-xl-4">
+                    <button class="btn btn-primary w-100" onclick="cwf(3)">Snapshot a Host</button>
+                </div>
+                <div class="col-12 col-xl-4">
+                    <a class="btn btn-primary w-100" href="{% url 'account:my-bookings' %}">
+                        My Bookings
+                    </a>
+                </div>
+                {% if manager == True %}
                     <div class="col-12 col-xl-4">
-                        <button class="wf_continue btn btn-primary w-100" onclick="continue_wf()">Resume
-                            Workflow</button>
+                        <button class="btn btn-primary w-100" onclick="continue_wf()">
+                            Resume Workflow
+                        </button>
                     </div>
-                    {% endif %}
-                </div>
+                {% endif %}
             </div>
         </div>
         {% endif %}
@@ -155,7 +111,7 @@
     }
 </script>
 
-<div class="hidden_form" id="form_div">
+<div class="hidden_form d-none" id="form_div">
     <form method="post" action="" class="form" id="wf_selection_form">
         {% csrf_token %}
 
diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html
index 4302543..7fb8bcf 100644
--- a/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/src/templates/dashboard/multiple_select_filter_widget.html
@@ -1,139 +1,37 @@
 <script src="/static/js/dashboard.js">
 </script>
 
-<style>
-.object_class_wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    border: 0px;
-}
-
-.class_grid_wrapper {
-    border: 0px;
-    text-align: center;
-    border-right: 1px;
-    border-style: solid;
-    border-color: grey;
-}
-
-.class_grid_wrapper:last-child {
-    border-right: none;
-}
-
-.grid_wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-}
-
-.grid-item {
-    cursor: pointer;
-    border: 1px solid #cccccc;
-    border-radius: 5px;
-    margin: 20px;
-    height: 200px;
-    padding: 7px;
-    transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
-    box-shadow: 0 1px 1px rgba(0,0,0,.075);
-
-    display: flex;
-    flex-direction: column;
-}
-
-.grid-item > .btn:active, .grid-item > .btn:focus {
-    outline: none; !important;
-    box-shadow: none;
-}
-
-.grid-item-description {
-    flex: 1;
-}
-
-.selected_node {
-    border-color: #40c640;
-    box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(109, 243, 76, 0.6);
-    transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
-}
-
-.grid-item:hover:not(.selected_node):not(.disabled_node) {
-    box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100, 100, 100, 0.3);
-    transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
-}
-
-.disabled_node {
-    cursor: not-allowed;
-    background-color: #EFEFEF;
-}
-
-.disabled_node:hover {}
-
-.cleared_node {
-    background-color: #FFFFFF;
-}
-
-.grid-item-header {
-    font-weight: bold;
-    font-size: 20px;
-    margin-top: 10px;
-}
-
-.dropdown_item {
-    border: 1px;
-    border-style: solid;
-    border-color: lightgray;
-    border-radius: 5px;
-    margin: 20px;
-    padding: 2px;
-    grid-column: 1;
-    display: grid;
-    grid-template-columns: 1fr 3fr 1fr;
-    justify-items: center;
-}
-
-.dropdown_item > button {
-    margin: 2px;
-    justify-self: end;
-}
-
-.dropdown_item > h5 {
-    margin: auto;
-}
-
-.dropdown_item > input {
-    padding: 7px;
-    margin: 2px;
-    width: 90%;
-}
-
-#dropdown_wrapper {
-    display: grid;
-    grid-template-columns: 4fr 5fr;
-}
-</style>
-
 <input name="filter_field" id="filter_field" type="hidden"/>
-<div id="grid_wrapper" class="grid_wrapper">
-{% for object_class, object_list in display_objects %}
-    <div class="class_grid_wrapper">
-        <div style="display:inline-block;margin:auto">
-            <h4>{{object_class}}</h4>
-        </div>
-        <div id="{{object_class}}" class="object_class_wrapper">
-        {% for obj in object_list %}
-            <div id="{{ obj.id|default:'not_provided' }}" class="grid-item" onclick="multi_filter_widget.processClick(
-                    '{{obj.id}}');">
-                <p class="grid-item-header">{{obj.name}}</p>
-                <p class="grid-item-description">{{obj.description}}</p>
-                <button type="button" class="btn btn-success grid-item-select-btn">
-                    {% if obj.multiple %}Add{% else %}Select{% endif %}
-                </button>
+<div id="grid_wrapper" class="container-fluid p-4">
+    <div class="row">
+        {% for object_class, object_list in display_objects %}
+            <div class="col-12 col-lg d-flex flex-column pt-2 my-2">
+                <div class="w-100">
+                    <h4 class="text-capitalize">{{object_class}}</h4>
+                </div>
+                <div id="{{object_class}}" class="row h-100">
+                {% for obj in object_list %}
+                    <div class="col-12 col-md-6 col-xl-4 my-2">
+                        <div id="{{ obj.id|default:'not_provided' }}" class="card h-100" onclick="multi_filter_widget.processClick('{{obj.id}}');">
+                            <div class="card-header">
+                                <p class="h5 font-weight-bold mt-2">{{obj.name}}</p>
+                            </div>
+                            <div class="card-body">
+                                <p class="grid-item-description">{{obj.description}}</p>
+                            </div>
+                            <div class="card-footer">
+                                <button type="button" class="btn btn-success grid-item-select-btn w-100">{% if obj.multiple %}Add{% else %}Select{% endif %}</button>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+                </div>
             </div>
         {% endfor %}
-        </div>
     </div>
-{% endfor %}
 </div>
 
-<div id="dropdown_wrapper">
+<div id="dropdown_wrapper" class="px-3 list-group-flush w-25 mt-2">
 </div>
 <script>
 function multipleSelectFilterWidgetEntry() {
diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
index 8bcf890..8299a55 100644
--- a/src/templates/dashboard/searchable_select_multiple.html
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -1,19 +1,18 @@
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 <script src="/static/js/dashboard.js"></script>
-
-<div id="search_select_outer" class="autocomplete">
-    <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;">
-        {% if incompatible == "true" %}
-        <h3>Warning: Incompatible Configuration</h3>
-        <p>Please make a different selection, as the current config conflicts with the selected pod</p>
-        {% endif %}
-    </div>
-    <div id="added_counter">
-        <p id="added_number">0</p>
-        <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</p>
+<div id="search_select_outer" class="d-flex flex-column">
+    {% if incompatible == "true" %}
+        <div class="alert alert-danger" role="alert">
+            <h3>Warning: Incompatible Configuration</h3>
+            <p>Please make a different selection, as the current config conflicts with the selected pod</p>
+        </div>
+    {% endif %}
+    <div id="added_counter" class="text-center">
+        <span id="added_number">0</span>
+        <span id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</span>
     </div>
 
-    <div id="added_list">
+    <div id="added_list" class="pb-2">
 
     </div>
 
@@ -22,143 +21,14 @@
     >
     </input>
 
-    <input type="hidden" id="selector" name="{{ name }}" class="form-control" style="display: none;"
+    <input type="hidden" id="selector" name="{{ name }}" class="form-control d-none"
     {% if disabled %} disabled {% endif %}
     >
     </input>
 
-    <div id="scroll_restrictor">
-        <ul id="drop_results"></ul>
+    <div id="scroll_restrictor" class="d-flex pb-4 position-relative">
+        <ul id="drop_results" class="list-group w-100 overflow-auto position-absolute"></ul>
     </div>
-    <style>
-        #scroll_restrictor {
-            flex: 1;
-            position: relative;
-            overflow-y: auto;
-            padding-bottom: 10px;
-        }
-
-        #added_list {
-            margin-bottom: 5px;
-        }
-
-        .autocomplete {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-        }
-        #user_field {
-            font-size: 14pt;
-            padding: 5px;
-            height: 40px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-
-        }
-
-        #drop_results{
-            list-style-type: none;
-            padding: 0;
-            margin: 0;
-            min-height: 0;
-            border: solid 1px #ddd;
-            border-top: none;
-            border-bottom: none;
-            visibility: inherit;
-            flex: 1;
-
-            position: absolute;
-            width: 100%;
-
-        }
-
-        #drop_results li a{
-            font-size: 14pt;
-            background-color: #f6f6f6;
-            padding: 7px;
-            text-decoration: none;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        #drop_results li a {
-            border-bottom: 1px solid #ddd;
-        }
-
-        .list_entry {
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-top: 5px;
-            vertical-align: middle;
-            line-height: 40px;
-            height: 40px;
-            padding-left: 12px;
-            width: 100%;
-            display: flex;
-        }
-
-        #drop_results li a:hover{
-            background-color: #ffffff;
-        }
-
-        .added_entry_text {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline;
-            width: 100%;
-        }
-
-        .btn-remove {
-            float: right;
-            height: 30px;
-            margin: 4px;
-            padding: 1px;
-            max-width: 20%;
-            width: 15%;
-            min-width: 70px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .entry_tooltip {
-            display: none;
-        }
-
-        #drop_results li a:hover .entry_tooltip {
-            position: absolute;
-            background: #444;
-            color: #ddd;
-            text-align: center;
-            font-size: 12pt;
-            border-radius: 3px;
-
-        }
-
-        #drop_results {
-            max-width: 100%;
-            display: inline-block;
-            list-style-type: none;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        #drop_results li {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        #added_counter {
-            text-align: center;
-        }
-
-        #added_number, #addable_limit {
-            display: inline;
-        }
-    </style>
 </div>
 
 <script type="text/javascript">
diff --git a/src/templates/dashboard/table.html b/src/templates/dashboard/table.html
index 0a37ded..2b4628e 100644
--- a/src/templates/dashboard/table.html
+++ b/src/templates/dashboard/table.html
@@ -15,20 +15,14 @@
 {% block content %}
     <div class="row">
         <div class="col-lg-12">
-                    <div class="dataTables_wrapper">
-                        <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0"
-                               width="100%">
-
-                            {% block table %}
-                            {% endblock table %}
-
-                        </table>
-                    </div>
-                    <!-- /.table-responsive -->
-                <!-- /.panel-body -->
-            <!-- /.panel -->
+            <div class="dataTables_wrapper table-responsive mw-100">
+                <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0"
+                        width="100%">
+                    {% block table %}
+                    {% endblock table %}
+                </table>
+            </div>
         </div>
-        <!-- /.col-lg-12 -->
     </div>
 {% endblock content %}