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>
<template v-else> <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-success" v-if="ingredient.checked"></i>
<i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i> <i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
</td> </td>
@ -40,9 +40,9 @@
</template> </template>
</template> </template>
</td> </td>
<td v-if="detailed"> <td v-if="detailed" class="align-baseline">
<template v-if="ingredient.note"> <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> <i class="far fa-comment"></i>
</span> </span>
@ -106,9 +106,22 @@ export default {
<style scoped> <style scoped>
/* increase size of hover/touchable space without changing spacing */ /* increase size of hover/touchable space without changing spacing */
.touchable { .touchable {
/* padding-right: 2em; --target-increase: 2em;
padding-left: 2em; */ display: inline-flex;
margin-right: -1em;
margin-left: -1em;
} }
.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> </style>