From d2cfa4d0f82972af0bee3908a73b29c8f47a454a Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sun, 20 Feb 2022 23:53:18 +0100
Subject: [PATCH] Making up task list layout.

---
 src/app/task-lists/task-lists.component.html | 14 ++++++++++--
 src/app/task-lists/task-lists.component.scss | 23 ++++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/app/task-lists/task-lists.component.html b/src/app/task-lists/task-lists.component.html
index aed06c9..fd96e9b 100644
--- a/src/app/task-lists/task-lists.component.html
+++ b/src/app/task-lists/task-lists.component.html
@@ -1,4 +1,14 @@
 <button mat-raised-button (click)="addNewList()">Nouvelle liste</button>
-<div *ngFor="let list of taskLists$ | async">
-    <h1>{{list?.name}}</h1>
+<div class="task-list-container">
+    <div *ngFor="let list of taskLists$ | async" class="task-list">
+        <div class="card">
+            <span *ngIf="list?.tasks?.length">
+                {{list?.tasks?.length}} tâches
+            </span>
+            <span *ngIf="!list?.tasks?.length">
+                Aucune tâche
+            </span>
+        </div>
+        <h3>{{list?.name}}</h3>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/app/task-lists/task-lists.component.scss b/src/app/task-lists/task-lists.component.scss
index e69de29..006d60e 100644
--- a/src/app/task-lists/task-lists.component.scss
+++ b/src/app/task-lists/task-lists.component.scss
@@ -0,0 +1,23 @@
+.task-list-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .task-list {
+        width: 10rem;
+        margin: 1rem;
+
+        .card {
+            height: 10rem;
+            border: 1px solid black;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: .3rem;
+        }
+        h3 {
+            display: flex;
+            justify-content: center;
+        }
+    }
+}
\ No newline at end of file