From 13302fdea4043f399cb587e99383d21a34327877 Mon Sep 17 00:00:00 2001 From: RemiSaurel Date: Thu, 25 Aug 2022 09:16:54 +0200 Subject: [PATCH] refactor css, change logos, add todo button, better responsive + UI/UX --- src/App.vue | 56 +++++++++++------- src/components/Infos.vue | 31 ++++++---- src/components/Pomodoro.vue | 106 +++++++++++++++++++---------------- src/components/ToDoList.vue | 68 ++++++++++++++++++++-- src/components/YtbPlayer.vue | 1 - src/res/github.png | Bin 0 -> 8640 bytes src/res/linkedin.png | Bin 0 -> 13004 bytes 7 files changed, 175 insertions(+), 87 deletions(-) create mode 100644 src/res/github.png create mode 100644 src/res/linkedin.png diff --git a/src/App.vue b/src/App.vue index 1228395..6550f6c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,7 +13,18 @@ - + @@ -48,23 +59,36 @@ a { body { background: #fdde95; } + +button { + cursor: pointer; +} + +button:disabled { + cursor: not-allowed; +} + footer { - text-align: center; - margin-top: 16px; - margin-bottom: 0; - width: 100%; + display: flex; + justify-content: center; + margin-top: 24px; +} + +footer > div { + margin-right: 16px; } #ytb-player { background: #504746; margin-top: 16px; border-radius: 16px; - padding: 0 24px 12px 24px; + padding: 24px; box-shadow: rgba(0, 0, 0) 0px 4px 10px; } #pomodoro { width: 100%; + } #container { @@ -74,7 +98,7 @@ footer { } #todo-container { - width: 30%; + width: 40%; margin-right: 16px; } @@ -92,7 +116,7 @@ footer { } } -@media (max-width: 535px) { +@media (max-width: 675px) { #todo-container { width: 100%; } @@ -100,32 +124,24 @@ footer { width: auto; margin-top: 16px; } - #time { - font-size: 32px!important; - } - #todolist { - margin-right: 32px; - } #container { display: block; } #ytb-player { display: none; } - #container-infos { - display: none; - } + } /* TEXT UNDERLINE */ -.name { +.underline { display: inline-block; position: relative; color: #79624c; } -.name:after { +.underline:after { content: ''; position: absolute; width: 100%; @@ -138,7 +154,7 @@ footer { transition: transform 0.5s ease-out; } -.name:hover:after { +.underline:hover:after { transform: scaleX(1); transform-origin: bottom left; } diff --git a/src/components/Infos.vue b/src/components/Infos.vue index cbd3f98..f6ae073 100644 --- a/src/components/Infos.vue +++ b/src/components/Infos.vue @@ -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; + } +} + \ No newline at end of file diff --git a/src/components/Pomodoro.vue b/src/components/Pomodoro.vue index 15eee37..40370ef 100644 --- a/src/components/Pomodoro.vue +++ b/src/components/Pomodoro.vue @@ -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); -} \ No newline at end of file diff --git a/src/components/ToDoList.vue b/src/components/ToDoList.vue index bf09692..a335a46 100644 --- a/src/components/ToDoList.vue +++ b/src/components/ToDoList.vue @@ -1,9 +1,10 @@