fix #467: Add task counter in Modal

client/src/components/CardModal/Tasks/Tasks.jsx

@@ -48,6 +48,8 @@ const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onMove, onDelete
   return (
     <>
       {items.length > 0 && (
+        <>
+          <span className={styles.progressWrapper}>
             <Progress
               autoSuccess
               value={completedItems.length}
@@ -56,6 +58,11 @@ const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onMove, onDelete
               size="tiny"
               className={styles.progress}
             />
+          </span>
+          <span className={styles.count}>
+            {completedItems.length}/{items.length}
+          </span>
+        </>
       )}
       <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
         <Droppable droppableId="tasks" type={DroppableTypes.TASK}>

client/src/components/CardModal/Tasks/Tasks.module.scss

@@ -3,6 +3,23 @@
     margin: 0 0 16px;
   }
 
+  .progressWrapper {
+    display: inline-block;
+    padding: 3px 0;
+    vertical-align: top;
+    width: calc(100% - 50px);
+  }
+
+  .count {
+    color: #888;
+    display: inline-block;
+    font-size: 15px;
+    line-height: 12px;
+    text-align: right;
+    vertical-align: top;
+    width: 50px;
+  }
+
   .taskButton {
     background: transparent;
     border: none;