vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

fix: undo further nesting of interactive items 

This is really bad for UX and accessability
This commit is contained in:
Dominik Pschenitschni 2023-03-28 13:13:29 +02:00
parent 8fc254d2db
commit 0acf44778d
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/tasks/partials/singleTaskInProject.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<router-link <div :class="{'is-loading': taskService.loading}" class="task loader-container">
:to="taskDetailRoute"
:class="{'is-loading': taskService.loading}"
class="task loader-container"
>
<fancycheckbox <fancycheckbox
:disabled="(isArchived || disabled) && !canMarkAsDone" :disabled="(isArchived || disabled) && !canMarkAsDone"
@update:model-value="markAsDone" @update:model-value="markAsDone"
@ -16,7 +12,8 @@
class="mr-1" class="mr-1"
/> />
<div <router-link
:to="taskDetailRoute"
:class="{ 'done': task.done, 'show-project': showProject && project !== null}" :class="{ 'done': task.done, 'show-project': showProject && project !== null}"
class="tasktext" class="tasktext"
> >
@ -96,7 +93,7 @@
</span> </span>
<checklist-summary :task="task"/> <checklist-summary :task="task"/>
</div> </router-link>
<progress <progress
class="progress is-small" class="progress is-small"
@ -117,14 +114,14 @@
<BaseButton <BaseButton
:class="{'is-favorite': task.isFavorite}" :class="{'is-favorite': task.isFavorite}"
@click.prevent="toggleFavorite" @click="toggleFavorite"
class="favorite" class="favorite"
> >
<icon icon="star" v-if="task.isFavorite"/> <icon icon="star" v-if="task.isFavorite"/>
<icon :icon="['far', 'star']" v-else/> <icon :icon="['far', 'star']" v-else/>
</BaseButton> </BaseButton>
<slot /> <slot />
</router-link> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -288,11 +285,7 @@ function hideDeferDueDatePopup(e) {
border-radius: $radius; border-radius: $radius;
border: 2px solid transparent; border: 2px solid transparent;
color: var(--text);
transition: color ease $transition-duration;
&:hover { &:hover {
color: var(--grey-900);
background-color: var(--grey-100); background-color: var(--grey-100);
} }
@ -338,6 +331,15 @@ function hideDeferDueDatePopup(e) {
} }
a {
color: var(--text);
transition: color ease $transition-duration;
&:hover {
color: var(--grey-900);
}
}
.favorite { .favorite {
opacity: 1; opacity: 1;
text-align: center; text-align: center;