nate/Siteforge
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Clean. Here's what's live now:

Browse Source 
- **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
2026-06-05 09:23:55 -04:00
parent c80804b055
commit 66699270f5
3 changed files with 104 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+73 -12
View File
@@ -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);