xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Reordered technique page sidebar (plugins first), added prominent…

Browse source 
- "frontend/src/pages/TechniquePage.tsx"
- "frontend/src/App.css"

GSD-Task: S04/T01
This commit is contained in:
jlightner 2026-03-30 11:34:14 +00:00
parent d00639a2ea
commit 7058cba307
2 changed files with 72 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
frontend/src/App.css
View file

@ -85,6 +85,20 @@
--color-badge-quality-unstructured-bg: #422006;
--color-badge-quality-unstructured-text: #fcd34d;
/* Per-category badge colors */
--color-badge-cat-sound-design-bg: #0d3b3b;
--color-badge-cat-sound-design-text: #5eead4;
--color-badge-cat-mixing-bg: #2e1065;
--color-badge-cat-mixing-text: #c4b5fd;
--color-badge-cat-synthesis-bg: #0c2461;
--color-badge-cat-synthesis-text: #93c5fd;
--color-badge-cat-arrangement-bg: #422006;
--color-badge-cat-arrangement-text: #fcd34d;
--color-badge-cat-workflow-bg: #052e16;
--color-badge-cat-workflow-text: #6ee7b7;
--color-badge-cat-mastering-bg: #4a1035;
--color-badge-cat-mastering-text: #f9a8d4;
/* Genre pills */
--color-genre-pill-bg: #1a1a24;
--color-genre-pill-text: #e2e2ea;
@ -1184,6 +1198,13 @@ body {
color: var(--color-badge-category-text);
}
.badge--cat-sound-design { background: var(--color-badge-cat-sound-design-bg); color: var(--color-badge-cat-sound-design-text); }
.badge--cat-mixing { background: var(--color-badge-cat-mixing-bg); color: var(--color-badge-cat-mixing-text); }
.badge--cat-synthesis { background: var(--color-badge-cat-synthesis-bg); color: var(--color-badge-cat-synthesis-text); }
.badge--cat-arrangement { background: var(--color-badge-cat-arrangement-bg); color: var(--color-badge-cat-arrangement-text); }
.badge--cat-workflow { background: var(--color-badge-cat-workflow-bg); color: var(--color-badge-cat-workflow-text); }
.badge--cat-mastering { background: var(--color-badge-cat-mastering-bg); color: var(--color-badge-cat-mastering-text); }
.badge--type {
font-size: 0.6875rem;
text-transform: uppercase;
@ -1305,14 +1326,31 @@ body {
gap: 0.25rem;
}
.technique-header__creator {
font-size: 0.875rem;
.technique-header__creator-block {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.technique-header__creator-link {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-link-accent);
text-decoration: none;
}
.technique-header__creator:hover {
.technique-header__creator-link:hover {
text-decoration: underline;
color: var(--color-accent-hover);
}
.pill--genre-small {
font-size: 0.625rem;
padding: 0.0625rem 0.375rem;
background: var(--color-pill-bg);
color: var(--color-text-secondary);
}
.technique-header__stats {

54
frontend/src/pages/TechniquePage.tsx
View file

@ -226,8 +226,24 @@ export default function TechniquePage() {
{/* Header */}
<header className="technique-header">
<h1 className="technique-header__title">{displayTitle}</h1>
{technique.creator_info && (
<div className="technique-header__creator-block">
<Link to={`/creators/${technique.creator_info.slug}`} className="technique-header__creator-link">
{technique.creator_info.name}
</Link>
{technique.creator_info.genres && technique.creator_info.genres.length > 0 && (
<span className="technique-header__creator-genres">
{technique.creator_info.genres.map((g) => (
<span key={g} className="pill pill--genre-small">{g}</span>
))}
</span>
)}
</div>
)}
<div className="technique-header__meta">
<span className="badge badge--category">{displayCategory}</span>
<span className={`badge badge--category badge--cat-${displayCategory?.toLowerCase().replace(/\s+/g, '-') ?? ''}`}>
{displayCategory}
</span>
{displayTags && displayTags.length > 0 && (
<span className="technique-header__tags">
{displayTags.map((tag) => (
@ -237,14 +253,6 @@ export default function TechniquePage() {
))}
</span>
)}
{technique.creator_info && (
<Link
to={`/creators/${technique.creator_info.slug}`}
className="technique-header__creator"
>
by {technique.creator_info.name}
</Link>
)}
{displayQuality && (
<span
className={`badge badge--quality badge--quality-${displayQuality}`}
@ -405,6 +413,20 @@ export default function TechniquePage() {
</div>
<div className="technique-columns__sidebar">
{/* Plugins */}
{displayPlugins && displayPlugins.length > 0 && (
<section className="technique-plugins">
<h2>Plugins Referenced</h2>
<div className="pill-list">
{displayPlugins.map((plugin) => (
<span key={plugin} className="pill pill--plugin">
{plugin}
</span>
))}
</div>
</section>
)}
{/* Key moments (always from live data — not versioned) */}
{technique.key_moments.length > 0 && (
<section className="technique-moments">
@ -472,20 +494,6 @@ export default function TechniquePage() {
</section>
)}
{/* Plugins */}
{displayPlugins && displayPlugins.length > 0 && (
<section className="technique-plugins">
<h2>Plugins Referenced</h2>
<div className="pill-list">
{displayPlugins.map((plugin) => (
<span key={plugin} className="pill pill--plugin">
{plugin}
</span>
))}
</div>
</section>
)}
{/* Related techniques (always from live data) */}
{technique.related_links.length > 0 && (
<section className="technique-related">