From 66699270f57c6a63609e757a50743e812091b9e0 Mon Sep 17 00:00:00 2001 From: nmemmert Date: Fri, 5 Jun 2026 09:23:55 -0400 Subject: [PATCH] Clean. Here's what's live now: MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - **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. --- data/study-reminders.json | 2 +- src/App.css | 85 +++++++++++++++++++++++++++++++++------ src/App.tsx | 37 +++++++++++++---- 3 files changed, 104 insertions(+), 20 deletions(-) diff --git a/data/study-reminders.json b/data/study-reminders.json index 664a2a8..545ea31 100644 --- a/data/study-reminders.json +++ b/data/study-reminders.json @@ -1,4 +1,4 @@ { "users": {}, - "updatedAt": "2026-06-04T14:16:50.276Z" + "updatedAt": "2026-06-05T13:00:29.596Z" } \ No newline at end of file diff --git a/src/App.css b/src/App.css index 04a43e5..e97dcb3 100644 --- a/src/App.css +++ b/src/App.css @@ -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); diff --git a/src/App.tsx b/src/App.tsx index cadb174..2c58182 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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(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 (

Download Library

More guides, worksheets, and past study downloads.

-

Keep the main guide featured at the top, and use this library for every other download you want available on the page.

- {resources.length > 0 && ( + {allTags.length > 0 && ( +
+ + {allTags.map(tag => ( + + ))} +
+ )} + + {filteredResources.length > 0 && (
-
-

Current Downloads

-

Extra files you want people to grab right now.

-
- {resources.map(resource => ( + {filteredResources.map(resource => (
{resource.imageUrl && ( @@ -822,6 +841,10 @@ function DownloadLibrarySection({ content }: { content: SiteContent }) {
)} + {activeTag !== null && filteredResources.length === 0 && ( +

No downloads tagged "{activeTag}".

+ )} + {archivedWithResources.length > 0 && (