Skip to content

Commit d3c319f

Browse files
rgzpaulrgzpaul
authored
padding fix
1 parent 3ab2bd2 commit d3c319f

3 files changed

Lines changed: 83 additions & 74 deletions

File tree

‎create.php‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,10 @@ function calculateKcal($protein, $carbs, $fat)
293293
body {
294294
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
295295
}
296+
th, td {
297+
padding: 0.75rem 0.5rem;
298+
white-space: nowrap;
299+
}
296300
</style>
297301
</head>
298302

@@ -395,19 +399,19 @@ class="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-ston
395399
<table class="w-full meals-table">
396400
<thead>
397401
<tr class="border-b border-stone-200">
398-
<th class="pb-3 text-left text-xs font-medium text-stone-500 uppercase tracking-wide">Meal</th>
399-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">K</th>
400-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">P</th>
401-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">C</th>
402-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">F</th>
403-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100"></th>
402+
<th class=text-left text-xs font-medium text-stone-500 uppercase tracking-wide">Meal</th>
403+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">K</th>
404+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">P</th>
405+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">C</th>
406+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">F</th>
407+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100"></th>
404408
</tr>
405409
</thead>
406410
<tbody>
407411
<?php foreach ($meals as $meal): ?>
408412
<?php $mealKcal = round(calculateKcal($meal['protein'], $meal['carbs'], $meal['fat']), 2); ?>
409413
<tr class="border-b border-stone-100 hover:bg-stone-50 transition-colors">
410-
<td class="py-3 px-2 text-stone-700">
414+
<td class=text-stone-700">
411415
<div class="flex items-center justify-between gap-2">
412416
<span><?php echo htmlspecialchars($meal['name']); ?></span>
413417
<button type="button"
@@ -419,11 +423,11 @@ class="info-btn p-1 text-stone-400 hover:text-stone-600 hover:bg-stone-100 round
419423
</button>
420424
</div>
421425
</td>
422-
<td class="py-3 px-2 text-center text-stone-600 font-medium border-l border-stone-100"><?php echo $mealKcal; ?></td>
423-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100"><?php echo round($meal['protein'], 2); ?></td>
424-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100"><?php echo round($meal['carbs'], 2); ?></td>
425-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100"><?php echo round($meal['fat'], 2); ?></td>
426-
<td class="py-3 px-2 text-center border-l border-stone-100">
426+
<td class=text-center text-stone-600 font-medium border-l border-stone-100"><?php echo $mealKcal; ?></td>
427+
<td class=text-center text-stone-500 border-l border-stone-100"><?php echo round($meal['protein'], 2); ?></td>
428+
<td class=text-center text-stone-500 border-l border-stone-100"><?php echo round($meal['carbs'], 2); ?></td>
429+
<td class=text-center text-stone-500 border-l border-stone-100"><?php echo round($meal['fat'], 2); ?></td>
430+
<td class=text-center border-l border-stone-100">
427431
<div class="flex max-sm:flex-col itens-center justify-center gap-1">
428432
<button type="button"
429433
class="edit-meal-btn p-2 flex justify-center text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded-lg transition-colors"
@@ -760,7 +764,7 @@ function createMealRow(meal, kcal) {
760764
const description = meal.description || '';
761765
return `
762766
<tr class="border-b border-stone-100 hover:bg-stone-50 transition-colors">
763-
<td class="py-3 px-2 text-stone-700">
767+
<td class=text-stone-700">
764768
<div class="flex items-center justify-between gap-2">
765769
<span>${escapeHtml(meal.name)}</span>
766770
<button type="button"
@@ -772,11 +776,11 @@ class="info-btn p-1 text-stone-400 hover:text-stone-600 hover:bg-stone-100 round
772776
</button>
773777
</div>
774778
</td>
775-
<td class="py-3 px-2 text-center text-stone-600 font-medium border-l border-stone-100">${formatNumber(kcal)}</td>
776-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100">${formatNumber(meal.protein)}</td>
777-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100">${formatNumber(meal.carbs)}</td>
778-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100">${formatNumber(meal.fat)}</td>
779-
<td class="py-3 px-2 text-center border-l border-stone-100">
779+
<td class=text-center text-stone-600 font-medium border-l border-stone-100">${formatNumber(kcal)}</td>
780+
<td class=text-center text-stone-500 border-l border-stone-100">${formatNumber(meal.protein)}</td>
781+
<td class=text-center text-stone-500 border-l border-stone-100">${formatNumber(meal.carbs)}</td>
782+
<td class=text-center text-stone-500 border-l border-stone-100">${formatNumber(meal.fat)}</td>
783+
<td class=text-center border-l border-stone-100">
780784
<div class="flex max-sm:flex-col itens-center justify-center gap-1">
781785
<button type="button"
782786
class="edit-meal-btn p-2 flex justify-center text-stone-500 hover:text-stone-700 hover:bg-stone-100 rounded-lg transition-colors"

‎index.php‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,8 @@ function calculateKcal($protein, $carbs, $fat)
341341
body {
342342
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
343343
}
344-
td {
344+
th, td {
345+
padding: 0.75rem 0.5rem;
345346
white-space: nowrap;
346347
}
347348
.meal-button {
@@ -385,11 +386,11 @@ function calculateKcal($protein, $carbs, $fat)
385386
<table class="w-full">
386387
<thead>
387388
<tr class="border-b border-stone-200">
388-
<th class="pb-3 text-left text-xs font-medium text-stone-500 uppercase tracking-wide">Meal</th>
389-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">K</th>
390-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">P</th>
391-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">C</th>
392-
<th class="pb-3 text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">F</th>
389+
<th class=text-left text-xs font-medium text-stone-500 uppercase tracking-wide">Meal</th>
390+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">K</th>
391+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">P</th>
392+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">C</th>
393+
<th class=text-center text-xs font-medium text-stone-500 uppercase tracking-wide border-l border-stone-100">F</th>
393394
</tr>
394395
</thead>
395396
<tbody>
@@ -405,22 +406,22 @@ function calculateKcal($protein, $carbs, $fat)
405406
<?php $mealKcal = round(calculateKcal($group['protein'], $group['carbs'], $group['fat']), 2); ?>
406407
<?php $displayName = $group['name'] . ($group['count'] > 1 ? ' (x' . $group['count'] . ')' : ''); ?>
407408
<tr class="border-b border-stone-100 hover:bg-stone-50 meal-row cursor-pointer transition-colors" data-name="<?php echo htmlspecialchars($group['name']); ?>" data-count="<?php echo $group['count']; ?>">
408-
<td class="py-3 px-2 text-stone-700"><?php echo htmlspecialchars($displayName); ?></td>
409-
<td class="py-3 px-2 text-center text-stone-600 font-medium border-l border-stone-100"><?php echo $mealKcal; ?></td>
410-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100"><?php echo round($group['protein'], 2); ?></td>
411-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100"><?php echo round($group['carbs'], 2); ?></td>
412-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100"><?php echo round($group['fat'], 2); ?></td>
409+
<td class=text-stone-700"><?php echo htmlspecialchars($displayName); ?></td>
410+
<td class=text-center text-stone-600 font-medium border-l border-stone-100"><?php echo $mealKcal; ?></td>
411+
<td class=text-center text-stone-500 border-l border-stone-100"><?php echo round($group['protein'], 2); ?></td>
412+
<td class=text-center text-stone-500 border-l border-stone-100"><?php echo round($group['carbs'], 2); ?></td>
413+
<td class=text-center text-stone-500 border-l border-stone-100"><?php echo round($group['fat'], 2); ?></td>
413414
</tr>
414415
<?php endforeach; ?>
415416
<?php endif; ?>
416417

417418
<!-- Totals Row -->
418419
<tr class="bg-stone-100">
419-
<td class="py-3 px-2 font-semibold text-stone-800">Total</td>
420-
<td class="py-3 px-2 text-center font-semibold text-stone-800 border-l border-stone-100"><?php echo round($totalKcal, 2); ?></td>
421-
<td class="py-3 px-2 text-center font-medium text-stone-600 border-l border-stone-100"><?php echo round($totalProtein, 2); ?></td>
422-
<td class="py-3 px-2 text-center font-medium text-stone-600 border-l border-stone-100"><?php echo round($totalCarbs, 2); ?></td>
423-
<td class="py-3 px-2 text-center font-medium text-stone-600 border-l border-stone-100"><?php echo round($totalFat, 2); ?></td>
420+
<td class=font-semibold text-stone-800">Total</td>
421+
<td class=text-center font-semibold text-stone-800 border-l border-stone-100"><?php echo round($totalKcal, 2); ?></td>
422+
<td class=text-center font-medium text-stone-600 border-l border-stone-100"><?php echo round($totalProtein, 2); ?></td>
423+
<td class=text-center font-medium text-stone-600 border-l border-stone-100"><?php echo round($totalCarbs, 2); ?></td>
424+
<td class=text-center font-medium text-stone-600 border-l border-stone-100"><?php echo round($totalFat, 2); ?></td>
424425
</tr>
425426
</tbody>
426427
</table>
@@ -612,11 +613,11 @@ class="w-full px-4 py-3 border border-stone-300 rounded-lg text-stone-700 focus:
612613
// Create new meal row
613614
const newRow = `
614615
<tr class="border-b border-stone-100 hover:bg-stone-50 meal-row cursor-pointer transition-colors" data-name="${escapeHtml(response.meal.name)}" data-count="1" style="opacity: 0;">
615-
<td class="py-3 px-2 text-stone-700">${escapeHtml(response.meal.name)}</td>
616-
<td class="py-3 px-2 text-center text-stone-600 font-medium border-l border-stone-100">${formatNumber(response.mealKcal)}</td>
617-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100">${formatNumber(response.meal.protein)}</td>
618-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100">${formatNumber(response.meal.carbs)}</td>
619-
<td class="py-3 px-2 text-center text-stone-500 border-l border-stone-100">${formatNumber(response.meal.fat)}</td>
616+
<td class=text-stone-700">${escapeHtml(response.meal.name)}</td>
617+
<td class=text-center text-stone-600 font-medium border-l border-stone-100">${formatNumber(response.mealKcal)}</td>
618+
<td class=text-center text-stone-500 border-l border-stone-100">${formatNumber(response.meal.protein)}</td>
619+
<td class=text-center text-stone-500 border-l border-stone-100">${formatNumber(response.meal.carbs)}</td>
620+
<td class=text-center text-stone-500 border-l border-stone-100">${formatNumber(response.meal.fat)}</td>
620621
</tr>
621622
`;
622623

0 commit comments

Comments
 (0)
⚡