nilsjohan/recipe-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance form styling and add Markdown help toggle in recipe creation and editing pages. Enhance form and styling on other pages aswell.

Browse Source
This commit is contained in:
Nils-Johan Gynther
2026-04-10 19:56:49 +02:00
parent 34d10eb93f
commit bc2480b3cb
7 changed files with 350 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/inventory/InventoryConsumeForm.tsx
+44 -10
View File
@@ -64,25 +64,39 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
>
<input type="hidden" name="id" value={id} />
<label>
Hur mycket använde du? ({unit})
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Hur mycket använde du? ({unit})</span>
<input
name="amountUsed"
type="text"
required
style={{ width: '100%', padding: '0.5rem' }}
style={{
width: '100%',
padding: '0.75rem',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '1rem',
boxSizing: 'border-box',
minHeight: '44px',
}}
/>
</label>
<label>
Kommentar
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Kommentar</span>
<input
name="comment"
type="text"
placeholder="t.ex. lagade middag"
style={{ width: '100%', padding: '0.5rem' }}
style={{
width: '100%',
padding: '0.75rem',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '1rem',
boxSizing: 'border-box',
minHeight: '44px',
}}
/>
</label>
@@ -90,7 +104,17 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
<button
type="submit"
disabled={isPending}
style={{ padding: '0.6rem 0.9rem' }}
style={{
padding: '0.75rem 1.5rem',
background: '#0070f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '1rem',
minHeight: '44px',
fontWeight: 600,
}}
>
{isPending ? 'Sparar...' : 'Spara användning'}
</button>
@@ -99,7 +123,17 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
type="button"
onClick={() => setIsOpen(false)}
disabled={isPending}
style={{ padding: '0.6rem 0.9rem' }}
style={{
padding: '0.75rem 1.5rem',
background: '#f0f0f0',
color: '#333',
border: '1px solid #ccc',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '1rem',
minHeight: '44px',
fontWeight: 600,
}}
>
Avbryt
</button>