feat: display content when empty

edbzn · Nov 12, 2023 · 554475b · 554475b
1 parent 609a10d
commit 554475b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/projects/todo-mvc/src/app/todo-list.component.ts b/projects/todo-mvc/src/app/todo-list.component.ts
@@ -56,6 +56,8 @@ import { TodoComponent } from './todo.component';
             (update)="todoService.actions.update($event)"
             (remove)="todoService.actions.remove($event)"
           />
+        } @empty {
+          <div class="no-todo">Nothing to see.</div>
         }
       </section>
     </section>

diff --git a/projects/todo-mvc/src/styles.css b/projects/todo-mvc/src/styles.css
@@ -155,7 +155,7 @@ body {
 	list-style: none;
 }
 
-.todo {
+.todo, .no-todo {
 	position: relative;
 	font-size: 24px;
 	border-bottom: 1px solid #ededed;
@@ -226,7 +226,7 @@ body {
 	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
 }
 
-.todo label {
+.todo label, .no-todo {
   cursor: grab;
 	word-break: break-all;
 	padding: 15px 15px 15px 60px;
@@ -237,6 +237,10 @@ body {
 	color: #4d4d4d;
 }
 
+.no-todo {
+  color: #d2d2d2;
+}
+
 .todo.completed label {
 	color: #cdcdcd;
 	text-decoration: line-through;