Remove paddings from card-container (#1386)

Signed-off-by: Anna No <anna.no@xored.com>

packages/kanban/src/components/Kanban.svelte

@@ -246,11 +246,7 @@
     height: 100%;
   }
   .card-container {
-    display: flex;
-    flex-direction: column;
-    padding: .5rem 1rem;
     background-color: var(--board-card-bg-color);
-    border: 1px solid var(--board-card-bg-color);
     border-radius: .25rem;
     user-select: none;
 
@@ -261,9 +257,7 @@
       cursor: grab;
     }
     &.dragged {
-      padding: 1rem;
       background-color: var(--board-bg-color);
-      border: unset;
     }
   }
 </style>

packages/theme/styles/_layouts.scss

@@ -321,9 +321,16 @@ p:last-child { margin-block-end: 0; }
 .mx-3 { margin: 0 .75rem; }
 .my-4 { margin: 1rem 0; }
 
+.pl-2 { padding-left: .5rem; }
+.pl-4 { padding-left: 1rem; }
 .pr-1 { padding-right: .25rem; }
+.pr-2 { padding-right: .5rem; }
 .pr-4 { padding-right: 1rem; }
 .pr-24 { padding-right: 6rem; }
+.pt-2 { padding-top: .5rem; }
+.pt-4 { padding-top: 1rem; }
+.pb-2 { padding-bottom: .5rem; }
+.pb-4 { padding-bottom: 1rem; }
 
 .p-2 { padding: .5rem; }
 .p-3 { padding: .75rem; }

plugins/board-resources/src/components/KanbanCard.svelte

@@ -35,7 +35,8 @@
   }
 </script>
 
-<div class="flex-between mb-4">
+<div class="flex-col pt-2 pb-2 pr-4 pl-4">
+  <div class="flex-between mb-4">
     <div class="flex-col">
       <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
     </div>
@@ -52,14 +53,19 @@
         size={'small'}
       />
     </div>
-</div>
+  </div>
-<div class="flex-between">
+  <div class="flex-between">
     <div class="flex-row-center">
       {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
       {/if}
       {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
       {/if}
     </div>
+  </div>
 </div>

plugins/lead-resources/src/components/KanbanCard.svelte

@@ -28,16 +28,17 @@
   export let object: WithLookup<Lead>
   export let dragged: boolean
 
-  function showMenu(ev?: Event): void {
+  function showMenu (ev?: Event): void {
     showPopup(ContextMenu, { object }, (ev as MouseEvent).target as HTMLElement)
   }
 
-  function showLead() {
+  function showLead () {
     showPanel(view.component.EditDoc, object._id, object._class, 'full')
   }
 </script>
 
-<div class="flex-between mb-4">
+<div class="flex-col pt-2 pb-2 pr-4 pl-4">
+  <div class="flex-between mb-4">
     <div class="flex-col">
       <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
     </div>
@@ -54,17 +55,22 @@
         size={'small'}
       />
     </div>
-</div>
+  </div>
-<div class="flex-between">
+  <div class="flex-between">
     {#if object.$lookup?.attachedTo}
       <ContactPresenter value={object.$lookup.attachedTo} />
     {/if}
     <div class="flex-row-center">
       {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
       {/if}
       {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
       {/if}
     </div>
+  </div>
 </div>

plugins/recruit-resources/src/components/KanbanCard.svelte

@@ -36,7 +36,8 @@
   $: doneTasks = todoItems.filter((it) => it.done)
 </script>
 
-<div class="flex-between mb-3">
+<div class="flex-col pt-2 pb-2 pr-4 pl-4">
+  <div class="flex-between mb-3">
     <div class="flex-row-center">
       <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
       <div class="flex-grow flex-col min-w-0 ml-2">
@@ -54,25 +55,28 @@
         <ActionIcon label={undefined} icon={IconMoreH} size={'small'} />
       {/if}
     </div>
-</div>
+  </div>
-<div class="flex-between">
+  <div class="flex-between">
     <div class="flex-row-center">
       <div class="sm-tool-icon step-lr75">
         <ApplicationPresenter value={object} />
         {#if todoItems.length > 0}
           <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
-          <div class="ml-2">
+            <div class="ml-2">( {doneTasks?.length}/ {todoItems.length} )</div>
-            ( {doneTasks?.length}/ {todoItems.length} )
-          </div>
           </Tooltip>
         {/if}
       </div>
       {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
       {/if}
       {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
       {/if}
     </div>
     <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+  </div>
 </div>

plugins/task-resources/src/components/KanbanCard.svelte

@@ -34,14 +34,13 @@
   $: doneTasks = todoItems.filter((it) => it.done)
 </script>
 
-<div class="flex-between mb-2">
+<div class="flex-col pt-2 pb-2 pr-4 pl-4">
+  <div class="flex-between mb-2">
     <div class="flex">
       <TaskPresenter value={object} />
       {#if todoItems.length > 0}
         <Tooltip label={task.string.TodoItems} component={task.component.TodoItemsPopup} props={{ value: object }}>
-        <div class="ml-2">
+          <div class="ml-2">( {doneTasks?.length}/ {todoItems.length} )</div>
-          ( {doneTasks?.length}/ {todoItems.length} )
-        </div>
         </Tooltip>
       {/if}
     </div>
@@ -58,17 +57,22 @@
         size={'small'}
       />
     </div>
-</div>
+  </div>
-<div class="caption-color mb-3 lines-limit-4">{object.name}</div>
+  <div class="caption-color mb-3 lines-limit-4">{object.name}</div>
-<!-- <div class="text-sm lines-limit-2">{object.description}</div> -->
+  <!-- <div class="text-sm lines-limit-2">{object.description}</div> -->
-<div class="flex-between">
+  <div class="flex-between">
     <div class="flex-row-center">
       {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
       {/if}
       {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
       {/if}
     </div>
     <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+  </div>
 </div>

plugins/tracker-resources/src/components/issues/Board.svelte

@@ -107,7 +107,7 @@
     </svelte:fragment>
     <svelte:fragment slot="card" let:object>
       {@const issue = toIssue(object)}
-      <div class="flex-row h-18">
+      <div class="flex-row h-18 pt-2 pb-2 pr-4 pl-4">
         <div class="flex-between mb-2">
           <IssuePresenter value={object} {currentTeam} />
           {#if issue.$lookup?.assignee}