aboutsummaryrefslogtreecommitdiffstats
path: root/src/static
diff options
context:
space:
mode:
Diffstat (limited to 'src/static')
-rw-r--r--src/static/css/base.css17
-rw-r--r--src/static/js/dashboard.js43
2 files changed, 40 insertions, 20 deletions
diff --git a/src/static/css/base.css b/src/static/css/base.css
index 1494e77..9fec97e 100644
--- a/src/static/css/base.css
+++ b/src/static/css/base.css
@@ -66,9 +66,6 @@ a[aria-expanded="true"] > i.rotate {
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 {
@@ -81,14 +78,18 @@ a[aria-expanded="true"] > i.rotate {
top: 0;
}
-/* Dropdown for collaborators */
-#drop_results {
- max-height: 10rem;
+.z-2 {
z-index: 2;
}
-#drop_results > li {
- word-wrap: anywhere;
+.mh-30vh {
+ max-height: 30vh;
+}
+
+.overflow-ellipsis {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
}
/* Graphing for networks */
diff --git a/src/static/js/dashboard.js b/src/static/js/dashboard.js
index 7f8a427..b74ead9 100644
--- a/src/static/js/dashboard.js
+++ b/src/static/js/dashboard.js
@@ -1236,12 +1236,13 @@ class SearchableSelectMultipleWidget {
for( const id in ids )
{
- const result_entry = document.createElement("li");
- const result_button = document.createElement("a");
const obj = this.items[id];
const result_text = this.generate_element_text(obj);
- result_entry.classList.add("list-group-item", "list-group-item-action");
+ const result_entry = document.createElement("a");
+ result_entry.href = "#";
result_entry.innerText = result_text;
+ result_entry.title = result_text;
+ result_entry.classList.add("list-group-item", "list-group-item-action", "overflow-ellipsis", "flex-shrink-0");
result_entry.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); };
const tooltip = document.createElement("span");
const tooltiptext = document.createTextNode(result_text);
@@ -1300,21 +1301,39 @@ class SearchableSelectMultipleWidget {
added_list.removeChild(added_list.firstChild);
}
- let list_html = "";
+ const list_html = document.createElement("div");
+ list_html.classList.add("list-group");
for( const item_id of this.added_items )
{
- const item = this.items[item_id];
+ const times = document.createElement("li");
+ times.classList.add("fas", "fa-times");
+
+ const deleteButton = document.createElement("a");
+ deleteButton.href = "#";
+ deleteButton.innerHTML = "<i class='fas fa-times'></i>"
+ // Setting .onclick/.addEventListener does not work,
+ // which is why I took the setAttribute approach
+ // If anyone knows why, please let me know :]
+ deleteButton.setAttribute("onclick", `searchable_select_multiple_widget.remove_item(${item_id});`);
+ deleteButton.classList.add("btn");
+ const deleteColumn = document.createElement("div");
+ deleteColumn.classList.add("col-auto");
+ deleteColumn.append(deleteButton);
+ const item = this.items[item_id];
const element_entry_text = this.generate_element_text(item);
+ const textColumn = document.createElement("div");
+ textColumn.classList.add("col", "overflow-ellipsis");
+ textColumn.innerText = element_entry_text;
+ textColumn.title = element_entry_text;
+
+ const itemRow = document.createElement("div");
+ itemRow.classList.add("list-group-item", "d-flex", "p-0", "align-items-center");
+ itemRow.append(textColumn, deleteColumn);
- list_html += '<div class="border rounded mt-2 w-100 d-flex align-items-center pl-2">'
- + element_entry_text
- + '<button onclick="searchable_select_multiple_widget.remove_item('
- + item_id
- + ')" class="btn btn-danger ml-auto">Remove</button>';
- list_html += '</div>';
+ list_html.append(itemRow);
}
- added_list.innerHTML = list_html;
+ added_list.innerHTML = list_html.innerHTML;
}
}