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,31 +35,37 @@
   }
 </script>
 
-<div class="flex-between mb-4">
-  <div class="flex-col">
-    <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
-  </div>
-  <div class="flex-row-center">
-    <div class="mr-2">
-      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+<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>
+    <div class="flex-row-center">
+      <div class="mr-2">
+        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+      </div>
+      <ActionIcon
+        label={board.string.More}
+        action={(evt) => {
+          showMenu(evt)
+        }}
+        icon={IconMoreH}
+        size={'small'}
+      />
+    </div>
+  </div>
+  <div class="flex-between">
+    <div class="flex-row-center">
+      {#if (object.attachments ?? 0) > 0}
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
+      {/if}
     </div>
-    <ActionIcon
-      label={board.string.More}
-      action={(evt) => {
-        showMenu(evt)
-      }}
-      icon={IconMoreH}
-      size={'small'}
-    />
-  </div>
-</div>
-<div class="flex-between">
-  <div class="flex-row-center">
-    {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
   </div>
 </div>

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

@@ -28,43 +28,49 @@
   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">
-    <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
-  </div>
-  <div class="flex-row-center">
-    <div class="mr-2">
-      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+<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>
+    <div class="flex-row-center">
+      <div class="mr-2">
+        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+      </div>
+      <ActionIcon
+        label={lead.string.More}
+        action={(evt) => {
+          showMenu(evt)
+        }}
+        icon={IconMoreH}
+        size={'small'}
+      />
+    </div>
+  </div>
+  <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>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
+      {/if}
     </div>
-    <ActionIcon
-      label={lead.string.More}
-      action={(evt) => {
-        showMenu(evt)
-      }}
-      icon={IconMoreH}
-      size={'small'}
-    />
-  </div>
-</div>
-<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>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
   </div>
 </div>

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

@@ -36,43 +36,47 @@
   $: doneTasks = todoItems.filter((it) => it.done)
 </script>
 
-<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">
-      <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>
-        {formatName(object.$lookup?.attachedTo?.name ?? '')}
+<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">
+        <div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>
+          {formatName(object.$lookup?.attachedTo?.name ?? '')}
+        </div>
+        <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
       </div>
-      <div class="text-sm lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
     </div>
-  </div>
-  <div class="tool mr-1 flex-row-center">
-    {#if !dragged}
-      <div class="mr-2">
-        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
-      </div>
-      <ActionIcon label={undefined} icon={IconMoreH} size={'small'} />
-    {/if}
-  </div>
-</div>
-<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">
-            ( {doneTasks?.length}/ {todoItems.length} )
-          </div>
-        </Tooltip>
+    <div class="tool mr-1 flex-row-center">
+      {#if !dragged}
+        <div class="mr-2">
+          <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+        </div>
+        <ActionIcon label={undefined} icon={IconMoreH} size={'small'} />
       {/if}
     </div>
-    {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
   </div>
-  <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+  <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">( {doneTasks?.length}/ {todoItems.length} )</div>
+          </Tooltip>
+        {/if}
+      </div>
+      {#if (object.attachments ?? 0) > 0}
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <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,41 +34,45 @@
   $: doneTasks = todoItems.filter((it) => it.done)
 </script>
 
-<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">
-          ( {doneTasks?.length}/ {todoItems.length} )
-        </div>
-      </Tooltip>
-    {/if}
-  </div>
-  <div class="flex-row-center">
-    <div class="mr-2">
-      <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+<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">( {doneTasks?.length}/ {todoItems.length} )</div>
+        </Tooltip>
+      {/if}
     </div>
-    <ActionIcon
-      label={task.string.More}
-      action={(evt) => {
-        showMenu(evt)
-      }}
-      icon={IconMoreH}
-      size={'small'}
-    />
+    <div class="flex-row-center">
+      <div class="mr-2">
+        <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
+      </div>
+      <ActionIcon
+        label={task.string.More}
+        action={(evt) => {
+          showMenu(evt)
+        }}
+        icon={IconMoreH}
+        size={'small'}
+      />
+    </div>
+  </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="flex-between">
+    <div class="flex-row-center">
+      {#if (object.attachments ?? 0) > 0}
+        <div class="step-lr75">
+          <AttachmentsPresenter value={object} />
+        </div>
+      {/if}
+      {#if (object.comments ?? 0) > 0}
+        <div class="step-lr75">
+          <CommentsPresenter value={object} />
+        </div>
+      {/if}
+    </div>
+    <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
   </div>
 </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="flex-between">
-  <div class="flex-row-center">
-    {#if (object.attachments ?? 0) > 0}
-      <div class="step-lr75"><AttachmentsPresenter value={object} /></div>
-    {/if}
-    {#if (object.comments ?? 0) > 0}
-      <div class="step-lr75"><CommentsPresenter value={object} /></div>
-    {/if}
-  </div>
-  <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
-</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}