Remove paddings from card-container

Signed-off-by: Anna No <anna.no@xored.com>
This commit is contained in:
Anna No
2022-04-13 11:14:41 +07:00
parent 8dcdafb37d
commit 6bc49f596d
7 changed files with 152 additions and 129 deletions
@@ -33,33 +33,39 @@
function showLead() {
showPanel(board.component.EditCard, object._id, object._class, 'middle')
}
</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>
@@ -35,36 +35,42 @@
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>
@@ -28,51 +28,56 @@
export let object: WithLookup<Applicant>
export let dragged: boolean
function showCandidate () {
function showCandidate() {
showPanel(view.component.EditDoc, object.attachedTo, object.attachedToClass, 'full')
}
$: todoItems = (object.$lookup?.todoItems as TodoItem[]) ?? []
$: 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>
@@ -32,43 +32,47 @@
$: todoItems = (object.$lookup?.todoItems as TodoItem[]) ?? []
$: 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>
@@ -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}