Format tables properly

This commit is contained in:
2024-06-13 18:15:19 +02:00
parent 800ac867f2
commit 84e0d2b944
5 changed files with 13 additions and 16 deletions

View File

@@ -85,13 +85,13 @@
</script>
<template>
<Line data="{data}" />
<div class="relative flex flex-col h-screen" data-vaul-drawer-wrapper id="page">
<Line data="{data}" class="max-h-[50vh] h-[50vh]" />
<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
Period
</th>
<th class="px-6 py-3" scope="col">

View File

@@ -93,7 +93,5 @@
contenteditable="true"
on:keydown={update}>
</td>
<td class="px-6 py-4">
</td>
</tr>
</template>

View File

@@ -61,22 +61,22 @@
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
Date
</th>
<th class="px-6 py-3" scope="col">
<th class="px-6 py-3 w-3/12" scope="col">
Food
</th>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-4/12" scope="col">
Description
</th>
<th class="px-6 py-3" scope="col">
<th class="px-6 py-3 w-1/12" scope="col">
Amount
</th>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-1/12" scope="col">
Cal Per 100
</th>
<th class="px-6 py-3" scope="col">
<th class="px-6 py-3 w-1/12" scope="col">
Energy
</th>
</tr>

View File

@@ -7,9 +7,10 @@
let item: Weight = {
weight: 0
}
let weight: string = item.weight.toString()
let weight: string | null = null
async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
if (!weight) return
weight = weight.trim()
if (event.key == 'Enter') {
@@ -44,7 +45,5 @@
autofocus
on:keydown={update}>
</td>
<td class="px-6 py-4">
</td>
</tr>
</template>

View File

@@ -28,10 +28,10 @@
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr>
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
Date
</th>
<th class="px-6 py-3" scope="col">
<th class="px-6 py-3 w-10/12" scope="col">
Weight
</th>
</tr>