Merge pull request #63 from AlineRinquin/isa2

Isa2

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

@@ -1,6 +1,7 @@
+<div class="container">
   <input
     type="text"
-  class="todo-title"
+    class="todo-title btn btn-outline-success"
     placeholder="Titre"
     value="{{ todo.nom }}"
     [(ngModel)]="todo.nom"
@@ -8,16 +9,19 @@
   />
 
   <i class="bi bi-trash3" (click)="deleteTodo(todo.id)"></i>
-
+  <div class="row justify-align">
     <input
       type="text"
-  class="todo-input"
+      class="todo-input shadow justify-center"
       placeholder="+ Nouvelle Tâche"
       [(ngModel)]="todoTitle"
       (keyup.enter)="addTache(todo.id)"
     />
-
+  </div>
-<div class="element" *ngFor="let tache of todo.taches">
+  <div
+    class="element btn btn-outline-success shadow"
+    *ngFor="let tache of todo.taches"
+  >
     <div class="element-gauche">
       <input
         type="checkbox"
@@ -47,21 +51,20 @@
     </div>
     <div class="deleteTache" (click)="deleteTache(tache.id)">&times;</div>
   </div>
-
+  <div class="selection">
-<div class="extra-container">
+    <label>
-  <div>
+      <input
-    <label
+        class="selection"
-      ><input
         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 class="extra-container">
-  <!-- <div>
+   <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;
+  font-size: large !important;
-  margin-bottom: 16px;
+  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 {
   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 {
+/* .active {
-  background: lightgreen;
+  background: grey;
-}
+} */
-.completed {
+/* .completed {
   text-decoration: line-through;
   color: grey;
 }
+ */

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

@@ -8,16 +8,20 @@
     <div class="d-flex align-items-stretch"></div>
     <input
       type="text"
-      class="todo-input"
+      class="btn btn-outline-success"
-      placeholder="+ Nouvelle To-Do-List"
+      placeholder=" Ajouter une To-Do-List"
       [(ngModel)]="todoListTitle"
       (keyup.enter)="addTodoByTeamId()"
     />
 
     <div class="d-flex align-items-stretch">
+      <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>
+</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;
+}