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/InventoryEditForm.tsx
+99 -30
View File
@@ -120,25 +120,39 @@ export default function InventoryEditForm({ item }: Props) {
gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
}}
>
<label>
Mängd
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Mängd</span>
<input
name="quantity"
type="text"
required
defaultValue={item.quantity}
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>
Enhet
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Enhet</span>
<select
name="unit"
defaultValue={item.unit}
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',
}}
>
{UNIT_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
@@ -148,13 +162,20 @@ export default function InventoryEditForm({ item }: Props) {
</select>
</label>
<label>
Plats
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Plats</span>
<select
name="location"
defaultValue={item.location || ''}
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',
}}
>
{LOCATION_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
@@ -164,48 +185,76 @@ export default function InventoryEditForm({ item }: Props) {
</select>
</label>
<label>
Varumärke
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Varumärke</span>
<input
name="brand"
type="text"
defaultValue={item.brand || ''}
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>
Bäst före
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Bäst före</span>
<input
name="bestBeforeDate"
type="date"
defaultValue={toDateInputValue(item.bestBeforeDate)}
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>
</div>
<label>
Passar till
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Passar till</span>
<input
name="suitableFor"
type="text"
defaultValue={item.suitableFor || ''}
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"
defaultValue={item.comment || ''}
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>
@@ -222,7 +271,17 @@ export default function InventoryEditForm({ item }: 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 ändringar'}
</button>
@@ -231,7 +290,17 @@ export default function InventoryEditForm({ item }: Props) {
type="button"
onClick={() => setIsEditing(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>