Merge pull request #15 from larsyngvelundin/12-css-match-list-with-fo…

…rm-builder-list 12 css match list with form builder list
larsyngvelundin · Mar 23, 2024 · df8c66e · df8c66e
2 parents 5531db5 + ab4bb6e
commit df8c66e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/modules/helpFunctions/addCss.js b/modules/helpFunctions/addCss.js
@@ -26,14 +26,21 @@ function addCss() {
         text-align: left;
         border: 1px solid #d3d3d3;
       }
-      
+    
+    #conditionListElement > ul{
+        padding-inline-start: 0px;
+        margin-block-start: 0px;
+        margin-block-end: 0px;
+    }
+
     #conditionListBar {
         padding: 10px;
         cursor: move;
         z-index: 10;
         background-color: #2196F3;
         color: #fff;
     }
+    
 
     .collapsible{
         vertical-align: top;
@@ -43,6 +50,13 @@ function addCss() {
         display:none;
     }
 
+    .conditionListEntry{
+        padding: 5px;
+        font-size: 14px;
+        line-height: 1.618em;
+        list-style: none;
+    }
+
 `;
     document.body.appendChild(ConditionListStyles);
 }
diff --git a/modules/list/getConditionLi.js b/modules/list/getConditionLi.js
@@ -1,16 +1,18 @@
 function getConditionLi(condition, iCon) {
     var conditionLi = document.createElement("li");
-    // conditionLi.innerHTML = condition.id;
-    // conditionLi.innerHTML = "";
+    conditionLi.classList.add("conditionListEntry");
     var innerHTML = `<button type="button" style="display:inline-block;" class="collapsible">v</button>`;
     innerHTML += `<div class="content" style="display:inline-block;">`;
+    innerHTML += `<div class="termDiv" style="display:block;">`;
     for (let iTer = 0; iTer < condition.terms.length; iTer++) {
         var term = condition.terms[iTer];
         innerHTML += `<div>`;
         innerHTML += `<span id="${iCon}-${iTer}" class="conditionTermResult"></span>`;
         innerHTML += `<b>IF</b> ${getFieldLabel(term.field)} <b>${operatorObj[term.operator]}</b>${resultOfTerm(term)}`;
         innerHTML += `</div>`;
     }
+    innerHTML += "</div>"
+    innerHTML += `<div class="actionDiv" style="display:block;">`;
     for (let iAct = 0; iAct < condition.action.length; iAct++) {
         var action = condition.action[iAct];
         console.log(action);
@@ -34,6 +36,7 @@ function getConditionLi(condition, iCon) {
         }
     }
     innerHTML += "</div>"
+    innerHTML += "</div>"
     conditionLi.innerHTML = innerHTML;
     return conditionLi;
 }