From 718482cdddf5d8b44a4a769695bd50ee69de7cb0 Mon Sep 17 00:00:00 2001
From: RemiSaurel <r.saurel5@gmail.com>
Date: Fri, 26 Aug 2022 12:43:32 +0200
Subject: [PATCH] full refactoring + improve responsive

---
 src/App.vue                  |  51 +++-----
 src/components/Infos.vue     |  38 +++---
 src/components/Pomodoro.vue  |  86 ++++++-------
 src/components/Settings.vue  |  23 ++--
 src/components/Socials.vue   |   6 +-
 src/components/ToDoList.vue  | 237 +++++++++++++++++------------------
 src/components/YtbPlayer.vue |   2 +-
 src/store/index.js           |   3 +-
 8 files changed, 214 insertions(+), 232 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8e72fac..356042a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -64,16 +64,6 @@ button:disabled {
   cursor: not-allowed;
 }
 
-footer {
-  display: flex;
-  justify-content: center;
-  margin-top: 24px;
-}
-
-footer > div {
-  margin-right: 16px;
-}
-
 #nav-bar {
   margin-top: 8px;
   margin-left: 16px;
@@ -90,10 +80,6 @@ footer > div {
   box-shadow: rgba(0, 0, 0) 0px 4px 10px;
 }
 
-#pomodoro {
-  width: 100%;
-}
-
 #container {
   display: flex;
   flex-direction: row;
@@ -112,28 +98,27 @@ footer > div {
   margin-left: 32px;
 }
 
+/* ********** */
+/* RESPONSIVE */
+/* ********** */
+
+@media (max-width: 835px) {
+  #container{
+    flex-direction: column;
+  }
+  #todo-container {
+    width: 100%;
+  }
+  #right-side {
+    margin-right: 32px;
+    margin-left: 32px;
+    width: auto;
+  }
+}
+
 @media (max-width: 330px) {
   #right-side {
     display: none;
   }
 }
-
-@media (max-width: 675px) {
-  #todo-container {
-    width: 100%;
-  }
-  #right-side {
-    width: auto;
-    margin-top: 16px;
-  }
-
-  #container {
-    display: block;
-  }
-  #ytb-player {
-    display: none;
-  }
-
-}
-
 </style>
diff --git a/src/components/Infos.vue b/src/components/Infos.vue
index aaaa43e..e7a9dda 100644
--- a/src/components/Infos.vue
+++ b/src/components/Infos.vue
@@ -16,7 +16,7 @@
       <div id="definition">
         {{ this.word.definition }}
       </div>
-      <div id="btn">
+      <div id="btn-newword">
         <button @click="getNewWordEveryday" id="fetch" class="btn">
           Générer un mot
         </button>
@@ -26,7 +26,7 @@
     <div id="stats">
       <div class="center" v-if="displayWord">
         <button @click="displayWord = false" class="btn">
-          Voir les stats
+          Session stats
         </button>
       </div>
       <div v-else>
@@ -35,7 +35,7 @@
         Total sessions: {{this.$store.getters.nbSessions}}
         <div class="center">
           <button class="btn" id="see-words" @click="displayWord = true">
-            Revoir les mots
+            English word
           </button>
         </div>
       </div>
@@ -148,7 +148,6 @@ export default {
   position: relative;
   background: #504746;
   width: 100%;
-  height: 300px;
   border-radius: 16px;
   padding: 16px 24px 18px 24px;
   color: white;
@@ -162,7 +161,6 @@ export default {
   font-size: 36px;
 }
 
-
 #word-definition {
   margin-top: 16px;
 }
@@ -179,17 +177,14 @@ export default {
   font-weight: lighter;
 }
 
-#btn {
+#btn-newword {
   text-align: center;
-  margin-top: 24px;
+  margin-top: 16px;
 }
 
 .btn {
   font-size: 20px;
   padding: 8px;
-}
-
-#fetch {
   margin-bottom: 8px;
 }
 
@@ -205,12 +200,9 @@ export default {
 #see-words {
   margin-top: 16px;
 }
-
-@media (max-width: 835px) {
-  #container-infos {
-    display: none;
-  }
-}
+/* ********** */
+/* RESPONSIVE */
+/* ********** */
 
 @media (max-width: 1400px) {
   #time {
@@ -218,4 +210,18 @@ export default {
   }
 }
 
+@media (max-width: 835px) {
+  #container-infos {
+    width: 50%;
+    margin-left: 8px;
+  }
+}
+
+
+@media (max-width: 550px) {
+  #container-infos {
+    display: none;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/Pomodoro.vue b/src/components/Pomodoro.vue
index d09afbf..82e9f5b 100644
--- a/src/components/Pomodoro.vue
+++ b/src/components/Pomodoro.vue
@@ -135,7 +135,7 @@ export default {
         } else {
           alert("SESSION TERMINÉE 👏");
           this.nbSessionsFinished++;
-          this.$store.commit("setNbSessions");
+          this.$store.commit("updateNbSessionsFinished");
           if (this.nbSessionsFinished === 4) {
             this.setupPauseTimer(LONG_PAUSE);
             this.nbSessionsFinished = 0;
@@ -199,9 +199,9 @@ export default {
         this.seconds = "0" + this.seconds;
       }
       if (this.isRestingTime) {
-        document.title = "PAUSE 👏 " + this.minutes + ":" + this.seconds;
+        document.title = "🏖 " + this.minutes + ":" + this.seconds;
       } else {
-        document.title = "WORKING 🍅 " + this.minutes + ":" + this.seconds;
+        document.title = "🍅 " + this.minutes + ":" + this.seconds;
       }
     }
   },
@@ -305,27 +305,41 @@ export default {
   -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;
+}
+/* ********** */
+/* RESPONSIVE */
+/* ********** */
+
+@media (max-width: 835px) {
+  #container {
+    margin-top: 16px;
+  }
   #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;
+  .pomodoro {
+    margin-right: 8px;
+    width: 50%;
   }
 }
 
@@ -337,38 +351,12 @@ export default {
     margin-right: 8px;
     margin-left: 8px;
   }
-  #container {
-    margin-left: 16px;
-    margin-right: 16px;
-  }
 }
 
-@media (max-width: 835px) {
+@media (max-width: 550px) {
   .pomodoro {
-    margin-right: 0px;
     width: 100%;
-  }
-
-  #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;
+    margin-right: 0;
   }
 }
 
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index f7dca1f..fbae9bd 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,8 +1,8 @@
 <template>
 <div id="settings-container">
-  <div id="color-palette">
+  <div id="color-palette" class="bubble-container">
     <div v-for="color in colors" :key="color.id">
-      <div class="color-palette-item" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div>
+      <div class="bubble-item" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div>
     </div>
   </div>
 </div>
@@ -21,7 +21,7 @@ export default {
         grey: "#d4d4e8",
         salmon: "#E6CEBD"
       },
-      activeColor: "#504746"
+      activeColor: "#504746",
     }
   },
   methods: {
@@ -32,14 +32,14 @@ export default {
       this.$store.commit("setColorSelected", color);
     },
     removeActiveColorFromPalette() {
-      const palette = document.querySelectorAll(".color-palette-item");
+      const palette = document.querySelectorAll(".bubble-item");
       for (let i = 0; i < palette.length; i++) {
         palette[i].style.borderColor = "lightslategrey";
       }
     },
     setFirstColor() {
       // get first div of color-palette
-      const palette = document.querySelectorAll(".color-palette-item");
+      const palette = document.querySelectorAll(".bubble-item");
       palette[0].style.borderColor = this.activeColor;
     }
   },
@@ -52,7 +52,7 @@ export default {
 
 <style scoped>
 
-#color-palette {
+.bubble-container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -60,7 +60,7 @@ export default {
   margin-bottom: 8px;
 }
 
-.color-palette-item {
+.bubble-item {
   margin-top: 4px;
   width: 24px;
   height: 24px;
@@ -69,12 +69,17 @@ export default {
   border: solid 2px lightslategrey;
 }
 
-@media (max-width: 675px) {
+/* ********** */
+/* RESPONSIVE */
+/* ********** */
+
+@media (max-width: 835px) {
   #color-palette {
     flex-direction: row;
     justify-content: center;
+    margin-top: 8px;
   }
-  .color-palette-item {
+  .bubble-item {
     margin-top: 0;
     margin-right: 4px;
   }
diff --git a/src/components/Socials.vue b/src/components/Socials.vue
index e0d5404..6eee7cf 100644
--- a/src/components/Socials.vue
+++ b/src/components/Socials.vue
@@ -21,7 +21,11 @@ export default {
   margin-top: 8px;
 }
 
-@media (max-width: 675px) {
+/* ********** */
+/* RESPONSIVE */
+/* ********** */
+
+@media (max-width: 835px) {
   #socials-container {
     display: none;
   }
diff --git a/src/components/ToDoList.vue b/src/components/ToDoList.vue
index 6b7cc58..a70fde3 100644
--- a/src/components/ToDoList.vue
+++ b/src/components/ToDoList.vue
@@ -53,131 +53,126 @@ export default {
 </script>
 
 <style scoped>
-  .container {
-    display: flex;
-    justify-content: space-between;
-    max-height: 825px;
-    height: 100%;
-  }
+.container {
+  display: flex;
+  justify-content: space-between;
+  max-height: 825px;
+  height: 100%;
+}
 
+#todolist {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+#todo_input {
+  font-size: 1.2rem;
+  width: 100%;
+  min-width: 150px;
+  height: 52px;
+  padding: 12px 20px;
+  margin-right: 16px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  border: 3px solid #87725f;
+}
+
+#todo_input:hover {
+  border: 3px solid #5b4b3e;
+}
+
+#todo_input:focus {
+  outline: none !important;
+  border: 3px solid #5b4735;
+}
+
+#input {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-top: 8px;
+  vertical-align: baseline;
+}
+
+#add_button {
+  font-size: 2rem;
+  line-height: 1;
+  width: 52px;
+  min-width: 52px;
+  height: 52px;
+  border-radius: 16px;
+  border: 3px solid #504746;
+  background-color: #504746;
+  color: white;
+  user-select: none;
+}
+
+#add_button:disabled {
+  border: 3px solid #928585;
+  background-color: #928585;
+  pointer-events: none;
+}
+
+#add_button:hover {
+  border: 3px solid #413838;
+  background-color: #413838;
+}
+
+#add_button:active {
+  border: 3px solid #2f2828;
+  background-color: #2f2828;
+}
+
+#liste {
+  display: flex;
+  flex-direction: column;
+  padding-right: 16px;
+  margin-top: 8px;
+  overflow: auto;
+  padding-left: 16px;
+  padding-bottom: 16px;
+}
+
+.item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 18px;
+  margin-top: 8px;
+  align-items: center;
+  padding: 12px 22px 12px 22px;
+  border-radius: 12px;
+  min-width: 82px;
+  word-break: break-all;
+  background-color: white;
+}
+
+.item:hover {
+  box-shadow: #79624c 0px 1px 6px 0px;
+}
+
+#trash {
+  font-size: 20px;
+  padding-left: 8px;
+  cursor: pointer;
+}
+
+/* ********** */
+/* RESPONSIVE */
+/* ********** */
+
+@media (max-width: 835px) {
   #todolist {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  #todo_input {
-    font-size: 1.2rem;
-    width: 100%;
-    min-width: 150px;
-    height: 52px;
-    padding: 12px 20px;
-    margin: 8px 16px 0px 0px;
-    box-sizing: border-box;
-    border-radius: 16px;
-    border: 3px solid #87725f;
-  }
-
-  #todo_input:hover {
-    border: 3px solid #5b4b3e;
-  }
-
-  #todo_input:focus {
-    outline: none !important;
-    border: 3px solid #5b4735;
-  }
-
-  #input {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-left: 16px;
-  }
-
-  #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 #504746;
-    background-color: #504746;
-    color: white;
-    user-select: none;
-  }
-
-  #add_button:disabled {
-    border: 3px solid #928585;
-    background-color: #928585;
-    pointer-events: none;
-  }
-
-  #add_button:hover {
-    border: 3px solid #413838;
-    background-color: #413838;
-  }
-
-  #add_button:active {
-    border: 3px solid #2f2828;
-    background-color: #2f2828;
-  }
-
-  #liste {
-    display: flex;
-    flex-direction: column;
     padding-right: 16px;
-    margin-top: 8px;
-    overflow: auto;
     padding-left: 16px;
-    padding-bottom: 16px;
   }
-
-  .item {
-    display: flex;
-    justify-content: space-between;
-    font-size: 18px;
-    margin-top: 8px;
-    align-items: center;
-    padding: 12px 22px 12px 22px;
-    border-radius: 12px;
-    min-width: 82px;
-    word-break: break-all;
-    background-color: white;
-  }
-
-  .item:hover {
-    box-shadow: #79624c 0px 1px 6px 0px;
-  }
-
-  #trash {
-    font-size: 20px;
-    padding-left: 8px;
-    cursor: pointer;
-  }
-
-  @media (max-width: 675px) {
-    #add_button {
-      margin-top: 8px;
-    }
-    #todolist {
-      padding-right: 32px;
-      padding-left: 32px;
-    }
-    #liste {
-      padding-bottom: 8px;
-      padding-left: 16px;
-      max-height: 320px;
-      height: 100%;
-      overflow: auto;
-    }
-
-    #input {
-      padding-left: 16px;
-    }
-    .item:hover {
-      box-shadow: #79624c 0px 1px 6px 0px;
-    }
+  #liste {
+    padding-bottom: 8px;
+    padding-left: 16px;
+    max-height: 230px;
+    height: 100%;
+    overflow: auto;
   }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/YtbPlayer.vue b/src/components/YtbPlayer.vue
index 5ad13e5..c5256db 100644
--- a/src/components/YtbPlayer.vue
+++ b/src/components/YtbPlayer.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="params">
       <button @click="prevPlaylist" >⏮</button>
-      <button @click="nextPlaylist" @mousedown.middle="easterEgg" id="next">⏭</button>
+      <button @click="nextPlaylist" @keydown.shift="easterEgg" id="next">⏭</button>
     </div>
   </div>
 </template>
diff --git a/src/store/index.js b/src/store/index.js
index 7795e76..bcf28cb 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,5 @@
 // store/index.js
 
-
 import Vue from "vue";
 import Vuex from "vuex";
 
@@ -29,7 +28,7 @@ export default new Vuex.Store({
         setColorSelected(state, color) {
             state.colorSelected = color;
         },
-        setNbSessions(state) {
+        updateNbSessionsFinished(state) {
             state.nbSessions++;
         }
     },