Resolve issue with indi list

The lists of individuals, specifically the starting indi and stopping indi lists, have the items show as too large when there is a long name that wraps to the next line. This commit solves this issue by preventing this wrap and instead cutting off the content if it's too long.
Neriderc · Oct 28, 2024 · 2b99145 · 2b99145
1 parent 3e9a8ad
commit 2b99145
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/resources/css/gvexport.css b/resources/css/gvexport.css
@@ -256,6 +256,9 @@
     margin: 3px;
     width: 100%;
     display: flex;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .indi_list_item {
@@ -266,9 +269,14 @@
 .list_item_skinny {
     width: 80%;
     display: block;
-    text-overflow: ellipsis;
+}
+
+.list_item_content {
+    width: 95%;
+    display: block;
     white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .options-panel-background {

diff --git a/resources/javascript/MainPage/Form.js b/resources/javascript/MainPage/Form.js
@@ -530,11 +530,16 @@ const Form = {
                 newListItem.className = "indi_list_item";
                 newListItem.setAttribute("data-xref", xref);
                 newListItem.setAttribute("onclick", "UI.scrollToRecord('" + xref + "')");
-                newListItem.innerHTML = contents + "<div class=\"saved-settings-ellipsis\" onclick=\"Form.indiList.removeItem(event, this.parentElement" + (colour === '' ? '' :  '.parentElement') + ", '" + otherXrefId + "')\"><a class='pointer'>×</a></div>";
+                const listItemIndi = document.createElement("span");
+                listItemIndi.innerHTML = contents + "<div class=\"saved-settings-ellipsis\" onclick=\"Form.indiList.removeItem(event, this.parentElement" + (colour === '' ? '' :  '.parentElement') + ", '" + otherXrefId + "')\"><a class='pointer'>×</a></div>";
+                newListItem.appendChild(listItemIndi);
                 if (colour !== '') {
+                    listItemIndi.setAttribute('class', 'list_item_skinny');
                     let picker = `<input type="color" class="highlight_picker" data-xref="${xref}" value="${colour}">`;
-                    newListItem.innerHTML = '<span class="list_item_skinny">' + newListItem.innerHTML + '</span>' + picker;
+                    newListItem.innerHTML = newListItem.innerHTML + picker;
                     newListItem.querySelector('.highlight_picker')?.addEventListener('change', Form.indiList.updateHighlightColour);
+                } else {
+                    listItemIndi.setAttribute('class', 'list_item_content');
                 }
                 // Multiple promises can be for the same xref - don't add if a duplicate
                 let item = listElement.querySelector(`[data-xref="${xref}"]`);