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 d9058f6b32
commit ff17c6b690
1 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/PopoutPanel.js
View File

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