cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2859 from harry48225/touchable-fix

Browse Source 
Touchable fix
This commit is contained in:
vabene1111 2024-01-19 17:15:39 +08:00 committed by GitHub
commit 838edc5b97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
vue/src/components/IngredientComponent.vue
View File

@ -7,7 +7,7 @@
</template>
<template v-else>
<td class="d-print-none" v-if="detailed" @click="done">
<td class="d-print-none align-baseline py-2" v-if="detailed" @click="done">
<i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
<i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
</td>
@ -40,9 +40,9 @@
</template>
</template>
</td>
<td v-if="detailed">
<td v-if="detailed" class="align-baseline">
<template v-if="ingredient.note">
<span v-b-popover.hover="ingredient.note" class="d-print-none touchable py-0 px-2">
<span class="d-print-none touchable py-0 px-2" v-b-popover.hover="ingredient.note">
<i class="far fa-comment"></i>
</span>
@ -106,9 +106,22 @@ export default {
<style scoped>
/* increase size of hover/touchable space without changing spacing */
.touchable {
/* padding-right: 2em;
padding-left: 2em; */
margin-right: -1em;
margin-left: -1em;
--target-increase: 2em;
display: inline-flex;
}
.touchable::after {
content: "";
display: inline-block;
width: var(--target-increase);
margin-right: calc(var(--target-increase) * -1);
}
.touchable::before {
content: "";
display: inline-block;
width: var(--target-increase);
margin-left: calc(var(--target-increase) * -1);
}
</style>