Update kanban cards layout (#684)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/_layouts.scss

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

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

@@ -36,15 +36,13 @@
 </script>
 
 <div class="card-container" {draggable} class:draggable on:dragstart on:dragend>
-  <div class="content">
-    <div class="flex-row-center">
+  <div class="flex-between mb-3">
     <Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
-      <div class="flex-col ml-2">
+    <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>
-    </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>

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

@@ -33,40 +33,24 @@
 </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">
+  <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="fs-title lines-limit-2">{object.name}</div>
-        <div class="small-text lines-limit-2">{object.description}</div>
-      </div>
-    </div>
-  </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>
+    {#if object.$lookup?.assignee}
+      <Avatar avatar={object.$lookup?.assignee?.avatar} size={'x-small'} />
+    {/if}
 </div>
 </div>
 
@@ -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>