jcoakley/dev1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed UI issues with popoutpanel filters

Browse Source
This commit is contained in:
Josh 2025-03-13 14:20:53 +00:00
parent 868a57d5ac
commit 8fb1de0bc9
1 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/PopoutPanel.js
View File

@ -150,52 +150,59 @@ function PopoutPanel({
)} )}
</div> </div>
{/* Sorting & Filtering UI */}
{/* Sorting UI */} {/* Schools Offering Programs Section */}
<div className="filter-container"> <h3>Schools Offering Programs</h3>
<div className="filter-group">
<label htmlFor="sort-by">Sort by:</label> <div className="schools-offering-container">
{/* Header and Filters - Not part of grid */}
<div className="schools-header" style={{
display: 'flex',
alignItems: 'center',
marginBottom: '10px',
justifyContent: 'center',
alignItems: 'center', }}>
<div className="compact-filters" style={{ display: 'flex', gap: '15px', justifyContent: 'center', alignItems: 'center' }}>
<label>
Sort:
<select <select
id="sort-by"
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value)} onChange={(e) => setSortBy(e.target.value)}
style={{ marginLeft: '5px', padding: '2px', width: '100px' }}
> >
<option value="tuition">Tuition</option> <option value="tuition">Tuition</option>
<option value="distance">Distance</option> <option value="distance">Distance</option>
</select> </select>
</div> </label>
<div className="filter-group"> <label>
<label htmlFor="tuition-range">Max Tuition:</label> Tuition (max):
<input <input
type="range" type="number"
id="tuition-range"
min="0"
max="100000"
step="1000"
value={maxTuition} value={maxTuition}
step={1000}
min={0}
max={100000}
style={{ width: '90px', padding: '2px' }}
onChange={(e) => setMaxTuition(Number(e.target.value))} onChange={(e) => setMaxTuition(Number(e.target.value))}
/> />
<span>{`$0 - $${maxTuition.toLocaleString()}`}</span> </label>
</div>
<div className="filter-group"> <label>
<label htmlFor="distance-range">Max Distance (mi):</label> Distance (max mi):
<input <input
type="range" type="number"
id="distance-range"
min="0"
max="1000"
step="10"
value={maxDistance} value={maxDistance}
step={10}
min={10}
max={500}
style={{ width: '70px', padding: '2px' }}
onChange={(e) => setMaxDistance(Number(e.target.value))} onChange={(e) => setMaxDistance(Number(e.target.value))}
/> />
<span>{`${maxDistance} mi`}</span> </label>
</div> </div>
</div> </div>
{/* Schools Offering Programs Section */}
<h3>Schools Offering Programs</h3>
<div className="schools-offering"> <div className="schools-offering">
{filteredAndSortedSchools.length > 0 ? ( {filteredAndSortedSchools.length > 0 ? (
filteredAndSortedSchools.map((school, index) => ( filteredAndSortedSchools.map((school, index) => (
@ -213,6 +220,7 @@ function PopoutPanel({
) : ( ) : (
<p className="no-schools-message">No schools of higher education are available in your state for this career path.</p> <p className="no-schools-message">No schools of higher education are available in your state for this career path.</p>
)} )}
</div>
</div> </div>
{/* Loan Repayment Analysis */} {/* Loan Repayment Analysis */}