Merge branch 'dev'

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>

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) {
+/* RESPONSIVE */
-  #container-infos {
+/* ********** */
-    display: none;
-  }
-}
 
 @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>

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 {
-  #message {
   font-size: 1.6rem;
-  }
+}
 
-  .dot {
+.dot {
   height: 25px;
   width: 25px;
   background-color: lightslategrey;
   border-radius: 50%;
   margin: 12px 4px 12px 4px;
   display: inline-block;
-  }
+}
 
-  .active {
+.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;
+  }
+  .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%;
-  }
+    margin-right: 0;
-
-  #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;
   }
 }
 

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;
   }

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;
   }

src/components/ToDoList.vue

@@ -6,10 +6,14 @@
                placeholder="Ex: Finir exos maths">
         <button @click="addItem(item)" id="add_button" :disabled="this.item === ''">+</button>
       </div>
-      <div id="liste">
+      <div id="liste" ref="todoList">
-        <div v-for="item in items" :key="item" class="item">
+        <div v-for="item in items" :key="item.text" class="item" :id=item :class="item.isPinned? 'pinned' : ''">
-          <div id="text">
+          <div class="text">
-            {{item}}
+            {{item.text}}
+          </div>
+          <div id="emojis">
+            <div @click="pinItem(item)" id="pin">
+              📌
             </div>
             <div @click="removeItem(item)" id="trash">
               🗑
@@ -18,6 +22,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -33,9 +38,14 @@ export default {
   methods: {
     addItem(item) {
       const trimmedItem = item.trim();
-      if (trimmedItem.length > 0 && this.items.indexOf(trimmedItem) === -1) {
+      const found = this.items.some(item => item.text === trimmedItem)
-        this.items = [trimmedItem].concat(this.items)
+      if (trimmedItem.length > 0 && !(found)) {
+        this.items.unshift({
+          text: trimmedItem,
+          isPinned: false
+        });
       }
+      this.sortArrayPinnedElements()
       this.clearItem()
     },
     removeItem(item) {
@@ -47,84 +57,109 @@ export default {
     },
     clearItem() {
       this.item = ""
+    },
+    pinItem(item) {
+      if (item.isPinned) {
+        item.isPinned = false
+        this.sortArrayPinnedElements()
+      } else {
+        item.isPinned = true
+        this.$nextTick(() => {
+          const pinnedElement = document.getElementById(item)
+          pinnedElement.scrollIntoView({behavior: "smooth"})
+        });
+        this.sortArrayPinnedElements()
+      }
+    },
+    sortArrayPinnedElements() {
+      this.items.sort((a, b) => {
+        if (a.isPinned && !b.isPinned) {
+          return -1
+        } else if (!a.isPinned && b.isPinned) {
+          return 1
+        } else {
+          return 0
+        }
+      })
     }
   }
 }
 </script>
 
 <style scoped>
-  .container {
+.container {
   display: flex;
   justify-content: space-between;
   max-height: 825px;
   height: 100%;
-  }
+}
 
-  #todolist {
+#todolist {
   display: flex;
   flex-direction: column;
   width: 100%;
-  }
+}
 
-  #todo_input {
+#todo_input {
   font-size: 1.2rem;
   width: 100%;
   min-width: 150px;
   height: 52px;
   padding: 12px 20px;
-    margin: 8px 16px 0px 0px;
+  margin-right: 16px;
   box-sizing: border-box;
   border-radius: 16px;
   border: 3px solid #87725f;
-  }
+}
 
-  #todo_input:hover {
+#todo_input:hover {
   border: 3px solid #5b4b3e;
-  }
+}
 
-  #todo_input:focus {
+#todo_input:focus {
   outline: none !important;
   border: 3px solid #5b4735;
-  }
+}
 
-  #input {
+#input {
   display: flex;
   justify-content: space-between;
-    align-items: center;
   padding-left: 16px;
-  }
+  padding-right: 16px;
+  margin-top: 8px;
+  vertical-align: baseline;
+}
 
-  #add_button {
+#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 {
+#add_button:disabled {
   border: 3px solid #928585;
   background-color: #928585;
   pointer-events: none;
-  }
+}
 
-  #add_button:hover {
+#add_button:hover {
   border: 3px solid #413838;
   background-color: #413838;
-  }
+}
 
-  #add_button:active {
+#add_button:active {
   border: 3px solid #2f2828;
   background-color: #2f2828;
-  }
+}
 
-  #liste {
+#liste {
   display: flex;
   flex-direction: column;
   padding-right: 16px;
@@ -132,9 +167,9 @@ export default {
   overflow: auto;
   padding-left: 16px;
   padding-bottom: 16px;
-  }
+}
 
-  .item {
+.item {
   display: flex;
   justify-content: space-between;
   font-size: 18px;
@@ -145,39 +180,45 @@ export default {
   min-width: 82px;
   word-break: break-all;
   background-color: white;
-  }
+}
 
-  .item:hover {
+.item:hover {
   box-shadow: #79624c 0px 1px 6px 0px;
-  }
+}
 
-  #trash {
+.pinned {
-    font-size: 20px;
+  box-shadow: inset 0px 0px 0px 3px #fd7e7e;
-    padding-left: 8px;
+}
+
+.pinned:hover {
+  box-shadow: inset 0px 0px 0px 3px #ea0000;
+}
+
+#emojis {
+  display: flex;
   cursor: pointer;
-  }
+  margin-left: 8px;
+}
 
-  @media (max-width: 675px) {
+#emojis > div {
-    #add_button {
+  margin-left: 8px;
-      margin-top: 8px;
+}
-    }
+
+/* ********** */
+/* RESPONSIVE */
+/* ********** */
+
+@media (max-width: 835px) {
   #todolist {
-      padding-right: 32px;
+    padding-right: 16px;
-      padding-left: 32px;
+    padding-left: 16px;
   }
   #liste {
     padding-bottom: 8px;
     padding-left: 16px;
-      max-height: 320px;
+    max-height: 230px;
     height: 100%;
     overflow: auto;
   }
-
+}
-    #input {
-      padding-left: 16px;
-    }
-    .item:hover {
-      box-shadow: #79624c 0px 1px 6px 0px;
-    }
-  }
 </style>

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>

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++;
         }
     },