From d4d617b4017af42421e5e749d7cfd6e439e919c4 Mon Sep 17 00:00:00 2001
From: Divlo <contact@divlo.fr>
Date: Fri, 27 Dec 2019 00:08:41 +0100
Subject: [PATCH] Hotfix : Responsive ToDoList

---
 css/style.css                     | 13 ++-----------
 scripts/toDoList.js               | 20 +++++++++++++-------
 views/function-views/toDoList.php |  8 ++++----
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/css/style.css b/css/style.css
index 320ce5f..4fe0630 100644
--- a/css/style.css
+++ b/css/style.css
@@ -163,10 +163,6 @@ footer i:hover
 }
 .clear{
     width : 30px;
-    height: 30px;
-    position: absolute;
-    right:20px;
-    top: 20px;
 }
 .clear i{
     font-size: 27px;
@@ -192,7 +188,7 @@ footer i:hover
     margin:0;
 }
 .item{
-    height: 45px;
+    height: 100%;
     min-height: 45px;
     position: relative;
     border-bottom: 1px solid rgba(0,0,0,0.1);
@@ -214,13 +210,8 @@ footer i:hover
     color:#6eb200;
 }
 .item p.text {
-    position: absolute;
-    padding:0;
-    margin:0;
+    margin-top: 10px;
     font-size: 20px;
-    left:50px;
-    top:10px;
-    max-width:285px;
     transition: 0.2s;
     color: #181818;
 }
diff --git a/scripts/toDoList.js b/scripts/toDoList.js
index 174d571..da0f68e 100644
--- a/scripts/toDoList.js
+++ b/scripts/toDoList.js
@@ -18,10 +18,16 @@ function addTask(task, id, done, trash) {
     if(trash) { 
         return; 
     }
-    const item = `<li class="item" id=${id}>
-                    <i class="fa ${(done) ? check : unCheck} co" id="complete"></i>
-                    <p class="text ${(done) ? lineThrough : ""}">${task}</p>
-                    <i class="fas fa-trash-alt de" id="removeTask"></i>
+    const item = `<li class="item row" id=${id}>
+                    <div class="col-2">
+                        <i class="fa ${(done) ? check : unCheck} co" id="complete"></i>
+                    </div>
+                    <div class="col-8">
+                        <p class="text text-center ${(done) ? lineThrough : ""}">${task}</p>
+                    </div>
+                    <div class="col-2">
+                        <i class="fas fa-trash-alt de" id="removeTask"></i>
+                    </div>
                   </li>
                 `;
     list.insertAdjacentHTML("beforeend", item);
@@ -49,19 +55,19 @@ btnAddTask.addEventListener('click', (event) => {addTaskElement(event)});
 list.addEventListener('click', (event) => {
     const element = event.target; 
     const elementJob = element.getAttribute('id');
-    const elementId = element.parentNode.getAttribute('id');
+    const elementId = element.parentNode.parentNode.getAttribute('id');
 
     /* Tâche compléter */
     if(elementJob == "complete") {
         element.classList.toggle(check);
         element.classList.toggle(unCheck);
-        element.parentNode.querySelector(".text").classList.toggle(lineThrough);
+        element.parentNode.parentNode.querySelector(".text").classList.toggle(lineThrough);
         tasksListArray[elementId].done = tasksListArray[elementId].done ? false : true;
     }
 
     /* Supprime une tâche */
     else if(elementJob == "removeTask") {
-        element.parentNode.parentNode.removeChild(element.parentNode);
+        element.parentNode.parentNode.remove();
         tasksListArray[elementId].trash = true;
     }
     localStorage.setItem("tasks", JSON.stringify(tasksListArray));
diff --git a/views/function-views/toDoList.php b/views/function-views/toDoList.php
index ed22c4b..bef9fb0 100644
--- a/views/function-views/toDoList.php
+++ b/views/function-views/toDoList.php
@@ -6,17 +6,17 @@
 
 <div class="container">
     <div class="row">
-        <div class="col-10 mx-auto">
+        <div class="col-sm-12 col-md-10 mx-auto">
             <div class="header">
                 <h1 class="text-center pt-3 toDoListTitle"><img style="height: 1.4em;" src="/img/function-image/toDoList.png" alt="ToDoList">Liste de choses à faire</h1>
-                <div class="clear">
+                <div class="clear pt-3 pb-3 mx-auto">
                     <i class="fas fa-sync"></i>
                 </div>
             </div>
         </div>
     </div>
     <div class="row">
-        <div class="col-10 mx-auto">
+        <div class="col-sm-12 col-md-10 mx-auto">
             <div class="content">
                 <!-- Remplissage de la liste avec Javascript -->
                 <ul id="list">
@@ -26,7 +26,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-10 mx-auto">
+        <div class="col-sm-12 col-md-10 mx-auto">
             <div class="add-to-do">
                 <form action="" id="addTask">
                     <i id="btnAddTask" class="fa fa-plus-circle"></i>