Css To-do-list

src/app/components/to-do-list/to-do-list.component.html

@@ -1,67 +1,70 @@
-<input
-  type="text"
-  class="todo-title"
-  placeholder="Titre"
-  value="{{ todo.nom }}"
-  [(ngModel)]="todo.nom"
-  (keyup.enter)="updateTodo(todo)"
-/>
+<div class="container">
+  <input
+    type="text"
+    class="todo-title btn btn-outline-success"
+    placeholder="Titre"
+    value="{{ todo.nom }}"
+    [(ngModel)]="todo.nom"
+    (keyup.enter)="updateTodo(todo)"
+  />
 
-<i class="bi bi-trash3" (click)="deleteTodo(todo.id)"></i>
-
-<input
-  type="text"
-  class="todo-input"
-  placeholder="+ Nouvelle Tâche"
-  [(ngModel)]="todoTitle"
-  (keyup.enter)="addTache(todo.id)"
-/>
-
-<div class="element" *ngFor="let tache of todo.taches">
-  <div class="element-gauche">
+  <i class="bi bi-trash3" (click)="deleteTodo(todo.id)"></i>
+  <div class="row justify-align">
     <input
-      type="checkbox"
-      [(ngModel)]="tache.etat"
-      (change)="doneEdit(tache)"
-      checked="checked"
+      type="text"
+      class="todo-input shadow justify-center"
+      placeholder="+ Nouvelle Tâche"
+      [(ngModel)]="todoTitle"
+      (keyup.enter)="addTache(todo.id)"
     />
-    <div
-      *ngIf="!tache.editing; else editingTodo"
-      class="nomTache"
-      [ngClass]="{ completed: tache.etat }"
-      (dblclick)="modifier(tache)"
-    >
-      {{ tache.texte }}
-    </div>
-    <ng-template #editingTodo>
-      <input
-        type="text"
-        class="modifier-element"
-        [(ngModel)]="tache.texte"
-        (blur)="doneEdit(tache)"
-        (keyup.enter)="doneEdit(tache)"
-        (keyup.esc)="cancelEdit(tache)"
-        autofocus
-      />
-    </ng-template>
   </div>
-  <div class="deleteTache" (click)="deleteTache(tache.id)">&times;</div>
-</div>
-
-<div class="extra-container">
-  <div>
-    <label
-      ><input
+  <div
+    class="element btn btn-outline-success shadow"
+    *ngFor="let tache of todo.taches"
+  >
+    <div class="element-gauche">
+      <input
+        type="checkbox"
+        [(ngModel)]="tache.etat"
+        (change)="doneEdit(tache)"
+        checked="checked"
+      />
+      <div
+        *ngIf="!tache.editing; else editingTodo"
+        class="nomTache"
+        [ngClass]="{ completed: tache.etat }"
+        (dblclick)="modifier(tache)"
+      >
+        {{ tache.texte }}
+      </div>
+      <ng-template #editingTodo>
+        <input
+          type="text"
+          class="modifier-element"
+          [(ngModel)]="tache.texte"
+          (blur)="doneEdit(tache)"
+          (keyup.enter)="doneEdit(tache)"
+          (keyup.esc)="cancelEdit(tache)"
+          autofocus
+        />
+      </ng-template>
+    </div>
+    <div class="deleteTache" (click)="deleteTache(tache.id)">&times;</div>
+  </div>
+  <div class="selection">
+    <label>
+      <input
+        class="selection"
         type="checkbox"
         (change)="cocherAllTodoList()"
         [(ngModel)]="masterSelected"
       />Selectionner toutes les tâches</label
     >
+    <div class="casesRestantes">{{ toDoRest() }} tâche(s) restante(s)</div>
   </div>
-  <div>{{ toDoRest() }} tâches restantes</div>
 </div>
-<div class="extra-container">
-  <!-- <div>
+<!--<div class="extra-container">
+   <div>
     <button [ngClass]="{ active: filter === 'tous' }" (click)="filter = 'tous'">
       Toutes la To Do List
     </button>
@@ -78,5 +81,5 @@
       Terminées
     </button>
   </div>
- -->
-</div>
+
+</div> -->

src/app/components/to-do-list/to-do-list.component.scss

@@ -1,30 +1,60 @@
+.container {
+  border: 3px #4e9e7b solid;
+  padding: 5%;
+  min-width: 300px;
+  max-width: 30%;
+  margin: 5%;
+  border-radius: 5%;
+  margin-bottom: 20% !important;
+}
+
 .todo-title {
-  width: 25%;
+  width: 75%;
   padding: 10px 18px;
-  font-size: xx-large;
-  margin-bottom: 16px;
+  font-size: large !important;
+  font-weight: bold !important;
+  color: #4e9e7b !important;
+  border-top-color: #4e9e7b !important;
+  border-left-color: #4e9e7b !important;
+  border-radius: 5% !important;
+  margin-top: 0%;
+  margin-bottom: 5%;
+  margin-right: 3% !important;
+  color: black;
+  box-shadow: 5px 5px 5px gray;
   &:focus {
     outline: 0;
+    background-color: lightgray;
   }
 }
 
 .todo-input {
-  width: 20%;
+  width: 75%;
   padding: 10px 18px;
   font-size: 18px;
   margin-bottom: 16px;
+  color: white !important;
+  background-color: #4e9e7b !important;
+  border-radius: 5%;
+  margin-left: 4%;
   &:focus {
     outline: 0;
+    background-color: lightgray;
   }
 }
 
-
 .element {
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   animation-duration: 0.3s;
+  color: black;
+  background-color: #4e9e7b;
+}
+
+::placeholder {
+  color: white;
 }
 
 .deleteTache {
@@ -36,56 +66,66 @@
   }
 }
 
-.element-gauche { // later
+.element-gauche {
   display: flex;
   align-items: center;
 }
 
-.nomTache{
+.nomTache {
   padding: 10px;
-  border: 1px solid white;
   margin-left: 12px;
 }
 
 .modifier-element {
   font-size: 24px;
-  color: #2c3e50;
+  color: white;
   margin-left: 12px;
   width: 100%;
   padding: 10px;
   border: 1px solid rgb(204, 204, 204); //override defaults
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
 
   &:focus {
     outline: none;
-    background-color:aquamarine;
+    background-color: grey;
   }
 }
 
+.selection {
+  margin-left: 0%;
+  text-align: left;
+  font-size: medium;
+  font-weight: bold;
+  color: #4e9e7b;
+}
+
 .completed {
   text-decoration: line-through;
-  color: grey;
+  color: white !important;
+}
+.casesRestantes {
+  color: #4cc690;
 }
 
-
-button {
+/* button {
   font-size: 14px;
   background-color: white;
   appearance: none;
 
   &:hover {
-    background: lightgreen;
+    background: grey;
   }
 
   &:focus {
     outline: none;
   }
-}
+} */
 
-.active {
-  background: lightgreen;
-}
-.completed {
+/* .active {
+  background: grey;
+} */
+/* .completed {
   text-decoration: line-through;
   color: grey;
 }
+ */

src/app/pages/page-to-do-list/page-to-do-list.component.html

@@ -8,15 +8,19 @@
     <div class="d-flex align-items-stretch"></div>
     <input
       type="text"
-      class="todo-input"
-      placeholder="+ Nouvelle To-Do-List"
+      class="btn btn-outline-success"
+      placeholder=" Ajouter une To-Do-List"
       [(ngModel)]="todoListTitle"
       (keyup.enter)="addTodoByTeamId()"
     />
 
     <div class="d-flex align-items-stretch">
-      <div class="col" *ngFor="let todos of listTodos">
-        <app-to-do-list [todo]="todos"> </app-to-do-list>
+      <div class="custom-main container p-3">
+        <div class="row">
+          <div class="col" *ngFor="let todos of listTodos">
+            <app-to-do-list [todo]="todos"> </app-to-do-list>
+          </div>
+        </div>
       </div>
     </div>
   </div>

src/app/pages/page-to-do-list/page-to-do-list.component.scss

@@ -0,0 +1,6 @@
+.btn {
+  margin-top: 1%;
+  margin-bottom: 1%;
+  color: black;
+  box-shadow: 5px 5px 5px gray;
+}