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;
}
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
+22 -16
View File
@@ -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>
src/components/Pomodoro.vue
+37 -49
View File
@@ -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;
}
}
src/components/Settings.vue
+14 -9
View File
@@ -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
+5 -1
View File
@@ -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
+116 -121
View File
@@ -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>
src/components/YtbPlayer.vue
+1 -1
View File
@@ -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 -2
View File
@@ -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++;
}
},