sudoxreboot/habitica
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica.git synced 2026-07-13 15:38:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

WIP(teams): partial style implementation for status rows

Browse source
This commit is contained in:
SabreCat 2022-02-04 17:46:04 -06:00
parent a4a1595ec7
commit e312ea943f
1 changed files with 35 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
website/client/src/components/tasks/approvalFooter.vue
View file

@ -1,19 +1,30 @@
<template> <template>
<div> <div
class="gray-100"
>
<div <div
v-if="showStatus" v-if="showStatus"
> >
<div <div
v-for="completion in completionsList" v-for="completion in completionsList"
:key="completion.userId" :key="completion.userId"
class="completion-row mb-1" class="completion-row"
> >
<div> <div
<span v-if="completion.completed">✅</span> class="px-3 py-2"
<span v-else>❎</span> >
<span>@{{ completion.userName }}</span> <div>
<span v-if="completion.completed">✅</span>
<span v-else>❎</span>
<strong> @{{ completion.userName }} </strong>
</div>
<div
v-if='completion.completedDate'
:class="{'green-10': completion.completedToday}"
>
{{ completion.completedDateString }}
</div>
</div> </div>
<div v-if='completion.completedDate'>{{ completion.completedDateString }}</div>
</div> </div>
</div> </div>
<div <div
@ -24,7 +35,7 @@
v-html="message" v-html="message"
></div> ></div>
<div <div
class="ml-auto mr-2 text-right gray-100" class="ml-auto mr-2 text-right"
v-if="task.group.assignedUsers" v-if="task.group.assignedUsers"
> >
<span <span
@ -54,10 +65,9 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/scss/colors.scss'; @import '~@/assets/scss/colors.scss';
.claim-bottom-message { .claim-bottom-message {
background-color: $gray-700; background-color: $gray-600;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
color: $gray-200;
font-size: 12px; font-size: 12px;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
padding-top: 0.25rem; padding-top: 0.25rem;
@ -66,12 +76,22 @@
.blue-10 { .blue-10 {
color: $blue-10; color: $blue-10;
} }
.gray-100 { }
color: $gray-100; .completion-row {
height: 3rem;
background-color: $gray-700;
font-size: 12px;
&:not(:last-of-type) {
border-bottom: 1px solid $gray-500;
}
.green-10 {
color: $green-10;
} }
} }
.completion-row { // temporary .gray-100 {
height: 2rem; color: $gray-100;
} }
</style> </style>
@ -128,6 +148,7 @@ export default {
completed: this.task.group.assignedUsers[userId].completed, completed: this.task.group.assignedUsers[userId].completed,
completedDate, completedDate,
completedDateString, completedDateString,
completedToday: moment().diff(completedDate, 'days') === 0,
}); });
} }
return completionsArray; return completionsArray;