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>