This repository has no description
styling tweaks
author
damedotblog
date
(Feb 27, 2025, 3:00 PM -0500)
commit
563dadf7
563dadf720eb562e703aeb409a40542d88862c72
parent
41942e07
41942e075eaf44d781f2e68fd5bfd8e92cda9879
+127
-89
+42
-51
src/components/Resources/Resources.css
+42
-51
src/components/Resources/Resources.css
···
112
112
justify-content: space-between;
113
113
}
114
114
115
-
/* Better category filter alignment */
116
-
.category-filters-container {
115
+
/* New filter dropdowns styling */
116
+
.filter-dropdowns {
117
+
display: flex;
118
+
gap: 16px;
117
119
width: 100%;
118
-
overflow-x: auto;
119
-
margin-bottom: 1rem;
120
120
}
121
121
122
-
.category-filters {
123
-
display: flex;
124
-
flex-wrap: nowrap;
125
-
gap: 8px;
126
-
padding-bottom: 0.5rem;
127
-
min-width: max-content;
122
+
.category-filter-dropdown,
123
+
.quality-filter {
124
+
flex: 1;
128
125
}
129
126
130
-
.category-filter {
131
-
white-space: nowrap;
132
-
background-color: var(--card-border);
127
+
.filter-select {
128
+
width: 100%;
129
+
padding: 12px 16px;
130
+
border: 1px solid var(--card-border);
131
+
border-radius: 8px;
132
+
font-size: 0.95rem;
133
+
background-color: var(--navbar-bg);
133
134
color: var(--text);
134
-
border: none;
135
-
padding: 8px 16px;
136
-
border-radius: 16px;
137
-
font-size: 0.9rem;
138
135
cursor: pointer;
139
-
transition: all 0.2s ease;
136
+
appearance: none;
137
+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
138
+
background-repeat: no-repeat;
139
+
background-position: right 12px center;
140
+
background-size: 16px;
140
141
}
141
142
142
-
.category-filter:hover {
143
-
background: var(--button-bg);
144
-
color: var(--button-text);
145
-
}
146
-
147
-
.category-filter.active {
148
-
background: var(--button-bg);
149
-
color: var(--button-text);
150
-
}
151
-
152
-
.quality-select {
153
-
padding: 8px 16px;
154
-
border: 1px solid var(--card-border);
155
-
border-radius: 8px;
156
-
font-size: 0.9rem;
157
-
background-color: var(--navbar-bg);
158
-
color: var(--text);
143
+
.filter-select:focus {
144
+
border-color: var(--button-bg);
145
+
outline: none;
159
146
}
160
147
161
148
.featured-section,
···
170
157
color: var(--button-bg);
171
158
border-bottom: 2px solid var(--card-border);
172
159
padding-bottom: 8px;
160
+
}
161
+
162
+
/* New category section styling */
163
+
.category-section {
164
+
margin-bottom: 30px;
165
+
}
166
+
167
+
.category-header {
168
+
font-size: 1.2rem;
169
+
color: var(--button-bg);
170
+
margin: 24px 0 16px;
171
+
padding-bottom: 6px;
172
+
border-bottom: 1px solid var(--card-border);
173
173
}
174
174
175
175
/* Featured section description */
···
250
250
color: var(--text);
251
251
}
252
252
253
+
/* Enhanced quality stars */
253
254
.resource-quality {
254
255
display: flex;
255
256
}
256
257
257
258
.quality-star {
258
-
font-size: 0.9rem;
259
-
margin-left: 2px;
259
+
font-size: 1.1rem; /* Increased from 0.9rem */
260
+
margin-left: 3px; /* Increased from 2px */
261
+
font-weight: bold;
262
+
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
260
263
}
261
264
262
265
.quality-star.filled {
···
324
327
margin-top: 16px;
325
328
}
326
329
327
-
.filter-options {
330
+
.filter-dropdowns {
328
331
flex-direction: column;
329
-
align-items: flex-start;
330
-
}
331
-
332
-
.category-filters-container {
333
-
width: 100%;
334
-
}
335
-
336
-
.quality-filter {
337
-
width: 100%;
338
-
}
339
-
340
-
.quality-select {
341
-
width: 100%;
332
+
gap: 10px;
342
333
}
343
334
344
335
.resources-grid {
+85
-38
src/components/Resources/Resources.js
+85
-38
src/components/Resources/Resources.js
···
1622
1622
1623
1623
// Get all categories
1624
1624
const categories = ['All', ...new Set(resourcesWithUTM.map(item => item.category))];
1625
+
1626
+
// Count resources per category
1627
+
const categoryCounts = useMemo(() => {
1628
+
const counts = { 'All': resourcesWithUTM.length };
1629
+
resourcesWithUTM.forEach(resource => {
1630
+
counts[resource.category] = (counts[resource.category] || 0) + 1;
1631
+
});
1632
+
return counts;
1633
+
}, [resourcesWithUTM]);
1625
1634
1626
1635
// Filter resources based on active category, search query, and quality filter
1627
1636
const filteredResources = useMemo(() => {
···
1650
1659
const featuredResources = useMemo(() => {
1651
1660
return resourcesWithUTM.filter(resource => resource.featured);
1652
1661
}, [resourcesWithUTM]);
1662
+
1663
+
// Group resources by category when "All" is selected
1664
+
const resourcesByCategory = useMemo(() => {
1665
+
if (activeCategory !== 'All') return {};
1666
+
1667
+
const grouped = {};
1668
+
filteredResources.forEach(resource => {
1669
+
if (!grouped[resource.category]) {
1670
+
grouped[resource.category] = [];
1671
+
}
1672
+
grouped[resource.category].push(resource);
1673
+
});
1674
+
return grouped;
1675
+
}, [filteredResources, activeCategory]);
1653
1676
1654
1677
// Should show featured section only when All category is selected
1655
1678
const shouldShowFeatured = activeCategory === 'All';
···
1709
1732
</div>
1710
1733
1711
1734
<div className="filter-options">
1712
-
<div className="category-filters-container">
1713
-
<div className="category-filters">
1714
-
{categories.map(category => (
1715
-
<button
1716
-
key={category}
1717
-
className={`category-filter ${activeCategory === category ? 'active' : ''}`}
1718
-
onClick={() => setActiveCategory(category)}
1719
-
>
1720
-
{categoryEmojis[category]} {category}
1721
-
</button>
1722
-
))}
1735
+
<div className="filter-dropdowns">
1736
+
{/* Changed category filter to dropdown */}
1737
+
<div className="category-filter-dropdown">
1738
+
<select
1739
+
value={activeCategory}
1740
+
onChange={(e) => setActiveCategory(e.target.value)}
1741
+
className="filter-select"
1742
+
>
1743
+
{categories.map(category => (
1744
+
<option key={category} value={category}>
1745
+
{categoryEmojis[category]} {category} ({categoryCounts[category]})
1746
+
</option>
1747
+
))}
1748
+
</select>
1749
+
</div>
1750
+
1751
+
<div className="quality-filter">
1752
+
<select
1753
+
value={qualityFilter}
1754
+
onChange={(e) => setQualityFilter(e.target.value)}
1755
+
className="filter-select"
1756
+
>
1757
+
<option value="All">All Quality Levels</option>
1758
+
<option value="High">High Quality</option>
1759
+
<option value="Medium">Medium Quality</option>
1760
+
<option value="Low">Low Quality</option>
1761
+
</select>
1723
1762
</div>
1724
1763
</div>
1725
-
1726
-
<div className="quality-filter">
1727
-
<select
1728
-
value={qualityFilter}
1729
-
onChange={(e) => setQualityFilter(e.target.value)}
1730
-
className="quality-select"
1731
-
>
1732
-
<option value="All">All Quality Levels</option>
1733
-
<option value="High">High Quality</option>
1734
-
<option value="Medium">Medium Quality</option>
1735
-
<option value="Low">Low Quality</option>
1736
-
</select>
1737
-
</div>
1738
1764
</div>
1739
1765
</div>
1740
1766
···
1750
1776
</div>
1751
1777
)}
1752
1778
1753
-
<div className="all-resources-section">
1754
-
<h2>{activeCategory === 'All' ? 'All Resources' : `${categoryEmojis[activeCategory]} ${activeCategory} Resources`}</h2>
1755
-
{filteredResources.length > 0 ? (
1756
-
<div className="resources-grid">
1757
-
{filteredResources.map((resource, index) => (
1758
-
<ResourceCard key={index} resource={resource} />
1759
-
))}
1760
-
</div>
1761
-
) : (
1762
-
<div className="no-results">
1763
-
<p>No resources found matching your filters.</p>
1764
-
</div>
1765
-
)}
1766
-
</div>
1779
+
{activeCategory === 'All' ? (
1780
+
// When "All" is selected, show resources by category
1781
+
<div className="all-resources-section">
1782
+
<h2>All Resources ({filteredResources.length})</h2>
1783
+
1784
+
{Object.keys(resourcesByCategory).map(category => (
1785
+
<div key={category} className="category-section">
1786
+
<h3 className="category-header">
1787
+
{categoryEmojis[category]} {category} ({resourcesByCategory[category].length})
1788
+
</h3>
1789
+
<div className="resources-grid">
1790
+
{resourcesByCategory[category].map((resource, index) => (
1791
+
<ResourceCard key={`${category}-${index}`} resource={resource} />
1792
+
))}
1793
+
</div>
1794
+
</div>
1795
+
))}
1796
+
</div>
1797
+
) : (
1798
+
// When a specific category is selected
1799
+
<div className="all-resources-section">
1800
+
<h2>{categoryEmojis[activeCategory]} {activeCategory} Resources ({filteredResources.length})</h2>
1801
+
{filteredResources.length > 0 ? (
1802
+
<div className="resources-grid">
1803
+
{filteredResources.map((resource, index) => (
1804
+
<ResourceCard key={index} resource={resource} />
1805
+
))}
1806
+
</div>
1807
+
) : (
1808
+
<div className="no-results">
1809
+
<p>No resources found matching your filters.</p>
1810
+
</div>
1811
+
)}
1812
+
</div>
1813
+
)}
1767
1814
</>
1768
1815
)}
1769
1816
</div>