Improve list styling

NeurodataWithoutBorders · Mar 9, 2024 · e9d0222 · e9d0222
1 parent e8d01b4
commit e9d0222
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/renderer/src/stories/List.ts b/src/renderer/src/stories/List.ts
@@ -43,7 +43,7 @@ export class List extends LitElement {
       }
 
       :host([unordered]) #empty {
-        margin: 0;
+        margin-left: calc(1rem - 40px) !important;
       }
 
       li {
@@ -74,12 +74,15 @@ export class List extends LitElement {
         margin: 0px;
       }
 
+      :host([unordered]) ol:has(li) {
+        padding: 0px;
+      }
+
 
       :host([unordered]) ol {
         list-style-type: none;
         display: flex;
         flex-wrap: wrap;
-        padding: 0;
       }
 
       :host([unordered]) ol > li {
@@ -124,7 +127,7 @@ export class List extends LitElement {
 
         unordered: {
           type: Boolean,
-          // reflect: true
+          reflect: true
         },
         emptyMessage: {
           type: String,
@@ -404,9 +407,6 @@ export class List extends LitElement {
 
     render() {
 
-      this.removeAttribute('unordered')
-      if (this.unordered) this.setAttribute('unordered', '')
-
       this.object = {}
 
       const { items, emptyMessage} = this

diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js
@@ -110,6 +110,7 @@ export class GuidedStructurePage extends Page {
         const { interfaces = {} } = this.info.globalState;
 
         this.list.emptyMessage = "Loading valid formats...";
+        console.log(this.list)
 
         this.search.options = await fetch(`${baseUrl}/neuroconv`)
             .then((res) => res.json())

diff --git a/src/renderer/src/stories/pages/guided-mode/options/GuidedInspectorPage.js b/src/renderer/src/stories/pages/guided-mode/options/GuidedInspectorPage.js
@@ -142,7 +142,11 @@ export class GuidedInspectorPage extends Page {
 
                         const items = this.report.messages;
 
-                        return new InspectorList({ items, emptyMessage });
+                        const list = new InspectorList({ items, emptyMessage });
+                        setTimeout(() => {
+                            console.log(list);
+                        })
+                        return list
                     }
 
                     const path = getSharedPath(fileArr.map(({ info }) => info.file));