fix: UI improvements for unified prompt system (Issue #28)
Fixes: 1. Template field in stages now full width (was too narrow) 2. Table horizontal scrollbar for mobile (overflow-x: auto) 3. Table min-width 900px to prevent icon clipping 4. Added clickable placeholder chips below base template - Click to insert placeholders into template - Shows: weight_data, nutrition_data, activity_data, sleep_data, etc. UI now mobile-ready and more user-friendly.
This commit is contained in:
parent
0a3e76128a
commit
7dda520c9b
|
|
@ -390,7 +390,31 @@ export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
|
||||||
style={{ width: '100%', textAlign: 'left', resize: 'vertical', fontFamily: 'monospace', fontSize: 12 }}
|
style={{ width: '100%', textAlign: 'left', resize: 'vertical', fontFamily: 'monospace', fontSize: 12 }}
|
||||||
/>
|
/>
|
||||||
<div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 4 }}>
|
<div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 4 }}>
|
||||||
Verwende {'{{'} und {'}}'} für Platzhalter (z.B. weight_data, nutrition_data)
|
<div style={{ marginBottom: 4 }}>
|
||||||
|
Verwende {'{{'} und {'}}'} für Platzhalter:
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
|
||||||
|
{['weight_data', 'nutrition_data', 'activity_data', 'sleep_data', 'vitals_baseline', 'blood_pressure', 'profile_id', 'today'].map(ph => (
|
||||||
|
<code
|
||||||
|
key={ph}
|
||||||
|
onClick={() => {
|
||||||
|
const placeholder = `{{${ph}}}`
|
||||||
|
setTemplate(template + placeholder)
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
padding: '2px 6px',
|
||||||
|
background: 'var(--surface2)',
|
||||||
|
borderRadius: 4,
|
||||||
|
fontSize: 10,
|
||||||
|
cursor: 'pointer',
|
||||||
|
border: '1px solid var(--border)'
|
||||||
|
}}
|
||||||
|
title="Klicken zum Einfügen"
|
||||||
|
>
|
||||||
|
{'{{'}{ph}{'}}'}
|
||||||
|
</code>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -508,7 +532,7 @@ export default function UnifiedPromptModal({ prompt, onSave, onClose }) {
|
||||||
onChange={e => updateStagePrompt(stage.stage, pIdx, 'template', e.target.value)}
|
onChange={e => updateStagePrompt(stage.stage, pIdx, 'template', e.target.value)}
|
||||||
rows={3}
|
rows={3}
|
||||||
placeholder="Inline-Template mit {{placeholders}}..."
|
placeholder="Inline-Template mit {{placeholders}}..."
|
||||||
style={{ fontSize: 12, textAlign: 'left', resize: 'vertical', fontFamily: 'monospace' }}
|
style={{ width: '100%', fontSize: 12, textAlign: 'left', resize: 'vertical', fontFamily: 'monospace' }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -227,9 +227,9 @@ export default function AdminPromptsPage() {
|
||||||
background: 'var(--surface)',
|
background: 'var(--surface)',
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
border: '1px solid var(--border)',
|
border: '1px solid var(--border)',
|
||||||
overflow: 'hidden'
|
overflowX: 'auto'
|
||||||
}}>
|
}}>
|
||||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
<table style={{ width: '100%', minWidth: 900, borderCollapse: 'collapse' }}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr style={{
|
<tr style={{
|
||||||
background: 'var(--surface2)',
|
background: 'var(--surface2)',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user