Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve Svelte build warnings

Browse Source 
- Add keyboard handler to fab-modal and dialog overlays (a11y)
- Remove unused .btn-cancel CSS selector
- Wrap meal name input inside its label, use span for ingredients heading
- Change image-wrap-desktop from div to figure for valid figcaption
This commit is contained in:
Alexander Bocken
2026-04-06 00:06:58 +02:00
parent 43c8b3da2e
commit c2510855c5
4 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/faith/StickyImage.svelte
View File

@@ -84,12 +84,12 @@
</script> </script>
<div class="sticky-image-layout" class:overlay={mode === 'overlay'}> <div class="sticky-image-layout" class:overlay={mode === 'overlay'}>
<div class="image-wrap-desktop"> <figure class="image-wrap-desktop">
<img {src} {alt}> <img {src} {alt}>
{#if caption} {#if caption}
<figcaption class="image-caption">{@html caption}</figcaption> <figcaption class="image-caption">{@html caption}</figcaption>
{/if} {/if}
</div> </figure>
<PipImage {pip} {src} {alt} visible={inView} bind:el={pipEl} /> <PipImage {pip} {src} {alt} visible={inView} bind:el={pipEl} />
<div class="content-scroll" bind:this={contentEl}> <div class="content-scroll" bind:this={contentEl}>
{@render children()} {@render children()}
@@ -109,6 +109,7 @@
} }
.image-wrap-desktop { .image-wrap-desktop {
display: none; display: none;
margin: 0;
} }
.image-caption { .image-caption {
font-size: 0.8rem; font-size: 0.8rem;

4
src/lib/components/recipes/AddToFoodLogButton.svelte
View File

@@ -188,8 +188,8 @@
{#if showDialog} {#if showDialog}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="dialog-overlay" onclick={() => showDialog = false} onkeydown={(e) => e.key === 'Escape' && (showDialog = false)}> <div class="dialog-overlay" onclick={() => showDialog = false} onkeydown={(e) => e.key === 'Escape' && (showDialog = false)}>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
<div class="dialog" onclick={(e) => e.stopPropagation()}> <div class="dialog" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
<div class="dialog-header"> <div class="dialog-header">
<h3>{labels.addToLog}</h3> <h3>{labels.addToLog}</h3>
<button class="close-btn" onclick={() => showDialog = false}><X size={18} /></button> <button class="close-btn" onclick={() => showDialog = false}><X size={18} /></button>

8
src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
View File

@@ -792,7 +792,7 @@
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fab-overlay" onclick={closeFabModal} onkeydown={(e) => e.key === 'Escape' && closeFabModal()}> <div class="fab-overlay" onclick={closeFabModal} onkeydown={(e) => e.key === 'Escape' && closeFabModal()}>
<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
<div class="fab-modal" onclick={(e) => e.stopPropagation()}> <div class="fab-modal" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
<div class="fab-modal-header"> <div class="fab-modal-header">
<h3>{t('add_food', lang)}</h3> <h3>{t('add_food', lang)}</h3>
<button class="fab-close" onclick={closeFabModal}><Plus size={18} style="transform: rotate(45deg)" /></button> <button class="fab-close" onclick={closeFabModal}><Plus size={18} style="transform: rotate(45deg)" /></button>
@@ -1596,8 +1596,7 @@
cursor: not-allowed; cursor: not-allowed;
transform: none; transform: none;
} }
.btn-secondary, .btn-secondary {
.btn-cancel {
padding: 0.5rem 1.1rem; padding: 0.5rem 1.1rem;
background: var(--color-bg-tertiary); background: var(--color-bg-tertiary);
color: var(--color-text-primary); color: var(--color-text-primary);
@@ -1608,9 +1607,6 @@
font-weight: 500; font-weight: 500;
transition: background 0.15s; transition: background 0.15s;
} }
.btn-cancel:hover {
background: var(--color-bg-elevated);
}
/* ── Day Total ── */ /* ── Day Total ── */
/* ── FAB Modal ── */ /* ── FAB Modal ── */

18
src/routes/fitness/[nutrition=fitnessNutrition]/meals/+page.svelte
View File

@@ -172,16 +172,18 @@
<div class="form-card"> <div class="form-card">
<h2 class="form-title">{editingId ? t('edit', lang) : t('new_meal', lang)}</h2> <h2 class="form-title">{editingId ? t('edit', lang) : t('new_meal', lang)}</h2>
<label class="field-label">{t('meal_name', lang)}</label> <label class="field-label">
<input {t('meal_name', lang)}
type="text" <input
class="text-input" type="text"
bind:value={mealName} class="text-input"
placeholder={t('meal_name', lang)} bind:value={mealName}
/> placeholder={t('meal_name', lang)}
/>
</label>
<!-- Ingredients list --> <!-- Ingredients list -->
<label class="field-label">{t('ingredients', lang)} ({ingredients.length})</label> <span class="field-label">{t('ingredients', lang)} ({ingredients.length})</span>
{#if ingredients.length > 0} {#if ingredients.length > 0}
<div class="ingredients-list"> <div class="ingredients-list">
{#each ingredients as ing, i} {#each ingredients as ing, i}