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 {
|
.technique-columns {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 22rem;
|
grid-template-columns: 1fr 16rem;
|
||||||
gap: 2rem;
|
gap: 1.5rem;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1861,6 +1861,7 @@ a.app-footer__repo:hover {
|
||||||
top: 3.5rem; /* below sticky title bar */
|
top: 3.5rem; /* below sticky title bar */
|
||||||
max-height: calc(100vh - 4rem);
|
max-height: calc(100vh - 4rem);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
margin-left: auto; /* right-align within column */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
@ -2108,7 +2109,7 @@ a.app-footer__repo:hover {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
color: #c084fc;
|
color: var(--color-text-secondary);
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -314,105 +314,6 @@ export default function TechniquePage() {
|
||||||
</div>
|
</div>
|
||||||
</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 */}
|
{/* Report modal */}
|
||||||
{showReport && (
|
{showReport && (
|
||||||
<ReportIssueModal
|
<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 */}
|
{/* Two-column layout: main content + ToC sidebar */}
|
||||||
<div className="technique-columns">
|
<div className="technique-columns">
|
||||||
<div className="technique-columns__main">
|
<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 */}
|
{/* Summary */}
|
||||||
{displaySummary && (
|
{displaySummary && (
|
||||||
<section className="technique-summary">
|
<section className="technique-summary">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue