+74 -18

src/components/Resources/Resources.css

Reviewed

··· 154 154 font-size: 1.1rem; 155 155 } 156 156 157 157 + /* ======= Filter Controls Container ======= */ 158 158 + .filter-controls-container { 159 159 + display: flex; 160 160 + justify-content: space-between; 161 161 + align-items: flex-start; 162 162 + margin-bottom: 20px; 163 163 + gap: 20px; 164 164 + } 165 165 + 166 166 + /* Filter bar */ 167 167 + .filter-bar { 168 168 + background-color: var(--navbar-bg); 169 169 + border: 2px solid var(--card-border); 170 170 + border-radius: 8px; 171 171 + padding: 15px; 172 172 + flex-grow: 1; 173 173 + } 174 174 + 175 175 + .filter-section { 176 176 + width: 100%; 177 177 + } 178 178 + 179 179 + /* Filters row - for horizontal alignment */ 180 180 + .filters-row { 181 181 + display: flex; 182 182 + align-items: center; 183 183 + gap: 20px; 184 184 + flex-wrap: wrap; 185 185 + } 186 186 + 187 187 + /* Filter dropdown */ 188 188 + .filter-dropdown { 189 189 + display: flex; 190 190 + align-items: center; 191 191 + gap: 8px; 192 192 + } 193 193 + 157 194 /* Enhanced disclaimer styling */ 158 195 .resources-disclaimer { 159 196 align-items: flex-start; ··· 163 200 padding: 14px 18px; 164 201 background-color: var(--background); 165 202 border: 2px solid var(--card-border); 203 203 + flex-basis: 40%; 166 204 } 167 205 168 206 .disclaimer-icon { ··· 196 234 font-weight: 600; 197 235 margin-right: 8px; 198 236 color: var(--text); 237 237 + white-space: nowrap; 199 238 } 200 239 201 240 .filter-options { ··· 290 329 background-color: rgba(var(--text-rgb), 0.2); 291 330 } 292 331 293 293 - /* Toggle filters container - New */ 332 332 + /* Toggle filters container - Modified for horizontal layout */ 294 333 .toggle-filters { 295 334 display: flex; 296 296 - flex-wrap: wrap; 297 297 - gap: 1.5rem; 298 298 - width: 100%; 299 299 - justify-content: center; 300 300 - margin-top: 1rem; 335 335 + align-items: center; 336 336 + gap: 20px; 301 337 } 302 338 303 339 /* New and Score toggle styling */ 304 304 - .new-filter, 305 305 - .score-filter { 340 340 + .toggle-filter { 306 341 display: flex; 307 342 align-items: center; 308 343 } ··· 320 355 cursor: pointer; 321 356 height: 20px; 322 357 margin: 0 8px 0 0; 323 323 - margin-right: 8px; 324 358 position: relative; 325 359 transition: background-color .3s; 326 360 width: 38px; 327 327 - scale: 1.4; 328 328 - margin-right: 20px; 329 361 } 330 362 331 363 .toggle-label input[type="checkbox"]:checked { ··· 338 370 width: 16px; 339 371 height: 16px; 340 372 border-radius: 5px; 341 341 - top: 1px; 373 373 + top: 2px; 342 374 left: 2px; 343 375 background-color: white; 344 376 transition: transform 0.3s; ··· 349 381 } 350 382 351 383 .toggle-label input[type="checkbox"]:checked::before { 352 352 - transform: translateX(14px); 384 384 + transform: translateX(18px); 353 385 } 354 386 355 387 .toggle-label input[type="checkbox"]:focus { ··· 361 393 font-size: .95rem; 362 394 font-weight: 600; 363 395 font-family: articulat-cf; 364 364 - margin-top: 3px; 396 396 + white-space: nowrap; 365 397 } 366 398 367 399 /* ======= Content Sections ======= */ ··· 383 415 } 384 416 385 417 /* Category section styling */ 386 386 - 387 418 .category-header { 388 419 font-size: 1.2rem; 389 420 margin: 45px 0 16px; ··· 633 664 } 634 665 635 666 /* Responsive adjustments */ 667 667 + @media (max-width: 920px) { 668 668 + .filter-controls-container { 669 669 + flex-direction: column; 670 670 + } 671 671 + 672 672 + .resources-disclaimer { 673 673 + width: 100%; 674 674 + } 675 675 + } 676 676 + 636 677 @media (max-width: 768px) { 637 678 .resources-page { 638 679 padding: 10px; ··· 658 699 max-width: none; 659 700 } 660 701 661 661 - .filter-dropdowns { 702 702 + .filters-row { 662 703 flex-direction: column; 663 663 - align-items: center; 664 664 - gap: 1rem; 704 704 + align-items: flex-start; 705 705 + gap: 15px; 706 706 + } 707 707 + 708 708 + .filter-dropdown { 709 709 + width: 100%; 665 710 } 666 711 667 712 .toggle-filters { 713 713 + width: 100%; 714 714 + justify-content: space-between; 715 715 + } 716 716 + 717 717 + .filter-dropdowns { 668 718 flex-direction: column; 669 719 align-items: center; 670 720 gap: 1rem; ··· 720 770 721 771 .resources-header h1 { 722 772 font-size: 1.3rem; 773 773 + } 774 774 + 775 775 + .toggle-filters { 776 776 + flex-direction: column; 777 777 + align-items: flex-start; 778 778 + gap: 10px; 723 779 } 724 780 }

+47 -44

src/components/Resources/Resources.js

Reviewed

··· 340 340 {/* Improved Filter Bar */} 341 341 <div className="filter-bar"> 342 342 <div className="filter-section"> 343 343 - {/* Category filter dropdown */} 344 344 - <div className="filter-dropdown"> 345 345 - <label htmlFor="category-select" className="filter-label">Category:</label> 346 346 - <select 347 347 - id="category-select" 348 348 - value={activeCategory} 349 349 - onChange={(e) => setActiveCategory(e.target.value)} 350 350 - className="filter-select" 351 351 - > 352 352 - {categories.map(category => ( 353 353 - <option key={category} value={category}> 354 354 - {categoryEmojis[category] || '🔹'} {category} ({categoryCounts[category] || 0}) 355 355 - </option> 356 356 - ))} 357 357 - </select> 358 358 - </div> 359 359 - 360 360 - {/* Toggle filters */} 361 361 - <div className="toggle-filters"> 362 362 - {/* New resources toggle */} 363 363 - <div className="toggle-filter"> 364 364 - <label className="toggle-label" htmlFor="new-toggle"> 365 365 - <input 366 366 - id="new-toggle" 367 367 - type="checkbox" 368 368 - checked={showNewOnly} 369 369 - onChange={() => setShowNewOnly(!showNewOnly)} 370 370 - aria-label="Show only recently added resources" 371 371 - /> 372 372 - <span className="toggle-text">Recently Added</span> 373 373 - </label> 343 343 + {/* All filters in one row */} 344 344 + <div className="filters-row"> 345 345 + {/* Category filter dropdown */} 346 346 + <div className="filter-dropdown"> 347 347 + <label htmlFor="category-select" className="filter-label">Category:</label> 348 348 + <select 349 349 + id="category-select" 350 350 + value={activeCategory} 351 351 + onChange={(e) => setActiveCategory(e.target.value)} 352 352 + className="filter-select" 353 353 + > 354 354 + {categories.map(category => ( 355 355 + <option key={category} value={category}> 356 356 + {categoryEmojis[category] || '🔹'} {category} ({categoryCounts[category] || 0}) 357 357 + </option> 358 358 + ))} 359 359 + </select> 374 360 </div> 375 375 - 376 376 - {/* Score impact toggle */} 377 377 - <div className="toggle-filter"> 378 378 - <label className="toggle-label" htmlFor="score-toggle"> 379 379 - <input 380 380 - id="score-toggle" 381 381 - type="checkbox" 382 382 - checked={showScoreImpactOnly} 383 383 - onChange={() => setShowScoreImpactOnly(!showScoreImpactOnly)} 384 384 - aria-label="Show only resources that impact score" 385 385 - /> 386 386 - <span className="toggle-text">Impacts Score</span> 387 387 - </label> 361 361 + 362 362 + {/* Toggle filters */} 363 363 + <div className="toggle-filters"> 364 364 + {/* New resources toggle */} 365 365 + <div className="toggle-filter"> 366 366 + <label className="toggle-label" htmlFor="new-toggle"> 367 367 + <input 368 368 + id="new-toggle" 369 369 + type="checkbox" 370 370 + checked={showNewOnly} 371 371 + onChange={() => setShowNewOnly(!showNewOnly)} 372 372 + aria-label="Show only recently added resources" 373 373 + /> 374 374 + <span className="toggle-text">Recently Added</span> 375 375 + </label> 376 376 + </div> 377 377 + 378 378 + {/* Score impact toggle */} 379 379 + <div className="toggle-filter"> 380 380 + <label className="toggle-label" htmlFor="score-toggle"> 381 381 + <input 382 382 + id="score-toggle" 383 383 + type="checkbox" 384 384 + checked={showScoreImpactOnly} 385 385 + onChange={() => setShowScoreImpactOnly(!showScoreImpactOnly)} 386 386 + aria-label="Show only resources that impact score" 387 387 + /> 388 388 + <span className="toggle-text">Impacts Score</span> 389 389 + </label> 390 390 + </div> 388 391 </div> 389 392 </div> 390 393 </div>