🎨 - Reformat code

This commit is contained in:
RemiSaurel
2022-08-29 14:33:35 +02:00
parent c9386b2e67
commit f98e77f552
5 changed files with 31 additions and 18 deletions
+3 -1
View File
@@ -103,12 +103,14 @@ button:disabled {
/* ********** */ /* ********** */
@media (max-width: 835px) { @media (max-width: 835px) {
#container{ #container {
flex-direction: column; flex-direction: column;
} }
#todo-container { #todo-container {
width: 100%; width: 100%;
} }
#right-side { #right-side {
margin-right: 32px; margin-right: 32px;
margin-left: 32px; margin-left: 32px;
-1
View File
@@ -144,7 +144,6 @@ export default {
resetStats() { resetStats() {
this.resetDone = true; this.resetDone = true;
this.$store.commit('resetStats'); this.$store.commit('resetStats');
console.log(this.resetDone)
}, },
}, },
mounted() { mounted() {
+17 -8
View File
@@ -18,11 +18,11 @@
<div id="time"> <div id="time">
<div id="minutes"> <div id="minutes">
<div><i @click="this.addMinutes" class="arrow up"></i></div> <div><i @click="this.addMinutes" class="arrow up"></i></div>
<span>{{minutes}}</span> <span>{{ minutes }}</span>
<div><i @click="this.substractMinutes" class="arrow down"></i></div> <div><i @click="this.substractMinutes" class="arrow down"></i></div>
</div> </div>
<span id="colon">:</span> <span id="colon">:</span>
<span id="seconds">{{seconds}}</span> <span id="seconds">{{ seconds }}</span>
</div> </div>
<div id="params"> <div id="params">
<div id="startStop"> <div id="startStop">
@@ -38,6 +38,7 @@
<script> <script>
import Stats from "@/components/Infos"; import Stats from "@/components/Infos";
const MINUTES = 25; const MINUTES = 25;
const RANGE_MINUTES = 5; const RANGE_MINUTES = 5;
const SECONDS = 0; const SECONDS = 0;
@@ -47,7 +48,7 @@ const LONG_PAUSE = 30;
export default { export default {
name: "Pomodoro", name: "Pomodoro",
components: {Stats}, components: {Stats},
data () { data() {
return { return {
minutes: MINUTES, minutes: MINUTES,
seconds: SECONDS, seconds: SECONDS,
@@ -99,7 +100,9 @@ export default {
} }
this.disableButton("start"); this.disableButton("start");
let all = document.querySelectorAll("#presetTime button"); let all = document.querySelectorAll("#presetTime button");
for (let el of all) { el.disabled = true; } for (let el of all) {
el.disabled = true;
}
}, },
pauseSession() { pauseSession() {
this.sessionStarted = false; this.sessionStarted = false;
@@ -122,7 +125,9 @@ export default {
this.prettyTime(); this.prettyTime();
clearTimeout(this.timeout); clearTimeout(this.timeout);
let all = document.querySelectorAll("#presetTime button, #start"); let all = document.querySelectorAll("#presetTime button, #start");
for (let el of all) { el.disabled = false; } for (let el of all) {
el.disabled = false;
}
this.disableButton("pause") this.disableButton("pause")
this.unlockArrows() this.unlockArrows()
}, },
@@ -182,7 +187,7 @@ export default {
dots[i].classList.add("active"); dots[i].classList.add("active");
} }
}, },
setupPauseTimer(minutes){ setupPauseTimer(minutes) {
this.isRestingTime = true; this.isRestingTime = true;
this.sessionStarted = false; this.sessionStarted = false;
this.enableButton("start"); this.enableButton("start");
@@ -192,7 +197,7 @@ export default {
this.seconds = 0; this.seconds = 0;
this.prettyTime(); this.prettyTime();
}, },
prettyTime () { prettyTime() {
if (this.minutes < 10) { if (this.minutes < 10) {
this.minutes = "0" + this.minutes; this.minutes = "0" + this.minutes;
} }
@@ -241,7 +246,7 @@ export default {
margin-bottom: 16px; margin-bottom: 16px;
} }
#startStop > button{ #startStop > button {
font-size: 32px; font-size: 32px;
text-align: center; text-align: center;
} }
@@ -327,6 +332,7 @@ export default {
margin: 12px 4px 12px 4px; margin: 12px 4px 12px 4px;
display: inline-block; display: inline-block;
} }
/* ********** */ /* ********** */
/* RESPONSIVE */ /* RESPONSIVE */
/* ********** */ /* ********** */
@@ -335,9 +341,11 @@ export default {
#container { #container {
margin-top: 16px; margin-top: 16px;
} }
#message { #message {
font-size: 1.6rem; font-size: 1.6rem;
} }
.pomodoro { .pomodoro {
margin-right: 8px; margin-right: 8px;
width: 50%; width: 50%;
@@ -348,6 +356,7 @@ export default {
#time { #time {
font-size: 38px; font-size: 38px;
} }
#colon { #colon {
margin-right: 8px; margin-right: 8px;
margin-left: 8px; margin-left: 8px;
+6 -4
View File
@@ -1,11 +1,12 @@
<template> <template>
<div id="settings-container"> <div id="settings-container">
<div id="color-palette" class="bubble-container"> <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="bubble-item" :id="color" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div> <div class="bubble-item" :id="color" :style="{backgroundColor: color, borderColor: activeColor}"
@click="setBackgroundColor($event, color)"></div>
</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -25,7 +26,7 @@ export default {
} }
}, },
methods: { methods: {
setBackgroundColor(event,color) { setBackgroundColor(event, color) {
this.removeActiveColorFromPalette() this.removeActiveColorFromPalette()
event.target.style.borderColor = this.activeColor; event.target.style.borderColor = this.activeColor;
document.body.style.backgroundColor = color; document.body.style.backgroundColor = color;
@@ -80,6 +81,7 @@ export default {
justify-content: center; justify-content: center;
margin-top: 8px; margin-top: 8px;
} }
.bubble-item { .bubble-item {
margin-top: 0; margin-top: 0;
margin-right: 4px; margin-right: 4px;
+3 -2
View File
@@ -9,7 +9,7 @@
<div id="liste" ref="todoList"> <div id="liste" ref="todoList">
<div v-for="item in items" :key="item.text" class="item" :id=item :class="item.isPinned? 'pinned' : ''"> <div v-for="item in items" :key="item.text" class="item" :id=item :class="item.isPinned? 'pinned' : ''">
<div class="text"> <div class="text">
{{item.text}} {{ item.text }}
</div> </div>
<div id="emojis"> <div id="emojis">
<div @click="pinItem(item)" id="pin"> <div @click="pinItem(item)" id="pin">
@@ -86,7 +86,7 @@ export default {
} }
}) })
}, },
saveCurrentItems(){ saveCurrentItems() {
localStorage.setItem("currentItems", JSON.stringify(this.items)); localStorage.setItem("currentItems", JSON.stringify(this.items));
} }
} }
@@ -221,6 +221,7 @@ export default {
padding-right: 16px; padding-right: 16px;
padding-left: 16px; padding-left: 16px;
} }
#liste { #liste {
padding-bottom: 8px; padding-bottom: 8px;
padding-left: 16px; padding-left: 16px;