Skip to content
This repository has been archived by the owner on Mar 15, 2024. It is now read-only.

Commit

Permalink
#1921 Minimizes sliders
Browse files Browse the repository at this point in the history
  • Loading branch information
Jaenicke, Margaret (Contractor) Ellen committed Feb 23, 2024
1 parent 8ebd382 commit 93c8e64
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 26 deletions.
31 changes: 15 additions & 16 deletions src/Views/gagepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,9 +284,9 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
<!-- Plot Options put this whole line in a div and float left or right-->
<div class="age-quality-container">
<div >
<br>
<br style="line-height: 25px" />
<input type="checkbox" ng-if="vm.formattedDischargePeakDates.length > 0" id="logScaleDischarge" name="logScaleDischarge" ng-model="vm.logScaleDischarge" ng-change="vm.toggleLogLinearDischarge()" >
<label for="logScaleDischarge" ng-if="vm.formattedDischargePeakDates.length > 0"> Log Scale</label><br><br>
<label for="logScaleDischarge" ng-if="vm.formattedDischargePeakDates.length > 0"> Log Scale</label><br>
<input type="radio" ng-if="vm.error == false" id="ageData" name="toggleDischargeData" ng-model="vm.USGSMeasuredAgeQualityData" value="age" ng-change="vm.updateChart()" >
<label for="ageData" ng-if="vm.error == false"> Age</label>

Expand Down Expand Up @@ -327,23 +327,22 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
</div>
</div>
</div>

</div>

<!-- End Legend -->
<!-- Start Sliders -->
<div class="slider-container">
<div class="slider-wrapper">
<span class="slider-text">Plot USGS Measurements Between Months</span>
<rzslider class="rzSlider" rz-slider-model="vm.startMonth" rz-slider-high="vm.endMonth" rz-slider-options="vm.monthSliderOptions"></rzslider>
<span id="months2show" style="margin-bottom: 10px;"></span>
</div>
<div class="slider-wrapper">
<span class="slider-text">Plot USGS Measurements Between Years</span>
<rzslider class="rzSlider" rz-slider-model="vm.startYear" rz-slider-high="vm.endYear" rz-slider-options="vm.yearSliderOptions"></rzslider>
<span id="years2show" style="margin-bottom: 10px;"></span>
</div>
</div>
<!-- End Sliders -->
<div class="slider-container">
<div class="slider-wrapper">
<span class="slider-text">Plot USGS Measurements <br>Between Months</span>
<rzslider class="rzSlider" rz-slider-model="vm.startMonth" rz-slider-high="vm.endMonth" rz-slider-options="vm.monthSliderOptions"></rzslider>
<span id="months2show" style="margin-bottom: 10px;"></span>
</div>
<div class="slider-wrapper">
<span class="slider-text">Plot USGS Measurements <br>Between Years</span>
<rzslider class="rzSlider" rz-slider-model="vm.startYear" rz-slider-high="vm.endYear" rz-slider-options="vm.yearSliderOptions"></rzslider>
<span id="years2show" style="margin-bottom: 10px; margin-left: 20px;"></span>
</div>
</div>


<highchart id="chart3" config="vm.dischargeChartConfig"></highchart>
Expand Down
57 changes: 47 additions & 10 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1111,7 +1111,8 @@ div.leaflet-top > .elevation {
font-size: 13px;
font-weight: bold;
z-index: 100;
margin-left: 50px;
margin-left: 30px;
margin-right: 30px;
margin-top: 10px;
margin-bottom: 10px
}
Expand All @@ -1124,9 +1125,9 @@ div.leaflet-top > .elevation {
.age-quality-container {
display: flex;
/* justify-content: space-between; */
width: 80%;
width: 95%;
margin: auto;
padding: 0 20%;
padding: 0 0%;
}

.age-quality-wrapper {
Expand Down Expand Up @@ -1588,20 +1589,56 @@ Batch processor modal

.slider-container {
display: flex;
justify-content: space-between;
width: 90%;
padding: 0 20%;
width: 50%;
padding: 0 0%;
margin-bottom: 10px;
}

.slider-wrapper {
display: flex;
flex-direction: column;
align-items: center;
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
width: 30%;
margin-right: 50px;
}
rzslider .rz-pointer {
top: -22px;
z-index: 3;
width: 20px;
height: 20px;
cursor: pointer;
background-color: #0db9f0;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 5;
}

rzslider .rz-bubble {
bottom: -15px;
padding: 1px 3px;
color: #55637d;
cursor: default;
}

rzslider .rz-pointer:after {
position: absolute;
top: 5px;
left: 5px;
width: 8px;
height: 8px;
background: #0db9f0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
content: '';
}

rzslider .rz-pointer:hover:after {
background-color: #0db9f0;
}

.slider-text {
font-size: 14px;
font-size: 13px;
white-space: nowrap;
}

Expand Down

0 comments on commit 93c8e64

Please sign in to comment.