3 files changed, 75 insertions, 90 deletions
diff --git a/src/templates/dashboard/lab_detail.html b/src/templates/dashboard/lab_detail.html
index 4c06245..7938e86 100644
--- a/src/templates/dashboard/lab_detail.html
+++ b/src/templates/dashboard/lab_detail.html
@@ -62,7 +62,7 @@
                     <tr>
                         <td>{{profile.name}}</td>
                         <td>{{profile.description}}</td>
-                        <td>{{profile.labs}}</td>
+                        <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-primary">Profile</a></td>
                     </tr>
                     {% endfor %}
                 </table>
diff --git a/src/templates/dashboard/lab_list.html b/src/templates/dashboard/lab_list.html
index a86f7f4..c459dd9 100644
--- a/src/templates/dashboard/lab_list.html
+++ b/src/templates/dashboard/lab_list.html
@@ -1,87 +1,26 @@
 {% extends "base.html" %}
-{% load staticfiles %}
-
-{% block extrahead %}
-    {{block.super}}
-    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
-{% endblock %}
-
 {% block content %}
-    <style>
-     .grid-item-container {
-         padding: 10px;
-     }
-
-         .grid-item {
-             cursor: pointer;
-             border:2px;
-             border-style:none;
-             border-color:black;
-             border-radius: 5px;
-             padding: 7px;
-             color: inherit;
-
-             box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
-             transition-property: box-shadow, background-color;
-             transition-duration: .2s;
-         }
-
-     .grid-item-text
-     {
-         color: inherit;
-         text-decoration: none;
-     }
-     .grid-item-text:hover
-     {
-         color: #121212;
-         text-decoration: none;
-     }
-
-     .grid-item:hover {
-         box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-         transition-property: box-shadow;
-         transition-duration: .2s;
-
-     }
-
-     .selected_node {
-         box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-         background-color: #CCECD7;
-         transition-property: background-color;
-         transition-duration: .2s;
-     }
-
-     .disabled_node {
-         cursor: not-allowed;
-         background-color: #EFEFEF;
-         box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
-         transition-property: box-shadow;
-         transition-duration: .2s;
-     }
-
-     .disabled_node:hover {
-         box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
-     }
-
-    </style>
-    <div class="container-fluid">
-    <div class="row">
-
-    <div class="listgrid">
-        {% for lab in labs %}
-        <div class="grid-item-container col-lg-2 col-mid-4 col-sm-6">
-
-            <a href="{{ lab.name }}" class="grid-item-text">
-
-            <div class="grid-item">
-            <h4 class="grid-item-header">{{ lab.name }}</h4>
-            <p class="grid-item-description">{{ lab.description }}</p>
+    <h2>Labs</h2>
+    <div class="card_container">
+    {% for lab in labs %}
+        <div class="detail_card">
+            <div>
+                <h3>{{lab.name}}</h3>
+                <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>
             </div>
-            </a>
+            <a class="btn btn-primary" href="/lab/{{lab.name}}/">Details</a>
         </div>
-        {% endfor %}
-    </div>
+    {% endfor %}
     </div>
-    </div>
-
-{% endblock content %}
+{% endblock %}
diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html
index 4e47ce0..628fd95 100644
--- a/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/src/templates/dashboard/multiple_select_filter_widget.html
@@ -6,12 +6,16 @@
 }
 .class_grid_wrapper {
     border: 0px;
-    border-left: 1px;
+    text-align: center;
     border-right: 1px;
     border-style: solid;
     border-color: grey;
-    text-align: center;
 }
+
+.class_grid_wrapper:last-child {
+    border-right: none;
+}
+
 .grid_wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -67,6 +71,45 @@
     margin-top: 10px;
 }
 
+#dropdown_wrapper > div > h5 {
+    margin: 12px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#dropdown_wrapper > div > button {
+    padding: 7px;
+    margin: 2px;
+    float: right;
+    width: 80px;
+}
+#dropdown_wrapper > div > input {
+    padding: 7px;
+    margin: 2px;
+    float: right;
+    width: 300px;
+    width: calc(100% - 240px);
+}
+
+#dropdown_wrapper > div {
+    border:2px;
+    border-style:none;
+    border-color:black;
+    border-radius: 5px;
+    margin:20px;
+    padding: 2px;
+    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
+    transition-property: box-shadow, background-color;
+    transition-duration: .2s;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#dropdown_wrapper {
+    display: grid;
+    grid-template-columns: 3fr 5fr;
+}
+
 </style>
 <input name="filter_field" id="filter_field" type="hidden"/>
 <div id="grid_wrapper" class="grid_wrapper">
@@ -305,9 +348,14 @@ function add_item_prepopulate(node, prepopulate){
     div.id = "dropdown_" + dropdown_count;
     dropdown_count++;
     var label = document.createElement("H5");
-    label.style['display'] = 'inline';
     label.appendChild(document.createTextNode(node['name']));
     div.appendChild(label);
+    button = document.createElement("BUTTON");
+    button.type = "button";
+    button.appendChild(document.createTextNode("Remove"));
+    button.classList.add("btn-danger");
+    button.classList.add("btn");
+    div.appendChild(button);
     for(var i=0; i<node['forms'].length; i++){
         form = node['forms'][i];
         var input = document.createElement("INPUT");
@@ -330,14 +378,12 @@ function add_item_prepopulate(node, prepopulate){
     hiddenInput.name = "class";
     hiddenInput.value = node['id'];
     div.appendChild(hiddenInput);
-    button = document.createElement("BUTTON");
     button.onclick = function(){
         remove_dropdown(div.id);
     }
-    button.type = "button";
-    button.appendChild(document.createTextNode("Remove"));
-    div.appendChild(button);
     document.getElementById("dropdown_wrapper").appendChild(div);
+    var linebreak = document.createElement("BR");
+    document.getElementById("dropdown_wrapper").appendChild(linebreak);
     updateObjectResult(div);
     return div;
 }