Add bracket item list style and rework padding

ssciwr · Jul 26, 2024 · 55d9006 · 55d9006
1 parent 00f7698
commit 55d9006
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 19 deletions.
diff --git a/src/components/fields/Link.svelte b/src/components/fields/Link.svelte
@@ -31,7 +31,7 @@
 
 {#if hasField(data, table, field)}
   {#if !condensed}
-    <P class="pt-4">
+    <P>
       <FieldLabel table={table} field={field} />
     </P>
   {/if}

diff --git a/src/components/fields/LinkedTable.svelte b/src/components/fields/LinkedTable.svelte
@@ -1,4 +1,11 @@
 <script>
+  import { List } from "flowbite-svelte";
+
+  export let bracket;
+
+  import "./bracket.css";
 </script>
 
-<slot/>
+<List class={bracket ? "bracket-list" : null}>
+  <slot/>
+</List>
diff --git a/src/components/fields/bracket.css b/src/components/fields/bracket.css
@@ -0,0 +1,24 @@
+.bracket-list {
+    list-style: none;
+    padding: 7px 0 7px 10px;
+    margin-right: -15px;
+    position: relative;
+    border-left: 2px solid #dbdbe1;
+}
+
+.bracket-list::before, .bracket-list::after {
+    content: "";
+    position: absolute;
+    background: #dbdbe1;
+    width: 10px;
+    height: 2px;
+    left: 0;
+  }
+
+  .bracket-list::before {
+    top: 0;
+  }
+
+  .bracket-list::after {
+    bottom: 0;
+  }
diff --git a/src/components/logic/FieldDispatch.svelte b/src/components/logic/FieldDispatch.svelte
@@ -47,9 +47,9 @@
 
 <!-- Fields that are not present in the data are also omitted -->
 {#if hasField(data, table, field) }
-  <svelte:component this={WrapperComponent} class="pt-4">
+  <svelte:component this={WrapperComponent}>
     {#if !condensed}
-      <P class="pt-4">
+      <P>
         <FieldLabel table={table} field={field}/>
       </P>
     {/if}

diff --git a/src/components/logic/RecursiveEasyDBDetailView.svelte b/src/components/logic/RecursiveEasyDBDetailView.svelte
@@ -2,7 +2,7 @@
   import { fieldData, hasReverseSubData, hasSubData, linkedSubData, maskObj, reverseLinkedSubData, splitterTitle } from "../../lib/easydbHelpers";
   import { easydb_api_object } from "../../lib/apiaccess";
 
-  import { Card, Li, List, P } from "flowbite-svelte";
+  import { Card, Li, P } from "flowbite-svelte";
   
   import CustomSplitterDispatch from "./CustomSplitterDispatch.svelte";
   import FieldDispatch from "./FieldDispatch.svelte";
@@ -109,26 +109,24 @@
   {:else if firstField.kind === "linked-table" }
     {#if firstField.output[output] && hasSubData(data, table, firstField)}
       {#if !condensed }
-        <P class="pt-4">
+        <P>
           <FieldLabel field={firstField} table={firstField.other_table_name_hint}/>
         </P>
       {/if}
-      <LinkedTable>
-        <List>
-          {#each linkedSubData(data, table, firstField) as subdata}
-            <Li>
-              <svelte:self fields={firstField.mask.fields} data={subdata} table={firstField.other_table_name_hint} condensed={decideCondense(firstField)} output={output}/>
-            </Li>
-          {/each}
-        </List>
+      <LinkedTable bracket={!decideCondense(firstField)}>
+        {#each linkedSubData(data, table, firstField) as subdata}
+          <Li>
+            <svelte:self fields={firstField.mask.fields} data={subdata} table={firstField.other_table_name_hint} condensed={decideCondense(firstField)} output={output}/>
+          </Li>
+        {/each}
       </LinkedTable>
     {/if}
     <svelte:self fields={fields.slice(1)} data={data} table={table} condensed={condensed} output={output}/>
   {:else if firstField.kind === "reverse-linked-table" }
     {#if firstField.output[output] && hasReverseSubData(data, table, firstField) }
       <ReverseLinkedTable>
         {#each reverseLinkedSubData(data, table, firstField) as subdata }
-          <Card class="max-w-full">
+          <Card class="max-w-full space-y-4">
             <svelte:self fields={firstField.mask.fields} data={subdata} table={firstField.other_table_name_hint} condensed={condensed} output={output}/>
           </Card>
         {/each}

diff --git a/src/components/splitter/Panel.svelte b/src/components/splitter/Panel.svelte
@@ -13,10 +13,10 @@
 </script>
 
 {#if hasContent(data, table, fields, output)}
-  <Accordion class="pt-6">
+  <Accordion>
     <AccordionItem open={options.default_open_detail}>
       <span slot="header">{splitterTitle(data, table, options, $appLanguageStore)}</span>
-      <div class="-mt-4">
+      <div class="space-y-4">
         <slot />
       </div>
     </AccordionItem>

diff --git a/src/components/splitter/Split.svelte b/src/components/splitter/Split.svelte
@@ -9,6 +9,6 @@
   export let table;
 </script>
 
-<Heading tag="h6" class="pt-4">
+<Heading tag="h6">
   {splitterTitle(data, table, JSON.parse(field.options), $appLanguageStore)}
 </Heading>
diff --git a/src/components/splitter/TabItem.svelte b/src/components/splitter/TabItem.svelte
@@ -14,6 +14,8 @@
 
 {#if hasContent(data, table, fields, output) }
   <TabItem open={open} title={splitterTitle(data, table, options, $appLanguageStore)}>
-    <slot />
+    <div class="space-y-4">
+      <slot />
+    </div>
   </TabItem>
 {/if}