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>

3 files changed, 116 insertions, 65 deletions

diff --git a/src/static/css/base.css b/src/static/css/base.css
index c51728c..447c368 100644
--- a/src/static/css/base.css
+++ b/src/static/css/base.css
@@ -1,3 +1,30 @@
+/* Sizing */
+#wrapper {
+    height: 100vh;
+}
+
+/* Used for turning divs into square */
+.square-20 {
+    height: 20px;
+    width: 20px;
+}
+
+/* Make links stay the same color with no underline */
+.discrete-a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.discrete-a:hover {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Allow for sidebar to be small, but also resize on small screens */
+.sidebar {
+    min-width: 200px;
+}
+
 /* Rotating arrows when dropdown happens */
 i.fas.rotate {
     transition: transform 0.3s ease-in-out;
@@ -6,3 +33,60 @@ i.fas.rotate {
 a[aria-expanded="true"] > i.rotate {
     transform: rotate(180deg);
 }
+/* End rotating arrows */
+
+/* Start breadcrumbs for workflow */
+#topPagination .topcrumb {
+    flex: 1 1 0;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    border: 1px solid #dee2e6;
+    border-left: none;
+}
+
+.topcrumb > span {
+    color: #343a40;
+    cursor: default;
+}
+
+.topcrumb.active > span {
+    background: #007bff;
+    color: white;
+}
+
+.topcrumb.disabled > span {
+    color: #6c757d;
+    background: #f8f9fa;
+}
+
+/* Booking Node Styles */
+.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_wrapper > .row > div:first-child {
+    border-right: 1px solid gray;
+}
+
+/* Cursor effects */
+.not-allowed {
+    cursor: not-allowed;
+}
+
+/* Used with position-absolute class to make a full height object */
+.topToBottom {
+    bottom: 0;
+    top: 0;
+}
+
+/* Dropdown for collaborators */
+#drop_results {
+    max-height: 10rem;
+    z-index: 2;
+}
+
+#drop_results > li {
+    word-wrap: anywhere;
+}
\ No newline at end of file
diff --git a/src/static/css/detail_view.css b/src/static/css/detail_view.css
deleted file mode 100644
index c3d0a4d..0000000
--- a/src/static/css/detail_view.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.card_container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-gap: 25px 25px;
-    justify-items: stretch;
-}
-
-.card_container ul > li {
-    padding: 7px !important;
-    font-size: 16px;
-}
-
-.detail_button_container .btn {
-    width: 49%;
-}
-
-.detail_button_container .btn-danger {
-    float: right;
-}
-
-#modal_warning {
-    transition: max-height 0.5s ease-out;
-    overflow: hidden;
-}
-
-.detail_card {
-    border-radius: 5px;
-    border-top: 1px solid #ccc;
-    border-left: 1px solid #ccc;
-    border-right: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    margin: 5px;
-    padding-left: 25px;
-    padding-right: 25px;
-    padding-bottom: 15px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
diff --git a/src/static/js/dashboard.js b/src/static/js/dashboard.js
index 84c3703..9c99aa8 100644
--- a/src/static/js/dashboard.js
+++ b/src/static/js/dashboard.js
@@ -98,7 +98,7 @@ class MultipleSelectFilterWidget {
     select(node) {
         const elem = document.getElementById(node['id']);
         node['selected'] = true;
-        elem.classList.remove('disabled_node', 'cleared_node');
+        elem.classList.remove('bg-white', 'not-allowed', 'bg-light');
         elem.classList.add('selected_node');
     }
 
@@ -106,16 +106,16 @@ class MultipleSelectFilterWidget {
         const elem = document.getElementById(node['id']);
         node['selected'] = false;
         node['selectable'] = true;
-        elem.classList.add('cleared_node')
-        elem.classList.remove('disabled_node', 'selected_node');
+        elem.classList.add('bg-white')
+        elem.classList.remove('not-allowed', 'bg-light', 'selected_node');
     }
 
     disable_node(node) {
         const elem = document.getElementById(node['id']);
         node['selected'] = false;
         node['selectable'] = false;
-        elem.classList.remove('cleared_node', 'selected_node');
-        elem.classList.add('disabled_node');
+        elem.classList.remove('bg-white', 'selected_node');
+        elem.classList.add('not-allowed', 'bg-light');
     }
 
     processClick(id){
@@ -173,7 +173,7 @@ class MultipleSelectFilterWidget {
         const button = document.createElement("BUTTON");
         button.type = "button";
         button.appendChild(document.createTextNode("Remove"));
-        button.classList.add("btn", "btn-danger");
+        button.classList.add("btn", "btn-danger", "d-inline-block");
         const that = this;
         button.onclick = function(){ that.remove_dropdown(div.id, node.id); }
         return button;
@@ -183,6 +183,7 @@ class MultipleSelectFilterWidget {
         const input = document.createElement("INPUT");
         input.type = node.form.type;
         input.name = node.id + node.form.name
+        input.classList.add("form-control", "w-auto", "d-inline-block");
         input.pattern = "(?=^.{1,253}$)(^([A-Za-z0-9-_]{1,62}\.)*[A-Za-z0-9-_]{1,63})";
         input.title = "Only alphanumeric characters (a-z, A-Z, 0-9), underscore(_), and hyphen (-) are allowed"
         input.placeholder = node.form.placeholder;
@@ -198,7 +199,7 @@ class MultipleSelectFilterWidget {
     add_item_prepopulate(node, prepopulate){
         const div = document.createElement("DIV");
         div.id = "dropdown_" + this.dropdown_count;
-        div.classList.add("dropdown_item");
+        div.classList.add("list-group-item");
         this.dropdown_count++;
         const label = document.createElement("H5")
         label.appendChild(document.createTextNode(node['name']))
@@ -756,21 +757,28 @@ class NetworkStep {
     }
 
     makeSidebarNetwork(net_name, color, net_id){
-        const newNet = document.createElement("li");
         const colorBlob = document.createElement("div");
-        colorBlob.className = "colorblob";
-        const textContainer = document.createElement("p");
-        textContainer.className = "network_innertext";
-        newNet.id = net_id;
+        colorBlob.className = "square-20 rounded-circle";
+        colorBlob.style['background'] = color;
+
+        const textContainer = document.createElement("span");
+        textContainer.className = "ml-2";
+        textContainer.appendChild(document.createTextNode(net_name));
+
+        const timesIcon = document.createElement("i");
+        timesIcon.classList.add("fas", "fa-times");
+
         const deletebutton = document.createElement("button");
-        deletebutton.className = "btn btn-danger";
-        deletebutton.style = "float: right; height: 20px; line-height: 8px; vertical-align: middle; width: 20px; padding-left: 5px;";
-        deletebutton.appendChild(document.createTextNode("X"));
+        deletebutton.className = "btn btn-danger ml-auto square-20 p-0 d-flex justify-content-center";
+        deletebutton.appendChild(timesIcon);
         deletebutton.addEventListener("click", function() { this.createDeleteDialog(net_id); }.bind(this), false);
-        textContainer.appendChild(document.createTextNode(net_name));
-        colorBlob.style['background'] = color;
+
+        const newNet = document.createElement("li");
+        newNet.classList.add("list-group-item", "d-flex", "bg-light");
+        newNet.id = net_id;
         newNet.appendChild(colorBlob);
         newNet.appendChild(textContainer);
+
         if( net_name != "public" ) {
             newNet.appendChild(deletebutton);
         }
@@ -1052,14 +1060,14 @@ class SearchableSelectMultipleWidget {
             const result_button = document.createElement("a");
             const obj = this.items[id];
             const result_text = this.generate_element_text(obj);
-            result_button.appendChild(document.createTextNode(result_text));
-            result_button.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); };
+            result_entry.classList.add("list-group-item", "list-group-item-action");
+            result_entry.innerText = result_text;
+            result_entry.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); };
             const tooltip = document.createElement("span");
             const tooltiptext = document.createTextNode(result_text);
             tooltip.appendChild(tooltiptext);
-            tooltip.setAttribute('class', 'entry_tooltip');
-            result_button.appendChild(tooltip);
-            result_entry.appendChild(result_button);
+            tooltip.classList.add("d-none");
+            result_entry.appendChild(tooltip);
             drop.appendChild(result_entry);
         }
 
@@ -1120,13 +1128,11 @@ class SearchableSelectMultipleWidget {
 
             const element_entry_text = this.generate_element_text(item);
 
-            list_html += '<div class="list_entry">'
-                + '<p class="added_entry_text">'
+            list_html += '<div class="border rounded mt-2 w-100 d-flex align-items-center pl-2">'
                 + element_entry_text
-                + '</p>'
                 + '<button onclick="searchable_select_multiple_widget.remove_item('
                 + item_id
-                + ')" class="btn-remove btn">remove</button>';
+                + ')" class="btn btn-danger ml-auto">Remove</button>';
             list_html += '</div>';
         }
         added_list.innerHTML = list_html;