mirror of
https://github.com/LucasVbr/own-workspace.git
synced 2026-05-19 10:53:19 +00:00
refactor css, change logos, add todo button, better responsive + UI/UX
This commit is contained in:
RemiSaurel
+20
-11
@@ -68,14 +68,14 @@ export default {
|
||||
return `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}`;
|
||||
},
|
||||
getNewWordEveryday() {
|
||||
document.getElementById("fetch").disabled = true;
|
||||
// fetch a new english word everyday
|
||||
fetch("https://random-word-api.herokuapp.com/word?number=1")
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// uppercase first letter of data[0]
|
||||
this.word.word = data[0].charAt(0).toUpperCase() + data[0].slice(1);
|
||||
this.getDefinition(this.word.word);
|
||||
this.word.word += " : "
|
||||
const word = data[0];
|
||||
this.getDefinition(word);
|
||||
})
|
||||
},
|
||||
getDefinition(word) {
|
||||
@@ -84,18 +84,20 @@ export default {
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.length > 0) {
|
||||
this.word.definition = data[0].meanings[0].definitions[0];
|
||||
document.getElementById("fetch").disabled = false;
|
||||
const wordUppercased = word.charAt(0).toUpperCase() + word.slice(1);
|
||||
this.word.word = wordUppercased + " : ";
|
||||
this.word.definition = data[0].meanings[0].definitions[0].definition;
|
||||
} else {
|
||||
// get another word if the word is not found
|
||||
this.getNewWordEveryday();
|
||||
}
|
||||
this.word.definition = data[0].meanings[0].definitions[0].definition;
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
mounted() {
|
||||
this.generateDateOfTheDay();
|
||||
this.getCurrentTime();
|
||||
this.getNewWordEveryday()
|
||||
@@ -123,11 +125,6 @@ export default {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
#time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#word-definition {
|
||||
margin-top: 16px;
|
||||
@@ -155,4 +152,16 @@ export default {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 835px) {
|
||||
#container-infos {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
#time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
+57
-49
@@ -282,11 +282,65 @@ export default {
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
@media (max-width: 635px) {
|
||||
#container-infos {
|
||||
display: none;
|
||||
.arrow {
|
||||
border: solid white;
|
||||
border-width: 0 6px 6px 0;
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.arrow:hover {
|
||||
border: solid mediumseagreen;
|
||||
border-width: 0 6px 6px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.up {
|
||||
transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
.down {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 675px) {
|
||||
#time {
|
||||
font-size: 38px;
|
||||
}
|
||||
#colon {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 835px) {
|
||||
.pomodoro {
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
@@ -313,53 +367,7 @@ export default {
|
||||
margin: 12px 4px 12px 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
.arrow {
|
||||
border: solid white;
|
||||
border-width: 0 6px 6px 0;
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.arrow:hover {
|
||||
border: solid mediumseagreen;
|
||||
border-width: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.up {
|
||||
transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
.down {
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="todolist">
|
||||
<div>
|
||||
<div id="input">
|
||||
<input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item"
|
||||
placeholder="Ex: Finir exos maths">
|
||||
<button @click="addItem(item)" id="add_button">+</button>
|
||||
</div>
|
||||
<div id="liste">
|
||||
<div v-for="item in items" :key="item" class="item">
|
||||
@@ -50,6 +51,9 @@ export default {
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-height: 770px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#pomodoro {
|
||||
@@ -70,20 +74,56 @@ export default {
|
||||
min-width: 150px;
|
||||
height: 52px;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
margin: 8px 16px 0px 0px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16px;
|
||||
border: 3px solid #79624c;
|
||||
border: 3px solid #a59182;
|
||||
}
|
||||
|
||||
#todo_input:hover {
|
||||
border: 3px solid #87725f;
|
||||
}
|
||||
|
||||
#todo_input:focus {
|
||||
outline: none !important;
|
||||
border: 3px solid #343197;
|
||||
border: 3px solid #5b4735;
|
||||
}
|
||||
|
||||
#input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#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 #79624c;
|
||||
background-color: #79624c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#add_button:hover {
|
||||
border: 3px solid #5b4735;
|
||||
background-color: #5b4735;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#add_button:active {
|
||||
border: 3px solid #3a2b18;
|
||||
background-color: #3a2b18;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#liste {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -95,13 +135,12 @@ export default {
|
||||
padding: 12px 22px 12px 22px;
|
||||
border-radius: 12px;
|
||||
min-width: 82px;
|
||||
box-shadow: rgba(111, 111, 111, 0.2) 0px 7px 29px 0px;
|
||||
word-break: break-all;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
box-shadow: #ff0000 0px 1px 6px 0px;
|
||||
box-shadow: #79624c 0px 1px 6px 0px;
|
||||
}
|
||||
|
||||
#trash {
|
||||
@@ -109,4 +148,21 @@ export default {
|
||||
padding-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 675px) {
|
||||
#add_button {
|
||||
margin-right: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
#todolist {
|
||||
margin-right: 32px;
|
||||
}
|
||||
#liste {
|
||||
padding-right: 0;
|
||||
margin-top: 8px;
|
||||
max-height: 320px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -56,7 +56,6 @@ export default {
|
||||
<style scoped>
|
||||
|
||||
.ytb {
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user