breadone/Recipie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[PIE-22] Add checklist for ingredients (!10)

Browse Source 
Each row in the table can be clicked/tapped to be crossed off to complete
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>
This commit is contained in:
June 2025-08-13 23:55:11 +12:00 committed by June
parent db6df2053a
commit 26cab10c14
1 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Detail/IngredientTableView.astro
View File

@ -19,7 +19,7 @@ const tableView = true
)}
{tableView && (
<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className}`}>
<thead>
<tr>
<th class="px-4 py-2">Quantity</th>
@ -29,9 +29,9 @@ const tableView = true
</thead>
<tbody>
{
ingredients.map(ing => (
ingredients.map((ing, index) => (
<>
<tr class="border-t border-gray-600">
<tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}>
<td class="px-4 py-2">{ing.quantity}</td>
<td class="px-4 py-2">{ing.unit}</td>
<td class="px-4 py-2">{ing.name}</td>
@ -42,3 +42,27 @@ const tableView = true
</tbody>
</table>
)}
<style>
.ingredient-row.completed {
/* background-color: rgba(0, 0, 0, 0.4) !important; */
opacity: 0.6;
}
.ingredient-row.completed td {
text-decoration: line-through;
color: rgba(255, 255, 255, 0.5);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const rows = document.querySelectorAll('.ingredient-row');
rows.forEach(row => {
row.addEventListener('click', function() {
this.classList.toggle('completed');
});
});
});
</script>