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

[PIE-22] Add checklist for ingredients #10

Merged
breadone merged 1 commits from PIE-22 into main 2025-08-13 23:55:11 +12:00
Conversation 0 Commits 1 Files Changed 1 +28 -4
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 && ( {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> <thead>
<tr> <tr>
<th class="px-4 py-2">Quantity</th> <th class="px-4 py-2">Quantity</th>
@ -29,9 +29,9 @@ const tableView = true
</thead> </thead>
<tbody> <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.quantity}</td>
<td class="px-4 py-2">{ing.unit}</td> <td class="px-4 py-2">{ing.unit}</td>
<td class="px-4 py-2">{ing.name}</td> <td class="px-4 py-2">{ing.name}</td>
@ -42,3 +42,27 @@ const tableView = true
</tbody> </tbody>
</table> </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>