Update kanban cards layout (#684)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-12-20 13:18:50 +03:00 committed by GitHub
parent 56380c4958
commit ccf2a1d88d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 55 deletions

View File

@ -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);

View File

@ -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>

View File

@ -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>