mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-23 05:53:09 +03:00
Update kanban cards layout (#684)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
parent
56380c4958
commit
ccf2a1d88d
@ -205,6 +205,7 @@ p:last-child { margin-block-end: 0; }
|
||||
.mt-10 { margin-top: 2.5rem; }
|
||||
.mt-14 { margin-top: 3.5rem; }
|
||||
.mb-1 { margin-bottom: .25rem; }
|
||||
.mb-2 { margin-bottom: .5rem; }
|
||||
.mb-3 { margin-bottom: .75rem; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
|
||||
@ -246,6 +247,8 @@ p:last-child { margin-block-end: 0; }
|
||||
|
||||
.h-full { height: 100%; }
|
||||
.w-full { width: 100%; }
|
||||
.min-w-0 { min-width: 0; }
|
||||
.min-h-0 { min-height: 0; }
|
||||
.square-36 { width: 2.25rem; height: 2.25rem; }
|
||||
|
||||
/* --------- */
|
||||
@ -332,16 +335,23 @@ a.no-line {
|
||||
user-select: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.lines-limit-2 {
|
||||
|
||||
.lines-limit-2, .lines-limit-4 {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
/* autoprefixer: ignore next */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.lines-limit-2 {
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
}
|
||||
.lines-limit-4 {
|
||||
-webkit-line-clamp: 4;
|
||||
line-clamp: 4;
|
||||
}
|
||||
|
||||
.focused-button {
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
|
@ -36,15 +36,13 @@
|
||||
</script>
|
||||
|
||||
<div class="card-container" {draggable} class:draggable on:dragstart on:dragend>
|
||||
<div class="content">
|
||||
<div class="flex-row-center">
|
||||
<Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
|
||||
<div class="flex-col ml-2">
|
||||
<div class="fs-title over-underline lines-limit-2" on:click={showCandidate}>{formatName(object.$lookup?.attachedTo?.name)}</div>
|
||||
<div class="small-text lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
|
||||
</div>
|
||||
<div class="flex-between mb-3">
|
||||
<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="small-text lines-limit-2">{object.$lookup?.attachedTo?.title ?? ''}</div>
|
||||
</div>
|
||||
<ActionIcon label={'More...'} icon={IconMoreH} size={'small'} />
|
||||
<div class="tool"><ActionIcon label={'More...'} icon={IconMoreH} size={'small'} /></div>
|
||||
</div>
|
||||
<div class="flex-between">
|
||||
<div class="flex-row-center">
|
||||
@ -72,11 +70,7 @@
|
||||
user-select: none;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
&.draggable { cursor: grab; }
|
||||
}
|
||||
.tool { align-self: start; }
|
||||
</style>
|
||||
|
@ -33,41 +33,25 @@
|
||||
</script>
|
||||
|
||||
<div class="card-container" {draggable} class:draggable on:dragstart on:dragend>
|
||||
<div class="content">
|
||||
<div class="flex-row-center">
|
||||
<div class="flex-col ml-2">
|
||||
<div class="sm-tool-icon step-lr75">
|
||||
<TaskPresenter value={object} />
|
||||
</div>
|
||||
<div class="fs-title lines-limit-2">{object.name}</div>
|
||||
<div class="small-text lines-limit-2">{object.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-between mb-2">
|
||||
<TaskPresenter value={object} />
|
||||
<ActionIcon label={task.string.More} action={(evt) => { showMenu(evt) }} icon={IconMoreH} size={'small'} />
|
||||
</div>
|
||||
<div class="caption-color mb-3 lines-limit-4">{object.name}</div>
|
||||
<!-- <div class="small-text lines-limit-2">{object.description}</div> -->
|
||||
<div class="flex-between">
|
||||
{#if object.$lookup?.assignee}
|
||||
<div class="flex-center safari-gap-1">
|
||||
<Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
|
||||
<Label label={formatName(object.$lookup?.assignee?.name)} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex-row-reverse">
|
||||
<ActionIcon
|
||||
label={task.string.More}
|
||||
action={(evt) => {
|
||||
showMenu(evt)
|
||||
}}
|
||||
icon={IconMoreH}
|
||||
size={'small'}
|
||||
/>
|
||||
{#if (object.comments ?? 0) > 0}
|
||||
<div class="step-lr75"><CommentsPresenter value={object} /></div>
|
||||
{/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>
|
||||
{#if object.$lookup?.assignee}
|
||||
<Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@ -75,18 +59,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 1.25rem;
|
||||
background-color: rgba(222, 222, 240, 0.06);
|
||||
border-radius: 0.75rem;
|
||||
background-color: rgba(222, 222, 240, .06);
|
||||
border-radius: .75rem;
|
||||
user-select: none;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
&.draggable {
|
||||
cursor: grab;
|
||||
}
|
||||
&.draggable { cursor: grab; }
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user