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

Compare commits

base: breadone:5a171f0f0f9425f4bf868acc1b37a268044049ad
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9
..
compare: breadone:9ac087c2e86220fec5cb9ce519a2cd3ba6438eea
Branches Tags
breadone:main
breadone:PIE-13
breadone:PIE-9

7 Commits
5a171f0f0f ... 9ac087c2e8

Author SHA1 Message Date
june
9ac087c2e8
Fix styling for new ingredient table 2025-08-14 11:07:58 +12:00
june
99698bfd74
Change ratio and text size of step ingredient list 2025-08-14 09:22:46 +12:00
june
b90a8604e2
Changed formatting to have title on left column at all times 2025-08-14 08:27:49 +12:00
june
dc86497474
fix edge-case layout bug 2025-08-13 23:59:48 +12:00
june
87d917c7cf
Added basic new recipe page 2025-08-13 23:34:45 +12:00
june
371563201c
i keep getting distracted bruh 2025-08-13 22:20:26 +12:00
june
4e94dac064
Add underline feedback for top bar 2025-08-13 21:37:42 +12:00
1 changed files with 4 additions and 28 deletions
Show Stats Expand all files Collapse all files

32
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}`}> <table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
<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, index) => ( ingredients.map(ing => (
<> <>
<tr class="border-t border-white/10 cursor-pointer hover:bg-white/10 transition-opacity ingredient-row" data-index={index}> <tr class="border-t border-gray-600">
<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>
@ -41,28 +41,4 @@ 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>