Enhance form styling and add Markdown help toggle in recipe creation and editing pages. Enhance form and styling on other pages aswell.
This commit is contained in:
Nils-Johan Gynther
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -36,19 +36,40 @@ export default function ProductForm() {
|
||||
>
|
||||
<h2 style={{ margin: 0 }}>Skapa produkt</h2>
|
||||
|
||||
<label>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
|
||||
Produktnamn
|
||||
<br />
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Till exempel Rödkål"
|
||||
style={{ width: '100%', padding: '0.5rem' }}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Till exempel Rödkål"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '0.75rem',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '1rem',
|
||||
boxSizing: 'border-box',
|
||||
minHeight: '44px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<button type="submit" disabled={isPending} style={{ padding: '0.75rem' }}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
style={{
|
||||
padding: '0.75rem 1.5rem',
|
||||
background: '#0070f3',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '1rem',
|
||||
minHeight: '44px',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{isPending ? 'Sparar...' : 'Skapa produkt'}
|
||||
</button>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user