fix: revert purple accents, move stats/tags into grid main column, shrink sidebar to 16rem, right-align ToC, fix stray CSS brace
This commit is contained in:
jlightner
parent
ffd50a76df
commit
71183639ea
2 changed files with 119 additions and 118 deletions
|
|
@ -1845,8 +1845,8 @@ a.app-footer__repo:hover {
|
|||
|
||||
.technique-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
gap: 2rem;
|
||||
grid-template-columns: 1fr 16rem;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
|
|
@ -1861,6 +1861,7 @@ a.app-footer__repo:hover {
|
|||
top: 3.5rem; /* below sticky title bar */
|
||||
max-height: calc(100vh - 4rem);
|
||||
overflow-y: auto;
|
||||
margin-left: auto; /* right-align within column */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -2108,7 +2109,7 @@ a.app-footer__repo:hover {
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #c084fc;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -314,105 +314,6 @@ export default function TechniquePage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats + version switcher */}
|
||||
<div className="technique-header__stats">
|
||||
{(() => {
|
||||
const sourceCount = new Set(
|
||||
technique.key_moments
|
||||
.map((km) => km.video_filename)
|
||||
.filter(Boolean),
|
||||
).size;
|
||||
const momentCount = technique.key_moments.length;
|
||||
const updated = new Date(technique.updated_at).toLocaleDateString(
|
||||
"en-US",
|
||||
{ year: "numeric", month: "short", day: "numeric" },
|
||||
);
|
||||
const parts = [
|
||||
`Compiled from ${sourceCount} source${sourceCount !== 1 ? "s" : ""}`,
|
||||
`${momentCount} key moment${momentCount !== 1 ? "s" : ""}`,
|
||||
];
|
||||
if (technique.version_count > 0) {
|
||||
parts.push(
|
||||
`${technique.version_count} version${technique.version_count !== 1 ? "s" : ""}`,
|
||||
);
|
||||
}
|
||||
parts.push(`Last updated ${updated}`);
|
||||
return parts.join(" · ");
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="technique-header__actions">
|
||||
{versions.length > 0 && (
|
||||
<div className="version-switcher">
|
||||
<label className="version-switcher__label">Version:</label>
|
||||
<select
|
||||
className="version-switcher__select"
|
||||
value={selectedVersion}
|
||||
onChange={(e) => setSelectedVersion(e.target.value)}
|
||||
disabled={versionLoading}
|
||||
>
|
||||
<option value="current">Current (live)</option>
|
||||
{versions.map((v) => (
|
||||
<option key={v.version_number} value={String(v.version_number)}>
|
||||
v{v.version_number} — {formatDate(v.created_at)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{versionLoading && (
|
||||
<span className="version-switcher__loading">Loading…</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pipeline metadata for historical versions */}
|
||||
{isHistorical && versionDetail.pipeline_metadata && (
|
||||
<div className="version-metadata">
|
||||
<h4 className="version-metadata__title">Pipeline metadata (v{versionDetail.version_number})</h4>
|
||||
<div className="version-metadata__grid">
|
||||
{"model" in versionDetail.pipeline_metadata && (
|
||||
<div className="version-metadata__item">
|
||||
<span className="version-metadata__key">Model</span>
|
||||
<span className="version-metadata__value">
|
||||
{String(versionDetail.pipeline_metadata.model)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{"captured_at" in versionDetail.pipeline_metadata && (
|
||||
<div className="version-metadata__item">
|
||||
<span className="version-metadata__key">Captured</span>
|
||||
<span className="version-metadata__value">
|
||||
{formatDate(String(versionDetail.pipeline_metadata.captured_at))}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{typeof versionDetail.pipeline_metadata.prompt_hashes === "object" &&
|
||||
versionDetail.pipeline_metadata.prompt_hashes !== null && (
|
||||
<div className="version-metadata__item version-metadata__item--wide">
|
||||
<span className="version-metadata__key">Prompt hashes</span>
|
||||
<div className="version-metadata__hashes">
|
||||
{Object.entries(
|
||||
versionDetail.pipeline_metadata.prompt_hashes as Record<
|
||||
string,
|
||||
string
|
||||
>,
|
||||
).map(([file, hash]) => (
|
||||
<div key={file} className="version-metadata__hash">
|
||||
<span className="version-metadata__hash-file">
|
||||
{file.replace(/^.*\//, "")}
|
||||
</span>
|
||||
<code className="version-metadata__hash-value">
|
||||
{hash.slice(0, 12)}…
|
||||
</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Report modal */}
|
||||
{showReport && (
|
||||
<ReportIssueModal
|
||||
|
|
@ -423,25 +324,124 @@ export default function TechniquePage() {
|
|||
/>
|
||||
)}
|
||||
|
||||
{/* Tags + plugin pills */}
|
||||
{((displayTags && displayTags.length > 0) || (displayPlugins && displayPlugins.length > 0)) && (
|
||||
<div className="technique-main__tags">
|
||||
{displayTags && displayTags.map((tag) => (
|
||||
<span key={tag} className="pill">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{displayPlugins && displayPlugins.length > 0 && displayPlugins.map((plugin) => (
|
||||
<span key={`plugin-${plugin}`} className="pill pill--plugin">
|
||||
{plugin}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Two-column layout: main content + ToC sidebar */}
|
||||
<div className="technique-columns">
|
||||
<div className="technique-columns__main">
|
||||
{/* Stats + version switcher */}
|
||||
<div className="technique-header__stats">
|
||||
{(() => {
|
||||
const sourceCount = new Set(
|
||||
technique.key_moments
|
||||
.map((km) => km.video_filename)
|
||||
.filter(Boolean),
|
||||
).size;
|
||||
const momentCount = technique.key_moments.length;
|
||||
const updated = new Date(technique.updated_at).toLocaleDateString(
|
||||
"en-US",
|
||||
{ year: "numeric", month: "short", day: "numeric" },
|
||||
);
|
||||
const parts = [
|
||||
`Compiled from ${sourceCount} source${sourceCount !== 1 ? "s" : ""}`,
|
||||
`${momentCount} key moment${momentCount !== 1 ? "s" : ""}`,
|
||||
];
|
||||
if (technique.version_count > 0) {
|
||||
parts.push(
|
||||
`${technique.version_count} version${technique.version_count !== 1 ? "s" : ""}`,
|
||||
);
|
||||
}
|
||||
parts.push(`Last updated ${updated}`);
|
||||
return parts.join(" · ");
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="technique-header__actions">
|
||||
{versions.length > 0 && (
|
||||
<div className="version-switcher">
|
||||
<label className="version-switcher__label">Version:</label>
|
||||
<select
|
||||
className="version-switcher__select"
|
||||
value={selectedVersion}
|
||||
onChange={(e) => setSelectedVersion(e.target.value)}
|
||||
disabled={versionLoading}
|
||||
>
|
||||
<option value="current">Current (live)</option>
|
||||
{versions.map((v) => (
|
||||
<option key={v.version_number} value={String(v.version_number)}>
|
||||
v{v.version_number} — {formatDate(v.created_at)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{versionLoading && (
|
||||
<span className="version-switcher__loading">Loading…</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pipeline metadata for historical versions */}
|
||||
{isHistorical && versionDetail.pipeline_metadata && (
|
||||
<div className="version-metadata">
|
||||
<h4 className="version-metadata__title">Pipeline metadata (v{versionDetail.version_number})</h4>
|
||||
<div className="version-metadata__grid">
|
||||
{"model" in versionDetail.pipeline_metadata && (
|
||||
<div className="version-metadata__item">
|
||||
<span className="version-metadata__key">Model</span>
|
||||
<span className="version-metadata__value">
|
||||
{String(versionDetail.pipeline_metadata.model)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{"captured_at" in versionDetail.pipeline_metadata && (
|
||||
<div className="version-metadata__item">
|
||||
<span className="version-metadata__key">Captured</span>
|
||||
<span className="version-metadata__value">
|
||||
{formatDate(String(versionDetail.pipeline_metadata.captured_at))}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{typeof versionDetail.pipeline_metadata.prompt_hashes === "object" &&
|
||||
versionDetail.pipeline_metadata.prompt_hashes !== null && (
|
||||
<div className="version-metadata__item version-metadata__item--wide">
|
||||
<span className="version-metadata__key">Prompt hashes</span>
|
||||
<div className="version-metadata__hashes">
|
||||
{Object.entries(
|
||||
versionDetail.pipeline_metadata.prompt_hashes as Record<
|
||||
string,
|
||||
string
|
||||
>,
|
||||
).map(([file, hash]) => (
|
||||
<div key={file} className="version-metadata__hash">
|
||||
<span className="version-metadata__hash-file">
|
||||
{file.replace(/^.*\//, "")}
|
||||
</span>
|
||||
<code className="version-metadata__hash-value">
|
||||
{hash.slice(0, 12)}…
|
||||
</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags + plugin pills */}
|
||||
{((displayTags && displayTags.length > 0) || (displayPlugins && displayPlugins.length > 0)) && (
|
||||
<div className="technique-main__tags">
|
||||
{displayTags && displayTags.map((tag) => (
|
||||
<span key={tag} className="pill">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{displayPlugins && displayPlugins.length > 0 && displayPlugins.map((plugin) => (
|
||||
<span key={`plugin-${plugin}`} className="pill pill--plugin">
|
||||
{plugin}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary */}
|
||||
{displaySummary && (
|
||||
<section className="technique-summary">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue