fix(ui): render full card content in mobile inline expansion
Promoted cards now show decision/steps/link/body sections in inline detail instead of just a body preview. Fullscreen removes line clamp.
This commit is contained in:
+54
-1
@@ -664,12 +664,65 @@
|
|||||||
actions += `<button class="action-btn primary" onclick="event.stopPropagation();nibApp.showPromote('${e.id}')">promote</button>`;
|
actions += `<button class="action-btn primary" onclick="event.stopPropagation();nibApp.showPromote('${e.id}')">promote</button>`;
|
||||||
}
|
}
|
||||||
if (e.card_type) {
|
if (e.card_type) {
|
||||||
|
actions += `<button class="action-btn primary" onclick="event.stopPropagation();nibApp.copyEntity('${e.id}')">copy</button>`;
|
||||||
actions += `<button class="action-btn danger" onclick="event.stopPropagation();nibApp.demoteEntity('${e.id}')">demote</button>`;
|
actions += `<button class="action-btn danger" onclick="event.stopPropagation();nibApp.demoteEntity('${e.id}')">demote</button>`;
|
||||||
} else {
|
} else {
|
||||||
actions += `<button class="action-btn danger" onclick="event.stopPropagation();nibApp.deleteEntity('${e.id}')">delete</button>`;
|
actions += `<button class="action-btn danger" onclick="event.stopPropagation();nibApp.deleteEntity('${e.id}')">delete</button>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let content = '';
|
||||||
|
if (e.card_type) {
|
||||||
|
const data = e.card_data ? (() => { try { return JSON.parse(e.card_data); } catch { return {}; } })() : {};
|
||||||
|
const hasDecision = data.chose != null;
|
||||||
|
const hasSteps = data.steps && data.steps.length;
|
||||||
|
const hasLink = !!data.url;
|
||||||
|
const hasFill = /\$\{[^}]+\}/.test(e.body || '');
|
||||||
|
|
||||||
|
if (hasDecision) {
|
||||||
|
const rejected = (data.rejected || []).map(r => `<span class="peek-dec-rej">${escHtml(r)}</span>`).join('');
|
||||||
|
content += `<div class="peek-sec">
|
||||||
|
<div class="peek-sec-lbl">decision<span class="peek-sec-status">${data.status || 'decided'}</span></div>
|
||||||
|
<div class="peek-sec-inner peek-decision">
|
||||||
|
<div class="peek-dec-choice">${escHtml(data.chose)}</div>
|
||||||
|
<div class="peek-dec-why"><span class="peek-dec-key">why</span>${escHtml(data.why || '')}</div>
|
||||||
|
${rejected ? `<div><span class="peek-dec-key">considered</span><div class="peek-dec-rejected">${rejected}</div></div>` : ''}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
if (hasLink && !hasDecision) {
|
||||||
|
content += `<div class="peek-sec">
|
||||||
|
<div class="peek-sec-lbl">link</div>
|
||||||
|
<div class="peek-sec-inner"><div class="peek-link-url">↗ ${escHtml(data.url)}</div></div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
if (hasSteps) {
|
||||||
|
const steps = data.steps.map(s => `<div class="peek-step"><span class="peek-step-mark" style="color:var(--dim)">○</span><span class="peek-step-text">${escHtml(s.text || s)}</span></div>`).join('');
|
||||||
|
content += `<div class="peek-sec">
|
||||||
|
<div class="peek-sec-lbl">steps · ${data.steps.length}<button class="peek-sec-run" onclick="event.stopPropagation();nibApp.enterMode('run')">▶ run</button></div>
|
||||||
|
<div class="peek-sec-inner"><div class="peek-steps">${steps}</div></div>
|
||||||
|
</div>`;
|
||||||
|
actions += `<button class="action-btn" onclick="event.stopPropagation();nibApp.enterMode('run')">run</button>`;
|
||||||
|
}
|
||||||
|
if (hasFill) {
|
||||||
|
actions += `<button class="action-btn" onclick="event.stopPropagation();nibApp.enterMode('fill')">fill</button>`;
|
||||||
|
}
|
||||||
|
if (!hasDecision && e.body) {
|
||||||
|
const lang = data.lang || '';
|
||||||
|
const isCode = lang || e.card_type === 'snippet';
|
||||||
|
const bodyHtml = isCode
|
||||||
|
? `<div class="peek-code"><pre><code>${escHtml(e.body)}</code></pre></div>`
|
||||||
|
: `<div class="exp-body md">${renderMd(e.body)}</div>`;
|
||||||
|
content += `<div class="peek-sec">
|
||||||
|
<div class="peek-sec-lbl">content${lang ? `<span class="peek-sec-lang">${lang}</span>` : ''}</div>
|
||||||
|
<div class="peek-sec-inner">${bodyHtml}</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
content = `<div class="exp-body md">${renderMd(e.body || '')}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
return `<div class="exp-inner">
|
return `<div class="exp-inner">
|
||||||
<div class="exp-body md">${renderMd(e.body || '')}</div>
|
${content}
|
||||||
${tags ? `<div class="exp-tags">${tags}</div>` : ''}
|
${tags ? `<div class="exp-tags">${tags}</div>` : ''}
|
||||||
<div class="exp-acts">${actions}</div>
|
<div class="exp-acts">${actions}</div>
|
||||||
<div class="exp-toolbar">
|
<div class="exp-toolbar">
|
||||||
|
|||||||
+2
-1
@@ -414,7 +414,8 @@ main.focus-peek .resize-handle { visibility: hidden; }
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entity-item.exp-full .exp-body {
|
.entity-item.exp-full .exp-body,
|
||||||
|
.card-row.exp-full .exp-body {
|
||||||
-webkit-line-clamp: unset;
|
-webkit-line-clamp: unset;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user