itsscb/FitLog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add style to buttons
All checks were successful
Build and Deploy Svelte App / build-and-deploy (push) Successful in 2m5s
Details

Browse Source
This commit is contained in:
itsscb 2025-04-14 21:44:12 +02:00
parent 9fc1ed5fe8
commit c13c0e3323
1 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/routes/+page.svelte
View File

@ -10,6 +10,8 @@
let workout_type = $state(""); let workout_type = $state("");
let duration_minutes = $state(0); let duration_minutes = $state(0);
let selected_cell: `${number}:${number}` | undefined = $state(undefined);
onMount(() => { onMount(() => {
const today = new Date(); const today = new Date();
date = today.toISOString().split("T")[0]; date = today.toISOString().split("T")[0];
@ -79,7 +81,7 @@
/> />
</td> </td>
<td> <td>
<button type="submit"> <button type="submit" class="button button-save">
<Save color="green" /> <Save color="green" />
</button> </button>
</td> </td>
@ -97,14 +99,18 @@
<td>{wk.workout_type}</td> <td>{wk.workout_type}</td>
<td>{wk.duration_minutes}</td> <td>{wk.duration_minutes}</td>
<td> <td>
<button <a
type="button" class="button button-delete"
role="button"
tabindex={i}
onclick={(e) => { onclick={(e) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
deleteRow(i); deleteRow(i);
}}><Trash2 color="red" /></button }}
> >
<Trash2 color="red" />
</a>
</td> </td>
</tr> </tr>
{/each} {/each}
@ -136,7 +142,7 @@
padding: 16px; padding: 16px;
} }
tbody tr:nth-child(even) { tr:nth-child(even) {
background-color: #f2f2f2; background-color: #f2f2f2;
color: #000; color: #000;
} }
@ -144,7 +150,6 @@
tbody tr:hover { tbody tr:hover {
background-color: #c2c2c2; background-color: #c2c2c2;
color: #000; color: #000;
font-weight: bold;
} }
th { th {
@ -155,17 +160,45 @@
font-size: 0.95rem; font-size: 0.95rem;
} }
button { .button {
width: 3rem; width: 3rem;
height: 2rem; height: 2rem;
cursor: pointer; cursor: pointer;
border: none;
border-radius: 5px; border-radius: 5px;
background-color: transparent; background-color: white;
border: solid;
border-width: 2px;
} }
button:hover {
background-color: #fff; .button-delete {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
vertical-align: middle;
border-color: red;
color: red;
} }
.button-save {
background-color: white;
border-color: green;
color: green;
}
.button-save:hover {
background-color: green;
border-color: green;
}
.button-delete:hover {
background-color: red;
border-color: red;
}
:global .button:hover svg {
stroke: white;
}
input[type="text"] { input[type="text"] {
width: 100%; width: 100%;
padding: 8px; padding: 8px;