Clean. Here's what's live now:
- **Tag filter bar** appears above the grid whenever any download has tags assigned. Chips for "All" + each unique tag, centered under the heading. - **Clicking a tag** filters the grid to only matching downloads. Clicking the active tag again (or "All") clears the filter. - **Empty state** — if a tag has no results it shows a friendly message instead of a blank grid. - The filter only shows when tags exist — so it's invisible today (your 3 current downloads have no tags) and appears automatically once you start tagging items in the admin. To use it: go to Admin → Downloads → edit a download item → add tags like `Colossians`, `Worksheet`, `Devotional`. Those tags will show up as filter chips on the public page instantly after publishing.
This commit is contained in:
nmemmert
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"users": {},
|
||||
"updatedAt": "2026-06-04T14:16:50.276Z"
|
||||
"updatedAt": "2026-06-05T13:00:29.596Z"
|
||||
}
|
||||
+73
-12
@@ -2591,8 +2591,8 @@
|
||||
|
||||
.resources-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.resource-link {
|
||||
@@ -2628,42 +2628,61 @@
|
||||
background: #111;
|
||||
border: 1px solid rgba(201, 168, 76, 0.18);
|
||||
border-radius: 18px;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
|
||||
}
|
||||
|
||||
.resource-download-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background: rgba(201, 168, 76, 0.06);
|
||||
border-color: rgba(201, 168, 76, 0.32);
|
||||
}
|
||||
|
||||
.resource-download-header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.resource-download-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.resource-link-label {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.resource-link-description {
|
||||
font-size: 0.92rem;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.resource-link-action {
|
||||
color: var(--brand-gold);
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.resource-link-image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 16px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 14px;
|
||||
object-fit: cover;
|
||||
border: 1px solid rgba(201, 168, 76, 0.2);
|
||||
flex-shrink: 0;
|
||||
@@ -2696,6 +2715,48 @@
|
||||
margin: 0.85rem auto 0;
|
||||
}
|
||||
|
||||
.download-tag-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
margin: 0 auto 2rem;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.download-tag-chip {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(201, 168, 76, 0.3);
|
||||
border-radius: 999px;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
cursor: pointer;
|
||||
font-family: var(--brand-font-body);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 0.35rem 1rem;
|
||||
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
|
||||
}
|
||||
|
||||
.download-tag-chip:hover {
|
||||
background: rgba(201, 168, 76, 0.1);
|
||||
border-color: rgba(201, 168, 76, 0.55);
|
||||
color: var(--brand-warm-white);
|
||||
}
|
||||
|
||||
.download-tag-chip--active {
|
||||
background: rgba(201, 168, 76, 0.15);
|
||||
border-color: var(--brand-gold);
|
||||
color: var(--brand-gold);
|
||||
}
|
||||
|
||||
.download-empty-state {
|
||||
text-align: center;
|
||||
color: var(--brand-muted);
|
||||
font-family: var(--brand-font-body);
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.download-library-group {
|
||||
background: rgba(17, 17, 17, 0.82);
|
||||
border: 1px solid rgba(201, 168, 76, 0.14);
|
||||
|
||||
+30
-7
@@ -782,26 +782,45 @@ function PodcastHighlightsSection({ content }: { content: SiteContent }) {
|
||||
function DownloadLibrarySection({ content }: { content: SiteContent }) {
|
||||
const resources = (content.customLinks ?? []).filter(link => link.placement === 'resources')
|
||||
const archivedWithResources = (content.archivedSeries ?? []).filter(series => (series.resourceLinks ?? []).length > 0)
|
||||
const [activeTag, setActiveTag] = useState<string | null>(null)
|
||||
|
||||
if (resources.length === 0 && archivedWithResources.length === 0) return null
|
||||
|
||||
const allTags = Array.from(new Set(resources.flatMap(r => r.tags ?? []))).filter(Boolean)
|
||||
const filteredResources = activeTag ? resources.filter(r => (r.tags ?? []).includes(activeTag)) : resources
|
||||
|
||||
return (
|
||||
<section className="section-resources section-download-library" aria-label="Download library">
|
||||
<div className="section-inner">
|
||||
<div className="download-library-head">
|
||||
<p className="eyebrow">Download Library</p>
|
||||
<h2 className="section-heading">More guides, worksheets, and past study downloads.</h2>
|
||||
<p className="download-library-copy">Keep the main guide featured at the top, and use this library for every other download you want available on the page.</p>
|
||||
</div>
|
||||
|
||||
{resources.length > 0 && (
|
||||
{allTags.length > 0 && (
|
||||
<div className="download-tag-filter">
|
||||
<button
|
||||
className={`download-tag-chip${activeTag === null ? ' download-tag-chip--active' : ''}`}
|
||||
onClick={() => setActiveTag(null)}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
{allTags.map(tag => (
|
||||
<button
|
||||
key={tag}
|
||||
className={`download-tag-chip${activeTag === tag ? ' download-tag-chip--active' : ''}`}
|
||||
onClick={() => setActiveTag(prev => prev === tag ? null : tag)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filteredResources.length > 0 && (
|
||||
<div className="download-library-group">
|
||||
<div className="download-library-group-head">
|
||||
<h3>Current Downloads</h3>
|
||||
<p>Extra files you want people to grab right now.</p>
|
||||
</div>
|
||||
<div className="resources-list">
|
||||
{resources.map(resource => (
|
||||
{filteredResources.map(resource => (
|
||||
<Link key={resource.id} to={`/downloads/${buildCustomDownloadPageId(resource.id)}`} className="resource-download-card resource-download-card--link">
|
||||
<div className="resource-download-header">
|
||||
{resource.imageUrl && (
|
||||
@@ -822,6 +841,10 @@ function DownloadLibrarySection({ content }: { content: SiteContent }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTag !== null && filteredResources.length === 0 && (
|
||||
<p className="download-empty-state">No downloads tagged "{activeTag}".</p>
|
||||
)}
|
||||
|
||||
{archivedWithResources.length > 0 && (
|
||||
<div className="download-library-group">
|
||||
<div className="download-library-group-head">
|
||||
|
||||
Reference in New Issue
Block a user