aboutsummaryrefslogtreecommitdiffstats
path: root/src/static
diff options
context:
space:
mode:
Diffstat (limited to 'src/static')
-rw-r--r--src/static/css/base.css84
-rw-r--r--src/static/css/detail_view.css39
-rw-r--r--src/static/js/dashboard.js58
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;