mirror of
https://github.com/LucasVbr/own-workspace.git
synced 2026-05-13 17:21:58 +00:00
Merge branch 'dev'
This commit is contained in:
RemiSaurel
+18
-33
@@ -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>
|
||||
|
||||
+22
-16
@@ -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>
|
||||
+37
-49
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,11 @@ export default {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 675px) {
|
||||
/* ********** */
|
||||
/* RESPONSIVE */
|
||||
/* ********** */
|
||||
|
||||
@media (max-width: 835px) {
|
||||
#socials-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+170
-129
@@ -6,13 +6,18 @@
|
||||
placeholder="Ex: Finir exos maths">
|
||||
<button @click="addItem(item)" id="add_button" :disabled="this.item === ''">+</button>
|
||||
</div>
|
||||
<div id="liste">
|
||||
<div v-for="item in items" :key="item" class="item">
|
||||
<div id="text">
|
||||
{{item}}
|
||||
<div id="liste" ref="todoList">
|
||||
<div v-for="item in items" :key="item.text" class="item" :id=item :class="item.isPinned? 'pinned' : ''">
|
||||
<div class="text">
|
||||
{{item.text}}
|
||||
</div>
|
||||
<div @click="removeItem(item)" id="trash">
|
||||
🗑
|
||||
<div id="emojis">
|
||||
<div @click="pinItem(item)" id="pin">
|
||||
📌
|
||||
</div>
|
||||
<div @click="removeItem(item)" id="trash">
|
||||
🗑
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,9 +38,14 @@ export default {
|
||||
methods: {
|
||||
addItem(item) {
|
||||
const trimmedItem = item.trim();
|
||||
if (trimmedItem.length > 0 && this.items.indexOf(trimmedItem) === -1) {
|
||||
this.items = [trimmedItem].concat(this.items)
|
||||
const found = this.items.some(item => item.text === trimmedItem)
|
||||
if (trimmedItem.length > 0 && !(found)) {
|
||||
this.items.unshift({
|
||||
text: trimmedItem,
|
||||
isPinned: false
|
||||
});
|
||||
}
|
||||
this.sortArrayPinnedElements()
|
||||
this.clearItem()
|
||||
},
|
||||
removeItem(item) {
|
||||
@@ -47,137 +57,168 @@ 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.pinned {
|
||||
box-shadow: inset 0px 0px 0px 3px #fd7e7e;
|
||||
}
|
||||
|
||||
.pinned:hover {
|
||||
box-shadow: inset 0px 0px 0px 3px #ea0000;
|
||||
}
|
||||
|
||||
#emojis {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#emojis > div {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* ********** */
|
||||
/* 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>
|
||||
@@ -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>
|
||||
|
||||
+1
-2
@@ -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++;
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user