guzsarchives/ToToday.app
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

fix(pageStyle): improved the style of the application.

Browse Source 
Improved the code of the page's style and improved the support for mobile devices.
This commit is contained in:
Guz
2022-02-05 14:14:51 -03:00
parent aecb49e40a
commit 92050b5fb7
11 changed files with 229 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ToToday",
"version": "0.7.1",
"version": "0.7.2",
"private": true,
"scripts": {
"dev": "nuxt",

54
src/assets/styles/_animations.scss Normal file
View File

@@ -0,0 +1,54 @@
@keyframes enter {
from {
opacity: 0;
transform: translateY(50%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes leave {
from {
opacity: 1;
transform: translateY(0%);
}
to {
opacity: 0;
transform: translateY(50%);
}
}
@keyframes iconAnim {
from {
transform: rotate(0) scale(1);
}
5% {
transform: rotate(0) scale(0.7);
}
50% {
transform: rotate(360deg) scale(1.2);
}
90% {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
@keyframes iconAnimReverse {
from {
transform: rotate(0) scale(1);
}
5% {
transform: rotate(0) scale(0.7);
}
50% {
transform: rotate(-360deg) scale(1);
}
to {
transform: rotate(-360deg) scale(1);
}
}

5
src/assets/styles/_variables.scss
View File

@@ -12,5 +12,8 @@ $dark-secondary: $eerie-black3;
$main-font: 'Red Display', arial, helvetica, sans-serif;
$secondary-font: 'Fira Code', monospace, sans-serif;
$checked-color: $green0;
$checked-color: $sky0;
$unchecked-color: $begonia-red0;
$task-border-radius: 20px;
$task-padding: 10px;

16
src/assets/styles/global.scss
View File

@@ -1,12 +1,24 @@
@import '~assets/styles/_variables.scss';
@import '~assets/styles/_mixins.scss';
html {
height: 100%;
position: relative;
}
body {
@include center;
overflow: hidden;
height: 100vh;
overflow-x: hidden;
width: 100vw;
min-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
transition: background-color 0.3s;

72
src/components/ProgressBar.vue
View File

@@ -64,50 +64,56 @@ export default Vue.extend({
<style lang="scss">
@import '~assets/styles/_variables.scss';
@import '~assets/styles/_mixins.scss';
@import '~assets/styles/_animations.scss';
.progressInfo {
margin-top: 0;
.light-mode & {
color: $light-secondary;
}
.dark-mode & {
color: $dark-secondary;
}
}
.progressBar {
opacity: 0;
transform: translateY(50%);
.barContainer {
width: 100%;
@include center;
animation: enter 0.5s ease-out;
animation-fill-mode: forwards;
.bar {
$bar-height: 15px;
@include center;
justify-content: left;
animation: enter 0.3s forwards ease-out;
animation-delay: 1.5s;
.progressInfo {
margin-top: 0;
.light-mode & {
background-color: $blue2;
color: $light-secondary;
}
.dark-mode & {
background-color: $eerie-black0;
color: $dark-secondary;
}
}
width: 60%;
height: $bar-height;
border-radius: $bar-height;
.barContainer {
width: 100%;
.progress {
transition: width 0.5s;
@include center;
background-color: $checked-color;
.bar {
$bar-height: 15px;
@include center;
justify-content: left;
.light-mode & {
background-color: $blue2;
}
.dark-mode & {
background-color: $eerie-black0;
}
width: 60%;
height: $bar-height;
border-radius: $bar-height;
height: 49%;
// width: 100%-4%;
margin-left: 2%;
.progress {
transition: width 0.5s;
background-color: $checked-color;
border-radius: $bar-height;
height: 49%;
// width: 100%-4%;
margin-left: 2%;
}
}
}
}

6
src/components/SubTask/SubTaskInput.vue
View File

@@ -4,7 +4,7 @@
<button class="addTask" @click="addSubTask(parent)">
<IconAdd class="addIcon" />
</button>
<form class="subTaskInput">
<div class="subTaskInput">
<input
id="newSubTaskInputName"
class="subTaskNameInput"
@@ -14,7 +14,7 @@
maxlength="50"
@keypress.enter="addSubTask(parent)"
/>
</form>
</div>
</div>
</div>
</template>
@@ -141,7 +141,7 @@ export default Vue.extend({
height: 1.5em;
width: 90%;
border: 0;
border-radius: 10px;
border-radius: calc($task-border-radius/2);
padding: 5px 10px;
.light-mode & {

2
src/components/SubTask/SubTaskList.vue
View File

@@ -109,7 +109,7 @@ export default Vue.extend({
padding: 20px 5% 10px 5%;
border-radius: 0 0 20px 20px;
border-radius: 0 0 $task-border-radius $task-border-radius;
text-align: left;

197
src/components/Task/TaskComp.vue
View File

@@ -6,7 +6,7 @@
}taskContainer`"
>
<div class="taskControl">
<div :class="`task`">
<div class="task">
<div class="taskInfo">
<label
class="checkbox"
@@ -28,20 +28,20 @@
<p>{{ description }}</p>
</div>
</div>
<button
:class="`${
openSubTasks ? 'openedSubtasksButton' : 'closedSubtasksButton'
} subtasksButton`"
@click="openSubTasks = !openSubTasks"
>
<IconDropdown class="dropdownIcon" />
</button>
<nav class="controls">
<button
:class="`${
openSubTasks ? 'openedSubtasksButton' : 'closedSubtasksButton'
} subtasksButton`"
@click="openSubTasks = !openSubTasks"
>
<IconDropdown class="dropdownIcon" />
</button>
<button class="deleteButton" @click="deleteTask()">
<IconTrash class="trashIcon" />
</button>
</nav>
</div>
<nav class="controls">
<button class="deleteButton" @click="deleteTask()">
<IconTrash class="trashIcon" />
</button>
</nav>
</div>
<SubTaskList :parent="id" :opened="openSubTasks" />
</li>
@@ -111,13 +111,14 @@ export default Vue.extend({
<style lang="scss">
@import '~assets/styles/_variables.scss';
@import '~assets/styles/_mixins.scss';
@import '~assets/styles/_animations.scss';
.newTask {
animation-delay: 0s !important;
}
.taskContainer {
@for $i from 1 through 100 {
@for $i from 1 through 1000 {
&#task#{$i} {
animation-delay: #{$i * 0.2}s;
}
@@ -126,19 +127,7 @@ export default Vue.extend({
opacity: 0;
transform: translateY(50%);
animation: enter 0.5s ease-out;
animation-fill-mode: forwards;
@keyframes enter {
from {
opacity: 0;
transform: translateY(50%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
animation: enter 0.5s forwards ease-out;
.taskControl {
display: flex;
@@ -148,39 +137,6 @@ export default Vue.extend({
align-items: center;
justify-content: space-between;
.controls {
position: absolute;
right: -6%;
opacity: 0;
@media (pointer: none), (pointer: coarse) {
opacity: 0.5;
}
transition: opacity 0.2s;
transition: right 0.3s;
button {
background-color: transparent;
padding: 1px;
border: 0;
cursor: pointer;
}
.deleteButton {
.trashIcon * {
transition: stroke 0.2s;
}
&:hover .trashIcon * {
stroke: $begonia-red0;
}
}
}
&:hover .controls {
transition: 0.2s 0.5s;
opacity: 1;
right: -7%;
}
.task {
.light-mode & {
background-color: $blue0;
@@ -195,13 +151,12 @@ export default Vue.extend({
width: 100%;
z-index: 4;
border-radius: 20px;
padding: 10px;
border-radius: $task-border-radius;
padding: $task-padding;
display: flex;
align-items: center;
@include center;
justify-content: space-between;
padding-right: 5%;
text-align: left;
.taskInfo {
display: flex;
@@ -300,39 +255,6 @@ export default Vue.extend({
}
}
}
@keyframes iconAnim {
from {
transform: rotate(0) scale(1);
}
5% {
transform: rotate(0) scale(0.7);
}
50% {
transform: rotate(360deg) scale(1.2);
}
90% {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
@keyframes iconAnimReverse {
from {
transform: rotate(0) scale(1);
}
5% {
transform: rotate(0) scale(0.7);
}
50% {
transform: rotate(-360deg) scale(1);
}
to {
transform: rotate(-360deg) scale(1);
}
}
}
.info {
@@ -353,50 +275,75 @@ export default Vue.extend({
}
}
.subtasksButton {
display: flex;
align-items: center;
.controls {
transition: opacity 0.3s;
transition: transform 0.3s;
@include center;
opacity: 0;
@media (pointer: none), (pointer: coarse) {
opacity: 0.5;
@media (hover) and (min-width: 600px) {
transform: translateX(30px);
}
@media (hover) {
opacity: 0;
}
transition: opacity 0.2s;
background-color: transparent;
padding: 1px;
border: 0;
cursor: pointer;
button {
background-color: transparent;
padding: 1px;
margin: 0 2.5px;
border: 0;
cursor: pointer;
@include center;
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
.dropdownIcon {
* {
transition: stroke 0.2s;
transition: all 0.1s;
}
&:hover * {
.light-mode & {
stroke: $independence-gray0;
&:hover {
* {
.light-mode & {
stroke: $light-primary;
}
.dark-mode & {
stroke: $dark-primary;
}
}
.dark-mode & {
stroke: $dark-primary;
}
&.deleteButton {
@media (hover) and (min-width: 600px) {
transform: translateX(10px);
}
&:hover {
* {
stroke: $unchecked-color;
}
}
}
}
&.openedSubtasksButton {
.dropdownIcon {
& .subtasksButton {
&.openedSubtasksButton {
transform: rotate(180deg);
}
}
&.closedSubtasksButton {
.dropdownIcon {
&.closedSubtasksButton {
transform: rotate(0deg);
}
}
}
&:hover .subtasksButton {
opacity: 1;
}
}
}
&:hover .taskControl .task .controls {
transition: opacity 0.3s;
opacity: 1;
}
}
</style>

93
src/components/Task/TaskInput.vue
View File

@@ -4,7 +4,7 @@
<button class="addTask" @click="addTask()">
<IconAdd class="addIcon" />
</button>
<form class="taskInputs">
<div class="taskInputs">
<div class="taskNameInputContainer">
<input
id="newTaskInputName"
@@ -12,7 +12,7 @@
type="text"
name="TaskNameInput"
placeholder="Task Title..."
maxlength="28"
maxlength="25"
@keypress.enter="addTask()"
/>
</div>
@@ -25,7 +25,7 @@
maxlength="150"
></textarea>
</div>
</form>
</div>
</div>
</div>
</template>
@@ -101,81 +101,17 @@ export default Vue.extend({
<style lang="scss">
@import '~assets/styles/_variables.scss';
@import '~assets/styles/_mixins.scss';
@import '~assets/styles/_animations.scss';
.alignInputContainer {
@include center;
@media not screen and (pointer: none), (pointer: coarse) {
&:not(:hover),
.taskInputContainer *:not(:focus-within) {
.taskInputContainer {
animation: shrink 0.5s forwards;
@keyframes shrink {
from {
padding: 5px 10px;
margin: 10px 0;
transform: scale(100%);
width: 100%;
}
to {
padding: 0px 25%;
margin: 0px 0;
transform: scale(60%);
width: 0%;
}
}
.taskInputs {
animation: hideInputs 0.5s forwards;
@keyframes hideInputs {
from {
transform: translateX(0%);
opacity: 1;
width: 100%;
}
to {
transform: translateX(25%);
opacity: 0;
width: 0%;
}
}
}
}
}
&:hover {
.taskInputContainer {
animation: expand 0.5s forwards;
@keyframes expand {
from {
padding: 0px 25%;
margin: 0px 0;
transform: scale(60%);
width: 0%;
}
to {
padding: 5px 10px;
margin: 10px 0;
transform: scale(100%);
width: 100%;
}
}
.taskInputs {
animation: showInputs 0.5s forwards;
@keyframes showInputs {
from {
transform: translateX(25%);
opacity: 0;
width: 0%;
}
to {
transform: translateX(0%);
opacity: 1;
width: 100%;
}
}
}
}
}
}
opacity: 0;
transform: translateY(50%);
animation: enter 0.5s forwards ease-out;
animation-delay: 1s;
.taskInputContainer {
&,
* {
@@ -194,8 +130,14 @@ export default Vue.extend({
color: $dark-primary;
}
padding: $task-padding;
margin: 10px 0;
transform: scale(100%);
width: 100%;
border-radius: 20px;
@include center;
justify-content: left;
@media (pointer: none), (pointer: coarse) {
padding: 5px 10px;
@@ -235,6 +177,7 @@ export default Vue.extend({
.taskInputs {
text-align: left;
width: 100%;
.taskNameInputContainer,
.taskDescriptionInputContainer {
@@ -244,7 +187,7 @@ export default Vue.extend({
textarea {
width: 90%;
border: 0;
border-radius: 10px;
border-radius: calc($task-border-radius/2);
text-overflow: ellipsis;

14
src/components/Task/TaskList.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="taskListContainer">
<ul class="taskList">
<TaskComp
v-for="task in list"
@@ -11,6 +11,7 @@
:checked="task.checked"
/>
</ul>
<TaskInput />
<ProgressBar />
</div>
</template>
@@ -46,8 +47,13 @@ export default Vue.extend({
@import '~assets/styles/_variables.scss';
@import '~assets/styles/_mixins.scss';
.taskList {
list-style: none;
padding: 0;
.taskListContainer {
max-width: 500px;
width: 100%;
.taskList {
width: 100%;
list-style: none;
padding: 0;
}
}
</style>

16
src/pages/index.vue
View File

@@ -1,13 +1,12 @@
<template>
<main :class="`${preventAnim ? 'preventAnimLoad ' : ''}container`">
<main :class="`${preventAnim ? 'preventAnimLoad ' : ''}main`">
<div>
<ToTodayLogo />
<p>A single page web app to help yours day-to-day tasks</p>
<ThemePicker />
</div>
<div>
<div class="tasks">
<TaskList />
<TaskInput />
</div>
<PageFooter />
</main>
@@ -29,3 +28,14 @@ export default Vue.extend({
},
});
</script>
<style lang="scss">
@import '~assets/styles/_variables.scss';
@import '~assets/styles/_mixins.scss';
.main {
.tasks {
@include center;
}
}
</style>