lucasvbr/archived-own-workspace
1
0
Fork 0
mirror of https://github.com/LucasVbr/own-workspace.git synced 2026-05-19 10:53:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI + widgets

Browse Source
This commit is contained in:
RemiSaurel
2022-08-15 23:11:40 +02:00
parent f4727ef8d8
commit 5b0813e2a2
3 changed files with 92 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+13 -3
View File
@@ -55,6 +55,17 @@ footer {
width: 100%; width: 100%;
} }
#ytb-player {
background: #504746;
margin-top: 16px;
border-radius: 16px;
padding: 0 24px 12px 24px;
}
#pomodoro {
width: 100%;
}
#container { #container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -82,16 +93,15 @@ footer {
@media (min-width: 330px) { @media (min-width: 330px) {
#right-side { #right-side {
display: flex; display: flex;
width: 50%; width: 60%;
flex-direction: column; flex-direction: column;
margin-right: 32px; margin-right: 32px;
margin-left: 32px; margin-left: 32px;
} }
} }
#todo-container { #todo-container {
width: 50%; width: 30%;
margin-right: 16px; margin-right: 16px;
max-width: 500px; max-width: 500px;
} }
src/components/Pomodoro.vue
+52 -41
View File
@@ -1,39 +1,43 @@
<template> <template>
<div class="pomodoro"> <div id="container">
<div id="dot-container"> <div class="pomodoro">
<span class="dot"></span> <div id="dot-container">
<span class="dot"></span> <span class="dot"></span>
<span class="dot"></span> <span class="dot"></span>
<span class="dot"></span> <span class="dot"></span>
</div> <span class="dot"></span>
<div id="message">
<div v-if="this.isRestingTime">
Pause time 🎉
</div> </div>
<div v-else> <div id="message">
Work time 📚 <div v-if="this.isRestingTime">
</div> Pause time 🎉
</div> </div>
<div id="time"> <div v-else>
<div id="minutes"> Work time 📚
<div><i @click="this.addMinutes" class="arrow up"></i></div> </div>
<span>{{minutes}}</span> </div>
<div><i @click="this.substractMinutes" class="arrow down"></i></div> <div id="time">
</div> <div id="minutes">
<span id="colon">:</span> <div><i @click="this.addMinutes" class="arrow up"></i></div>
<span id="seconds">{{seconds}}</span> <span>{{minutes}}</span>
</div> <div><i @click="this.substractMinutes" class="arrow down"></i></div>
<div id="params"> </div>
<div id="startStop"> <span id="colon">:</span>
<button @click="startSession" id="start">▶️</button> <span id="seconds">{{seconds}}</span>
<button @click="pauseSession" id="pause" disabled>⏸</button> </div>
<button @click="resetSession" id="reset">🔄</button> <div id="params">
<div id="startStop">
<button @click="startSession" id="start">▶️</button>
<button @click="pauseSession" id="pause" disabled>⏸</button>
<button @click="resetSession" id="reset">🔄</button>
</div>
</div> </div>
</div> </div>
<stats></stats>
</div> </div>
</template> </template>
<script> <script>
import Stats from "@/components/Stats";
const MINUTES = 25; const MINUTES = 25;
const RANGE_MINUTES = 5; const RANGE_MINUTES = 5;
const SECONDS = 0; const SECONDS = 0;
@@ -42,6 +46,7 @@ const LONG_PAUSE = 30;
export default { export default {
name: "Pomodoro", name: "Pomodoro",
components: {Stats},
data () { data () {
return { return {
minutes: MINUTES, minutes: MINUTES,
@@ -190,6 +195,18 @@ export default {
<style scoped> <style scoped>
.pomodoro { .pomodoro {
text-align: center; text-align: center;
color: white;
background: #504746;
border-radius: 16px;
padding-top: 8px;
padding-bottom: 16px;
margin-right: 16px;
}
#container {
display: flex;
flex-direction: row;
margin-top: 8px;
} }
#time { #time {
@@ -204,7 +221,6 @@ export default {
#startStop > button{ #startStop > button{
font-size: 32px; font-size: 32px;
width: 120px;
text-align: center; text-align: center;
} }
@@ -244,19 +260,11 @@ export default {
width: 10vw; width: 10vw;
} }
@media (max-width: 490px) { @media (max-width: 635px) {
#message { #message {
display: none; display: none;
} }
}
@media (min-width: 490px) {
#message {
font-size: 1.6rem;
}
}
@media (max-width: 390px) {
.dot { .dot {
display: none; display: none;
} }
@@ -266,7 +274,11 @@ export default {
} }
} }
@media (min-width: 390px) { @media (min-width: 635px) {
#message {
font-size: 1.6rem;
}
.dot { .dot {
height: 25px; height: 25px;
width: 25px; width: 25px;
@@ -285,9 +297,8 @@ export default {
display: inline-block; display: inline-block;
} }
} }
.arrow { .arrow {
border: solid black; border: solid white;
border-width: 0 6px 6px 0; border-width: 0 6px 6px 0;
font-size: 1rem; font-size: 1rem;
display: inline-block; display: inline-block;
src/components/Stats.vue
+27
View File
@@ -0,0 +1,27 @@
<template>
<div id="container-stats">
NEWS COMING SOON 👀
</div>
</template>
<script>
export default {
name: "Stats",
}
</script>
<style scoped>
#container-stats {
background: #504746;
width: 100%;
border-radius: 16px;
padding: 10% 12px 8px 12px;
color: white;
text-align: center;
vertical-align: center;
font-size: 24px;
}
</style>