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
Showing only changes of commit 124f2de770 - Show all commits

32
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>
@ -41,4 +41,28 @@ 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>