lucasvbr/own-workspace
1
0
Fork 0
mirror of https://github.com/LucasVbr/own-workspace.git synced 2026-05-13 17:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

full refactoring + improve responsive

Browse Source
This commit is contained in:
RemiSaurel
2022-08-26 12:43:32 +02:00
parent 0ed5f2e7eb
commit 718482cddd
8 changed files with 214 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+18 -33
View File
@@ -64,16 +64,6 @@ button:disabled {
cursor: not-allowed; cursor: not-allowed;
} }
footer {
display: flex;
justify-content: center;
margin-top: 24px;
}
footer > div {
margin-right: 16px;
}
#nav-bar { #nav-bar {
margin-top: 8px; margin-top: 8px;
margin-left: 16px; margin-left: 16px;
@@ -90,10 +80,6 @@ footer > div {
box-shadow: rgba(0, 0, 0) 0px 4px 10px; box-shadow: rgba(0, 0, 0) 0px 4px 10px;
} }
#pomodoro {
width: 100%;
}
#container { #container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -112,28 +98,27 @@ footer > div {
margin-left: 32px; 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) { @media (max-width: 330px) {
#right-side { #right-side {
display: none; 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> </style>
src/components/Infos.vue
+22 -16
View File
@@ -16,7 +16,7 @@
<div id="definition"> <div id="definition">
{{ this.word.definition }} {{ this.word.definition }}
</div> </div>
<div id="btn"> <div id="btn-newword">
<button @click="getNewWordEveryday" id="fetch" class="btn"> <button @click="getNewWordEveryday" id="fetch" class="btn">
Générer un mot Générer un mot
</button> </button>
@@ -26,7 +26,7 @@
<div id="stats"> <div id="stats">
<div class="center" v-if="displayWord"> <div class="center" v-if="displayWord">
<button @click="displayWord = false" class="btn"> <button @click="displayWord = false" class="btn">
Voir les stats Session stats
</button> </button>
</div> </div>
<div v-else> <div v-else>
@@ -35,7 +35,7 @@
Total sessions: {{this.$store.getters.nbSessions}} Total sessions: {{this.$store.getters.nbSessions}}
<div class="center"> <div class="center">
<button class="btn" id="see-words" @click="displayWord = true"> <button class="btn" id="see-words" @click="displayWord = true">
Revoir les mots English word
</button> </button>
</div> </div>
</div> </div>
@@ -148,7 +148,6 @@ export default {
position: relative; position: relative;
background: #504746; background: #504746;
width: 100%; width: 100%;
height: 300px;
border-radius: 16px; border-radius: 16px;
padding: 16px 24px 18px 24px; padding: 16px 24px 18px 24px;
color: white; color: white;
@@ -162,7 +161,6 @@ export default {
font-size: 36px; font-size: 36px;
} }
#word-definition { #word-definition {
margin-top: 16px; margin-top: 16px;
} }
@@ -179,17 +177,14 @@ export default {
font-weight: lighter; font-weight: lighter;
} }
#btn { #btn-newword {
text-align: center; text-align: center;
margin-top: 24px; margin-top: 16px;
} }
.btn { .btn {
font-size: 20px; font-size: 20px;
padding: 8px; padding: 8px;
}
#fetch {
margin-bottom: 8px; margin-bottom: 8px;
} }
@@ -205,12 +200,9 @@ export default {
#see-words { #see-words {
margin-top: 16px; margin-top: 16px;
} }
/* ********** */
@media (max-width: 835px) { /* RESPONSIVE */
#container-infos { /* ********** */
display: none;
}
}
@media (max-width: 1400px) { @media (max-width: 1400px) {
#time { #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> </style>
src/components/Pomodoro.vue
+37 -49
View File
@@ -135,7 +135,7 @@ export default {
} else { } else {
alert("SESSION TERMINÉE 👏"); alert("SESSION TERMINÉE 👏");
this.nbSessionsFinished++; this.nbSessionsFinished++;
this.$store.commit("setNbSessions"); this.$store.commit("updateNbSessionsFinished");
if (this.nbSessionsFinished === 4) { if (this.nbSessionsFinished === 4) {
this.setupPauseTimer(LONG_PAUSE); this.setupPauseTimer(LONG_PAUSE);
this.nbSessionsFinished = 0; this.nbSessionsFinished = 0;
@@ -199,9 +199,9 @@ export default {
this.seconds = "0" + this.seconds; this.seconds = "0" + this.seconds;
} }
if (this.isRestingTime) { if (this.isRestingTime) {
document.title = "PAUSE 👏 " + this.minutes + ":" + this.seconds; document.title = "🏖 " + this.minutes + ":" + this.seconds;
} else { } else {
document.title = "WORKING 🍅 " + this.minutes + ":" + this.seconds; document.title = "🍅 " + this.minutes + ":" + this.seconds;
} }
} }
}, },
@@ -305,27 +305,41 @@ export default {
-webkit-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;
}
/* ********** */
/* RESPONSIVE */
/* ********** */
@media (max-width: 835px) {
#container {
margin-top: 16px;
}
#message { #message {
font-size: 1.6rem; font-size: 1.6rem;
} }
.pomodoro {
.dot { margin-right: 8px;
height: 25px; width: 50%;
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;
} }
} }
@@ -337,38 +351,12 @@ export default {
margin-right: 8px; margin-right: 8px;
margin-left: 8px; margin-left: 8px;
} }
#container {
margin-left: 16px;
margin-right: 16px;
}
} }
@media (max-width: 835px) { @media (max-width: 550px) {
.pomodoro { .pomodoro {
margin-right: 0px;
width: 100%; 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
+14 -9
View File
@@ -1,8 +1,8 @@
<template> <template>
<div id="settings-container"> <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 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> </div>
</div> </div>
@@ -21,7 +21,7 @@ export default {
grey: "#d4d4e8", grey: "#d4d4e8",
salmon: "#E6CEBD" salmon: "#E6CEBD"
}, },
activeColor: "#504746" activeColor: "#504746",
} }
}, },
methods: { methods: {
@@ -32,14 +32,14 @@ export default {
this.$store.commit("setColorSelected", color); this.$store.commit("setColorSelected", color);
}, },
removeActiveColorFromPalette() { removeActiveColorFromPalette() {
const palette = document.querySelectorAll(".color-palette-item"); const palette = document.querySelectorAll(".bubble-item");
for (let i = 0; i < palette.length; i++) { for (let i = 0; i < palette.length; i++) {
palette[i].style.borderColor = "lightslategrey"; palette[i].style.borderColor = "lightslategrey";
} }
}, },
setFirstColor() { setFirstColor() {
// get first div of color-palette // 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; palette[0].style.borderColor = this.activeColor;
} }
}, },
@@ -52,7 +52,7 @@ export default {
<style scoped> <style scoped>
#color-palette { .bubble-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@@ -60,7 +60,7 @@ export default {
margin-bottom: 8px; margin-bottom: 8px;
} }
.color-palette-item { .bubble-item {
margin-top: 4px; margin-top: 4px;
width: 24px; width: 24px;
height: 24px; height: 24px;
@@ -69,12 +69,17 @@ export default {
border: solid 2px lightslategrey; border: solid 2px lightslategrey;
} }
@media (max-width: 675px) { /* ********** */
/* RESPONSIVE */
/* ********** */
@media (max-width: 835px) {
#color-palette { #color-palette {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
margin-top: 8px;
} }
.color-palette-item { .bubble-item {
margin-top: 0; margin-top: 0;
margin-right: 4px; margin-right: 4px;
} }
src/components/Socials.vue
+5 -1
View File
@@ -21,7 +21,11 @@ export default {
margin-top: 8px; margin-top: 8px;
} }
@media (max-width: 675px) { /* ********** */
/* RESPONSIVE */
/* ********** */
@media (max-width: 835px) {
#socials-container { #socials-container {
display: none; display: none;
} }
src/components/ToDoList.vue
+116 -121
View File
@@ -53,131 +53,126 @@ export default {
</script> </script>
<style scoped> <style scoped>
.container { .container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
max-height: 825px; max-height: 825px;
height: 100%; 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 { #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; padding-right: 16px;
margin-top: 8px;
overflow: auto;
padding-left: 16px; padding-left: 16px;
padding-bottom: 16px;
} }
#liste {
.item { padding-bottom: 8px;
display: flex; padding-left: 16px;
justify-content: space-between; max-height: 230px;
font-size: 18px; height: 100%;
margin-top: 8px; overflow: auto;
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;
}
} }
}
</style> </style>
src/components/YtbPlayer.vue
+1 -1
View File
@@ -8,7 +8,7 @@
</div> </div>
<div class="params"> <div class="params">
<button @click="prevPlaylist" >⏮</button> <button @click="prevPlaylist" >⏮</button>
<button @click="nextPlaylist" @mousedown.middle="easterEgg" id="next">⏭</button> <button @click="nextPlaylist" @keydown.shift="easterEgg" id="next">⏭</button>
</div> </div>
</div> </div>
</template> </template>
src/store/index.js
+1 -2
View File
@@ -1,6 +1,5 @@
// store/index.js // store/index.js
import Vue from "vue"; import Vue from "vue";
import Vuex from "vuex"; import Vuex from "vuex";
@@ -29,7 +28,7 @@ export default new Vuex.Store({
setColorSelected(state, color) { setColorSelected(state, color) {
state.colorSelected = color; state.colorSelected = color;
}, },
setNbSessions(state) { updateNbSessionsFinished(state) {
state.nbSessions++; state.nbSessions++;
} }
}, },