krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-16 14:17:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use <button> for habits +/- buttons

Browse Source 
Use the `<button>` tag instead of a `<div>`. This makes the element
naturally focusable with the keyboard, and makes the HTML more semantic.

Update the CSS to align the icons in the centre of the `<button>`.
This commit is contained in:
Ian Oxley
2018-05-25 20:48:03 +01:00
parent 9f494360ef
commit 20548daccf
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
website/client/assets/scss/task.scss
View File

@@ -295,15 +295,24 @@
.svg-icon { .svg-icon {
width: 10px; width: 10px;
height: 10px; height: 10px;
margin: 0 auto; margin: auto;
}
} }
.positive { .positive,
margin-top: 9px; .negative {
align-items: center;
display: flex;
> svg {
margin: auto;
width: 10px;
}
} }
.negative { .negative {
margin-top: 13px; > svg {
height: 2px;
} }
} }

10
website/client/components/tasks/task.vue
View File

@@ -5,11 +5,11 @@
.d-flex(:class="{'task-not-scoreable': isUser !== true}") .d-flex(:class="{'task-not-scoreable': isUser !== true}")
// Habits left side control // Habits left side control
.left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up.bg") .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up.bg")
.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null") button.task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
.svg-icon.positive(v-html="icons.positive") .svg-icon.positive(v-html="icons.positive")
// Dailies and todos left side control // Dailies and todos left side control
.left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass.bg") .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass.bg")
.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null") button.task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
.svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}") .svg-icon.check(v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
// Task title, description and icons // Task title, description and icons
.task-content(:class="contentClass") .task-content(:class="contentClass")
@@ -98,7 +98,7 @@
// Habits right side control // Habits right side control
.right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg") .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null") button.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
.svg-icon.negative(v-html="icons.negative") .svg-icon.negative(v-html="icons.negative")
// Rewards right side control // Rewards right side control
.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null") .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
@@ -427,7 +427,11 @@
} }
.task-control, .reward-control { .task-control, .reward-control {
align-items: center;
border: none;
cursor: pointer; cursor: pointer;
margin: 0;
padding: 0;
} }
.task-not-scoreable { .task-not-scoreable {