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

Commit

Permalink
#1921 Finalized styling for stage vs discharge inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
Jaenicke, Margaret (Contractor) Ellen committed Feb 26, 2024
1 parent 93c8e64 commit b33f70f
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 60 deletions.
105 changes: 52 additions & 53 deletions src/Views/gagepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,66 +282,65 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
<div class="well well-sm" style="background-color:#EBF0F5;" ng-if="vm.dischargeChartConfig">

<!-- Plot Options put this whole line in a div and float left or right-->
<div class="age-quality-container">
<div >


<!-- End Legend -->
<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; width: 70px"></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; width: 70px;"></span>
</div>
<div class="age-quality-container">
<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>
<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>

<input type="radio" ng-if="vm.error == false" id="qualityData" name="USGSMeasuredAgeQualityData" ng-model="vm.USGSMeasuredAgeQualityData" value="quality" ng-change="vm.toggleDischargeData('quality')" >
<label for="qualityData" ng-if="vm.error == false"> Quality</label>
<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>
<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>

<input type="radio" ng-if="vm.error == false" id="qualityData" name="USGSMeasuredAgeQualityData" ng-model="vm.USGSMeasuredAgeQualityData" value="quality" ng-change="vm.toggleDischargeData('quality')" >
<label for="qualityData" ng-if="vm.error == false"> Quality</label>
<!--End Plot Options -->

<!-- Start Legend -->

</div>
<!--End Plot Options -->

<!-- Start Legend -->
<div class="ageQualityLegend">
<div ng-show="vm.USGSMeasuredAgeQualityData === 'age'">
<span style="color: #2D3146BF; float: left; padding-bottom: 15px; font-size: 15px;">Age:</span>
<div class="ageQualityLegend">
<div ng-show="vm.USGSMeasuredAgeQualityData === 'age'">
<span style="color: #2D3146BF; float: left; padding-bottom: 15px; font-size: 15px;">Age:</span>
</div>
<div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'">
<span style="color: #2D3146BF; float: left; padding-bottom: 15px; font-size: 15px;">Quality:</span>
</div>
<div ng-show="vm.USGSMeasuredAgeQualityData === 'age'" style="clear:left; width: 230px;" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
<div class="ageQualityLegend-item">
<span style="color: red;">Most Recent Measurement</span>
</div>
<div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'">
<span style="color: #2D3146BF; float: left; padding-bottom: 15px; font-size: 15px;">Quality:</span>
<div class="ageQualityLegend-item">
<span style="color: orange;">Measurements in the Last Year</span>
</div>
<div ng-show="vm.USGSMeasuredAgeQualityData === 'age'" style="clear:left; width: 230px;" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
<div class="ageQualityLegend-item">
<span style="color: red;">Most Recent Measurement</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: orange;">Measurements in the Last Year</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: #0000cdcc;">Newer -&nbsp</span><span style="color: #0000cd4d;">Older Measurements</span>
<span style="color: #0000cdcc;">Newer -&nbsp</span><span style="color: #0000cd4d;">Older Measurements</span>
</div>
</div>

<div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'" style="clear:left; width: 130px;" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
<div class="ageQualityLegend-item">
<span style="color:#2ED017;">Excellent - Good</span>
</div>
</div>

<div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'" style="clear:left; width: 130px;" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
<div class="ageQualityLegend-item">
<span style="color:#2ED017;">Excellent - Good</span>
</div>
<div class="ageQualityLegend-item">
<span style="color:#E7F317;">Fair</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: #FFA200;">Poor</span>
</div>
</div>
</div>

</div>

<!-- End Legend -->
<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>
<span style="color:#E7F317;">Fair</span>
</div>
<div class="ageQualityLegend-item">
<span style="color: #FFA200;">Poor</span>
</div>
</div>
</div>
</div>


Expand Down
22 changes: 15 additions & 7 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1111,8 +1111,8 @@ div.leaflet-top > .elevation {
font-size: 13px;
font-weight: bold;
z-index: 100;
margin-left: 30px;
margin-right: 30px;
margin-left: -10px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px
}
Expand All @@ -1123,10 +1123,12 @@ div.leaflet-top > .elevation {
}

.age-quality-container {
display: flex;
/* display: flex; */
/* justify-content: space-between; */
width: 95%;
margin: auto;
width: 20%;
margin-top: 10px;
margin-right: 20px;
margin-left: -35px;
padding: 0 0%;
}

Expand Down Expand Up @@ -1589,16 +1591,18 @@ Batch processor modal

.slider-container {
display: flex;
width: 50%;
width: 80%;
padding: 0 0%;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 60px
}

.slider-wrapper {
/* display: flex; */
/* flex-direction: column; */
/* align-items: center; */
width: 30%;
width: 20%;
margin-right: 50px;
}
rzslider .rz-pointer {
Expand All @@ -1612,6 +1616,9 @@ rzslider .rz-pointer {
-moz-border-radius: 16px;
border-radius: 5;
}
rzslider .rz-pointer.rz-active:after {
background-color: #0db9f0;
}

rzslider .rz-bubble {
bottom: -15px;
Expand Down Expand Up @@ -1640,6 +1647,7 @@ rzslider .rz-pointer {
.slider-text {
font-size: 13px;
white-space: nowrap;
color: #2D3146BF;
}

#months2show, #years2show {
Expand Down

0 comments on commit b33f70f

Please sign in to comment.