refactor css, change logos, add todo button, better responsive + UI/UX

src/App.vue

@@ -13,7 +13,18 @@
         </div>
       </div>
     </div>
-    <footer>Made with <a href="https://github.com/RemiSaurel/todoapp" target="_blank" class="name">💙</a> by <a href="https://www.linkedin.com/in/r%C3%A9mi-saurel/" target="_blank" class="name">Rémi Saurel</a> </footer>
+    <footer>
+      <div>
+        <a href="https://github.com/RemiSaurel/own-workspace" target="_blank" class="underline">
+          <img src="../src/res/github.png" alt="github" width="32" height="32">
+        </a>
+      </div>
+      <div>
+        <a href="https://www.linkedin.com/in/r%C3%A9mi-saurel/" target="_blank" class="underline">
+          <img src="../src/res/linkedin.png" alt="github" width="32" height="32">
+        </a>
+      </div>
+    </footer>
   </div>
 </template>
 
@@ -48,23 +59,36 @@ a {
 body {
   background: #fdde95;
 }
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
 footer {
-  text-align: center;
-  margin-top: 16px;
-  margin-bottom: 0;
-  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+footer > div {
+  margin-right: 16px;
 }
 
 #ytb-player {
   background: #504746;
   margin-top: 16px;
   border-radius: 16px;
-  padding: 0 24px 12px 24px;
+  padding: 24px;
   box-shadow: rgba(0, 0, 0) 0px 4px 10px;
 }
 
 #pomodoro {
   width: 100%;
+
 }
 
 #container {
@@ -74,7 +98,7 @@ footer {
 }
 
 #todo-container {
-  width: 30%;
+  width: 40%;
   margin-right: 16px;
 }
 
@@ -92,7 +116,7 @@ footer {
   }
 }
 
-@media (max-width: 535px) {
+@media (max-width: 675px) {
   #todo-container {
     width: 100%;
   }
@@ -100,32 +124,24 @@ footer {
     width: auto;
     margin-top: 16px;
   }
-  #time {
-    font-size: 32px!important;
-  }
 
-  #todolist {
-    margin-right: 32px;
-  }
   #container {
     display: block;
   }
   #ytb-player {
     display: none;
   }
-  #container-infos {
-    display: none;
-  }
+
 }
 
 /* TEXT UNDERLINE */
-.name {
+.underline {
   display: inline-block;
   position: relative;
   color: #79624c;
 }
 
-.name:after {
+.underline:after {
   content: '';
   position: absolute;
   width: 100%;
@@ -138,7 +154,7 @@ footer {
   transition: transform 0.5s ease-out;
 }
 
-.name:hover:after {
+.underline:hover:after {
   transform: scaleX(1);
   transform-origin: bottom left;
 }

src/components/Infos.vue

@@ -68,14 +68,14 @@ export default {
       return `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}`;
     },
     getNewWordEveryday() {
+      document.getElementById("fetch").disabled = true;
       // fetch a new english word everyday
       fetch("https://random-word-api.herokuapp.com/word?number=1")
         .then(response => response.json())
         .then(data => {
           // uppercase first letter of data[0]
-          this.word.word = data[0].charAt(0).toUpperCase() + data[0].slice(1);
-          this.getDefinition(this.word.word);
-          this.word.word += " : "
+          const word = data[0];
+          this.getDefinition(word);
         })
     },
     getDefinition(word) {
@@ -84,18 +84,20 @@ export default {
           .then(response => response.json())
           .then(data => {
             if (data.length > 0) {
-              this.word.definition = data[0].meanings[0].definitions[0];
+              document.getElementById("fetch").disabled = false;
+              const wordUppercased = word.charAt(0).toUpperCase() + word.slice(1);
+              this.word.word = wordUppercased + " : ";
+              this.word.definition = data[0].meanings[0].definitions[0].definition;
             } else {
               // get another word if the word is not found
               this.getNewWordEveryday();
             }
-            this.word.definition = data[0].meanings[0].definitions[0].definition;
           }).catch(error => {
               console.log(error);
           });
     }
   },
-  created() {
+  mounted() {
     this.generateDateOfTheDay();
     this.getCurrentTime();
     this.getNewWordEveryday()
@@ -123,11 +125,6 @@ export default {
   font-size: 36px;
 }
 
-@media (max-width: 1400px) {
-  #time {
-    display: none;
-  }
-}
 
 #word-definition {
   margin-top: 16px;
@@ -155,4 +152,16 @@ export default {
   padding: 8px;
 }
 
+@media (max-width: 835px) {
+  #container-infos {
+    display: none;
+  }
+}
+
+@media (max-width: 1400px) {
+  #time {
+    display: none;
+  }
+}
+
 </style>

src/components/Pomodoro.vue

@@ -282,11 +282,65 @@ export default {
   width: 10vw;
 }
 
-@media (max-width: 635px) {
-  #container-infos {
-    display: none;
+.arrow {
+  border: solid white;
+  border-width: 0 6px 6px 0;
+  font-size: 1rem;
+  display: inline-block;
+  padding: 6px;
+}
+
+.arrow:hover {
+  border: solid mediumseagreen;
+  border-width: 0 6px 6px 0;
+  cursor: pointer;
+}
+
+.up {
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}
+
+.down {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+@media (min-width: 635px) {
+  #message {
+    font-size: 1.6rem;
   }
 
+  .dot {
+    height: 25px;
+    width: 25px;
+    background-color: lightslategrey;
+    border-radius: 50%;
+    margin: 12px 4px 12px 4px;
+    display: inline-block;
+  }
+
+  .active {
+    height: 25px;
+    width: 25px;
+    background-color: mediumseagreen;
+    border-radius: 50%;
+    margin: 12px 4px 12px 4px;
+    display: inline-block;
+  }
+}
+
+@media (max-width: 675px) {
+  #time {
+    font-size: 38px;
+  }
+  #colon {
+    margin-right: 8px;
+    margin-left: 8px;
+  }
+}
+
+@media (max-width: 835px) {
   .pomodoro {
     margin-right: 0px;
     width: 100%;
@@ -313,53 +367,7 @@ export default {
     margin: 12px 4px 12px 4px;
     display: inline-block;
   }
-
 }
 
-@media (min-width: 635px) {
-  #message {
-    font-size: 1.6rem;
-  }
-
-  .dot {
-    height: 25px;
-    width: 25px;
-    background-color: lightslategrey;
-    border-radius: 50%;
-    margin: 12px 4px 12px 4px;
-    display: inline-block;
-  }
-
-  .active {
-    height: 25px;
-    width: 25px;
-    background-color: mediumseagreen;
-    border-radius: 50%;
-    margin: 12px 4px 12px 4px;
-    display: inline-block;
-  }
-}
-.arrow {
-  border: solid white;
-  border-width: 0 6px 6px 0;
-  font-size: 1rem;
-  display: inline-block;
-  padding: 6px;
-}
-
-.arrow:hover {
-  border: solid mediumseagreen;
-  border-width: 0 6px 6px 0;
-}
-
-.up {
-  transform: rotate(-135deg);
-  -webkit-transform: rotate(-135deg);
-}
-
-.down {
-  transform: rotate(45deg);
-  -webkit-transform: rotate(45deg);
-}
 
 </style>

src/components/ToDoList.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="container">
     <div id="todolist">
-      <div>
+      <div id="input">
         <input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item"
                placeholder="Ex: Finir exos maths">
+        <button @click="addItem(item)" id="add_button">+</button>
       </div>
       <div id="liste">
         <div v-for="item in items" :key="item" class="item">
@@ -50,6 +51,9 @@ export default {
   .container {
     display: flex;
     justify-content: space-between;
+    max-height: 770px;
+    overflow: auto;
+    height: 100%;
   }
 
   #pomodoro {
@@ -70,20 +74,56 @@ export default {
     min-width: 150px;
     height: 52px;
     padding: 12px 20px;
-    margin: 8px 0;
+    margin: 8px 16px 0px 0px;
     box-sizing: border-box;
     border-radius: 16px;
-    border: 3px solid #79624c;
+    border: 3px solid #a59182;
+  }
+
+  #todo_input:hover {
+    border: 3px solid #87725f;
   }
 
   #todo_input:focus {
     outline: none !important;
-    border: 3px solid #343197;
+    border: 3px solid #5b4735;
+  }
+
+  #input {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  #add_button {
+    font-size: 2rem;
+    line-height: 1;
+    width: 52px;
+    min-width: 52px;
+    height: 52px;
+    margin: 8px 16px 0px 0px;
+    border-radius: 16px;
+    border: 3px solid #79624c;
+    background-color: #79624c;
+    color: white;
+  }
+
+  #add_button:hover {
+    border: 3px solid #5b4735;
+    background-color: #5b4735;
+    color: white;
+  }
+
+  #add_button:active {
+    border: 3px solid #3a2b18;
+    background-color: #3a2b18;
+    color: white;
   }
 
   #liste {
     display: flex;
     flex-direction: column;
+    padding-right: 16px;
   }
 
   .item {
@@ -95,13 +135,12 @@ export default {
     padding: 12px 22px 12px 22px;
     border-radius: 12px;
     min-width: 82px;
-    box-shadow: rgba(111, 111, 111, 0.2) 0px 7px 29px 0px;
     word-break: break-all;
     background-color: white;
   }
 
   .item:hover {
-    box-shadow: #ff0000 0px 1px 6px 0px;
+    box-shadow: #79624c 0px 1px 6px 0px;
   }
 
   #trash {
@@ -109,4 +148,21 @@ export default {
     padding-left: 8px;
     cursor: pointer;
   }
+
+  @media (max-width: 675px) {
+    #add_button {
+      margin-right: 0;
+      margin-top: 8px;
+    }
+    #todolist {
+      margin-right: 32px;
+    }
+    #liste {
+      padding-right: 0;
+      margin-top: 8px;
+      max-height: 320px;
+      height: 100%;
+      overflow: auto;
+    }
+  }
 </style>

src/components/YtbPlayer.vue

@@ -56,7 +56,6 @@ export default {
 <style scoped>
 
 .ytb {
-  margin-top: 24px;
   width: 100%;
 }