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/admin/products/CanonicalNameForm.tsx
+31 -3
View File
@@ -34,15 +34,43 @@ export default function CanonicalNameForm({
}}
style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}
>
<input type="hidden" name="id" value={id} />
<input
type="hidden"
name="id"
value={id}
/>
<input
name="canonicalName"
type="text"
defaultValue={currentCanonicalName || ''}
placeholder="Canonical name"
style={{ padding: '0.4rem', minWidth: '220px' }}
style={{
padding: '0.75rem',
border: '1px solid #ddd',
borderRadius: '4px',
fontSize: '1rem',
boxSizing: 'border-box',
minHeight: '44px',
minWidth: '220px',
flex: '1 1 200px',
}}
/>
<button type="submit" disabled={isPending} style={{ padding: '0.4rem 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,
whiteSpace: 'nowrap',
}}
>
{isPending ? 'Sparar...' : 'Spara'}
</button>
{error ? <span style={{ color: 'crimson' }}>{error}</span> : null}
frontend/app/admin/products/MergePreviewForm.tsx
+67 -13
View File
@@ -99,14 +99,21 @@ export default function MergePreviewForm({ products }: Props) {
>
<h2 style={{ margin: 0 }}>Förhandsgranska merge</h2>
<div style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: '1fr 1fr' }}>
<label>
Source product (ska bort)
<br />
<div style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Source product (ska bort)</span>
<select
value={sourceProductId}
onChange={(e) => setSourceProductId(e.target.value)}
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',
}}
>
<option value="">Välj source</option>
{products.map((product) => (
@@ -117,13 +124,20 @@ export default function MergePreviewForm({ products }: Props) {
</select>
</label>
<label>
Target product (ska behållas)
<br />
<label style={{ display: 'grid', gap: '0.3rem' }}>
<span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Target product (ska behållas)</span>
<select
value={targetProductId}
onChange={(e) => setTargetProductId(e.target.value)}
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',
}}
>
<option value="">Välj target</option>
{products.map((product) => (
@@ -140,7 +154,17 @@ export default function MergePreviewForm({ products }: Props) {
type="button"
onClick={fetchPreview}
disabled={isPending}
style={{ padding: '0.6rem 1rem' }}
style={{
padding: '0.75rem 1.5rem',
background: '#0070f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '1rem',
minHeight: '44px',
fontWeight: 600,
}}
>
{isPending ? 'Hämtar preview...' : 'Förhandsgranska merge'}
</button>
@@ -150,7 +174,17 @@ export default function MergePreviewForm({ products }: Props) {
type="button"
onClick={() => setIsConfirming((prev) => !prev)}
disabled={isPending}
style={{ padding: '0.6rem 1rem' }}
style={{
padding: '0.75rem 1.5rem',
background: '#f0f0f0',
color: '#333',
border: '1px solid #ccc',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '1rem',
minHeight: '44px',
fontWeight: 600,
}}
>
{isConfirming ? 'Avbryt bekräftelse' : 'Gå vidare till bekräftelse'}
</button>
@@ -239,7 +273,17 @@ export default function MergePreviewForm({ products }: Props) {
type="button"
onClick={confirmMerge}
disabled={isPending}
style={{ padding: '0.75rem 1rem' }}
style={{
padding: '0.75rem 1.5rem',
background: '#c0392b',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '1rem',
minHeight: '44px',
fontWeight: 600,
}}
>
{isPending ? 'Slår ihop...' : 'Bekräfta merge'}
</button>
@@ -248,7 +292,17 @@ export default function MergePreviewForm({ products }: Props) {
type="button"
onClick={() => setIsConfirming(false)}
disabled={isPending}
style={{ padding: '0.75rem 1rem' }}
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>
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>
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>
frontend/app/inventory/ProductForm.tsx
+31 -10
View File
@@ -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>
frontend/app/recipes/[id]/edit/page.tsx
+39 -5
View File
@@ -57,6 +57,7 @@ export default function EditRecipePage() {
const [isDeleting, setIsDeleting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [showPreview, setShowPreview] = useState(false);
const [showMarkdownHelp, setShowMarkdownHelp] = useState(false);
useEffect(() => {
const loadData = async () => {
@@ -205,6 +206,7 @@ export default function EditRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
}}
/>
</div>
@@ -225,6 +227,7 @@ export default function EditRecipePage() {
fontSize: '1rem',
minHeight: '100px',
fontFamily: 'inherit',
boxSizing: 'border-box',
}}
/>
</div>
@@ -233,10 +236,32 @@ export default function EditRecipePage() {
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
Instruktioner
</label>
<div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
<strong>Markdown-stöd:</strong>
<div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
</div>
<button
type="button"
onClick={() => setShowMarkdownHelp(!showMarkdownHelp)}
style={{
marginBottom: '0.5rem',
padding: '0.4rem 0.75rem',
background: '#f9f9f9',
border: '1px solid #ddd',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '0.85rem',
color: '#666',
fontWeight: 500,
display: 'flex',
alignItems: 'center',
gap: '0.25rem',
}}
>
<span>{showMarkdownHelp ? '▼' : '▶'}</span>
<strong>Markdown-stöd</strong>
</button>
{showMarkdownHelp && (
<div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
<div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
</div>
)}
<textarea
value={recipe.instructions}
@@ -249,7 +274,8 @@ export default function EditRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '150px',
fontFamily: 'monospace',
fontFamily: 'inherit',
boxSizing: 'border-box',
}}
/>
@@ -313,6 +339,8 @@ export default function EditRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
width: '100%',
}}
>
<option value={0}>Välj produkt</option>
@@ -335,6 +363,8 @@ export default function EditRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
width: '100%',
}}
/>
@@ -348,6 +378,8 @@ export default function EditRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
width: '100%',
}}
>
{UNIT_OPTIONS.map((opt) => (
@@ -368,6 +400,8 @@ export default function EditRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
width: '100%',
}}
/>
frontend/app/recipes/create/CreateRecipePage.tsx
+39 -5
View File
@@ -51,6 +51,7 @@ export default function CreateRecipePage() {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [showPreview, setShowPreview] = useState(false);
const [showMarkdownHelp, setShowMarkdownHelp] = useState(false);
useEffect(() => {
fetchJson<Product[]>('/api/products')
@@ -160,6 +161,7 @@ export default function CreateRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
}}
/>
</div>
@@ -180,6 +182,7 @@ export default function CreateRecipePage() {
fontSize: '1rem',
minHeight: '100px',
fontFamily: 'inherit',
boxSizing: 'border-box',
}}
/>
</div>
@@ -188,10 +191,32 @@ export default function CreateRecipePage() {
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
Instruktioner
</label>
<div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
<strong>Markdown-stöd:</strong>
<div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
</div>
<button
type="button"
onClick={() => setShowMarkdownHelp(!showMarkdownHelp)}
style={{
marginBottom: '0.5rem',
padding: '0.4rem 0.75rem',
background: '#f9f9f9',
border: '1px solid #ddd',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '0.85rem',
color: '#666',
fontWeight: 500,
display: 'flex',
alignItems: 'center',
gap: '0.25rem',
}}
>
<span>{showMarkdownHelp ? '▼' : '▶'}</span>
<strong>Markdown-stöd</strong>
</button>
{showMarkdownHelp && (
<div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
<div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
</div>
)}
<textarea
value={recipe.instructions}
@@ -204,7 +229,8 @@ export default function CreateRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '150px',
fontFamily: 'monospace',
fontFamily: 'inherit',
boxSizing: 'border-box',
}}
/>
@@ -268,6 +294,8 @@ export default function CreateRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
width: '100%',
}}
>
<option value={0}>Välj produkt</option>
@@ -290,6 +318,8 @@ export default function CreateRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
width: '100%',
}}
/>
@@ -303,6 +333,8 @@ export default function CreateRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
width: '100%',
}}
>
{UNIT_OPTIONS.map((opt) => (
@@ -323,6 +355,8 @@ export default function CreateRecipePage() {
borderRadius: '4px',
fontSize: '1rem',
minHeight: '44px',
boxSizing: 'border-box',
width: '100%',
}}
/>