adrinux
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: simplify task title markup

This commit is contained in:
kolaente 2021-11-02 22:59:32 +01:00
parent e702524b94
commit 3e7edd84fa
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 35 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/tasks/partials/relatedTasks.vue
View File

@ -83,25 +83,23 @@
<span class="title">{{ rts.title }}</span>
<div class="tasks noborder">
<div :key="t.id" class="task" v-for="t in rts.tasks">
<router-link :to="{ name: $route.name, params: { id: t.id } }">
<span :class="{ 'done': t.done}" class="tasktext">
<router-link :to="{ name: $route.name, params: { id: t.id } }" :class="{ 'done': t.done}">
<span
class="different-list"
v-if="t.listId !== listId"
>
<span
class="different-list"
v-if="t.listId !== listId"
>
<span
v-if="t.differentNamespace !== null"
v-tooltip="$t('task.relation.differentNamespace')">
{{ t.differentNamespace }} >
</span>
<span
v-if="t.differentList !== null"
v-tooltip="$t('task.relation.differentList')">
{{ t.differentList }} >
</span>
v-if="t.differentNamespace !== null"
v-tooltip="$t('task.relation.differentNamespace')">
{{ t.differentNamespace }} >
</span>
<span
v-if="t.differentList !== null"
v-tooltip="$t('task.relation.differentList')">
{{ t.differentList }} >
</span>
{{ t.title }}
</span>
{{ t.title }}
</router-link>
<a
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
@ -345,37 +343,31 @@ $remove-icon-width: 24px;
width: calc(100% - #{$remove-icon-width});
}
.task .tasktext {
width: calc(100% - .25rem); // Magic .25rem extra space
}
.remove {
width: $remove-icon-width;
text-align: center;
}
}
.task {
display: flex;
flex-wrap: wrap;
padding: .4rem;
transition: background-color $transition;
align-items: center;
cursor: pointer;
border-radius: $radius;
border: 2px solid transparent;
a {
color: $text;
transition: color ease $transition-duration;
.task {
display: flex;
flex-wrap: wrap;
padding: .75rem;
transition: background-color $transition;
border-radius: $radius;
&:hover {
color: $grey-900;
background-color: $grey-200;
}
}
.remove {
color: $red;
a {
color: $text;
transition: color ease $transition-duration;
&:hover {
color: $grey-900;
}
}
.remove {
width: $remove-icon-width;
text-align: center;
color: $red;
}
}
}
}