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

Some UI adjustments to school filters - needs more

Browse Source
This commit is contained in:
Josh 2025-03-11 18:06:31 +00:00
parent 75e967c9f2
commit 48219a464c
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/PopoutPanel.css
View File

@ -100,12 +100,71 @@
color: #666;
}
/* Filter controls syling*/
.filter-controls {
display: flex;
align-items: center;
gap: 20px;
}
.filter-controls input[type="radio"] {
margin-right: 5px; /* Make radio buttons closer to the label */
vertical-align: middle;
}
.filter-controls label {
font-size: 1rem;
font-weight: 600;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
/* Adjust radio button alignment */
.filter-controls label {
font-size: 1rem;
font-weight: 600;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
.filter-controls input[type="radio"] {
margin-right: 5px; /* Make radio buttons closer to the label */
vertical-align: middle;
}
/* Space between Tuition and Distance sliders */
.slider-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
gap: 30px; /* Add space between the sliders */
}
.slider-container input[type="range"] {
width: 45%; /* Allow equal width for both sliders */
margin: 0;
}
.range-labels {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
}
/* Style for the range slider to show min/max values */
.range-slider-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
/* Space between Tuition and Distance sliders */
.range-slider-wrapper input {
width: 48%; /* Make both sliders occupy 48% space to leave space between them */
}
/* Schools section: Grid layout with clear separation */
.schools-offering {
display: grid;