From 8172e0289e65bb26edeae58030779207b41fc14e Mon Sep 17 00:00:00 2001
From: "Jaenicke, Margaret (Contractor) Ellen" <mjaenicke@contractor.usgs.gov>
Date: Thu, 22 Feb 2024 12:55:49 -0600
Subject: [PATCH 1/8] #1921 Moves legend off plot area

---
 src/Views/gagepage.html | 25 +++++++++++--------------
 src/config.js           |  2 +-
 src/css/main.css        |  9 +++++++--
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/Views/gagepage.html b/src/Views/gagepage.html
index f445f019..0e223961 100644
--- a/src/Views/gagepage.html
+++ b/src/Views/gagepage.html
@@ -280,32 +280,29 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                             &nbsp;<i class="fa fa-spinner fa-3x fa-spin loadingSpinner"></i>
                         </div>
                         <div class="well well-sm" style="background-color:#EBF0F5;" ng-if="vm.dischargeChartConfig">
-
-                            <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>
-
-                            <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>
-
                             <!-- 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"></span>
+                                    <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"></span>
+                                    <span id="years2show" style="margin-bottom: 10px;"></span>
                                 </div>
                             </div>
-                            
                             <!-- End Sliders -->
+                            <input type="checkbox" ng-if="vm.formattedDischargePeakDates.length > 0" id="logScaleDischarge" name="logScaleDischarge" ng-model="vm.logScaleDischarge" ng-change="vm.toggleLogLinearDischarge()" style="vertical-align: middle">
+                            <label for="logScaleDischarge" ng-if="vm.formattedDischargePeakDates.length > 0"> Log Scale</label>
 
+                            <input type="radio" ng-if="vm.error == false" id="ageData" name="toggleDischargeData" ng-model="vm.USGSMeasuredAgeQualityData" value="age" ng-change="vm.updateChart()" style="vertical-align: middle"> 
+                            <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')" style="vertical-align: middle"> 
+                            <label for="qualityData" ng-if="vm.error == false"> Quality</label>
+                            
                             <!-- Start Legend -->
                             <div ng-show="vm.USGSMeasuredAgeQualityData === 'age'" class="ageQualityLegend" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
                                 <div class="ageQualityLegend-item">
@@ -331,7 +328,7 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                             </div>
                             </div>
                             <!-- End Legend -->
-
+                            
                             <highchart id="chart3" config="vm.dischargeChartConfig"></highchart>
                             <div class="data-sources">
                                 Data: 
diff --git a/src/config.js b/src/config.js
index 755c6a84..f4040ed1 100644
--- a/src/config.js
+++ b/src/config.js
@@ -47,7 +47,7 @@ var StreamStats;
         'StreamStats.Services',
         'StreamStats.Controllers',
         'WiM.Services', 'WiM.Event', 'wim_angular', 'rzModule', 'nvd3', 'daterangepicker',
-        'angularjs-dropdown-multiselect', 
+        'angularjs-dropdown-multiselect',
         'ngSanitize',
         'highcharts-ng'
     ])
diff --git a/src/css/main.css b/src/css/main.css
index 32a1d83d..805fa264 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1100,7 +1100,8 @@ div.leaflet-top > .elevation {
 	    }
 
         .ageQualityLegend {
-            position: absolute;
+            position: flex;
+            display: inline-block;
             bottom: 220px;
             left: 680px;
             background-color: white;
@@ -1110,6 +1111,10 @@ div.leaflet-top > .elevation {
             font-size: 13px;
             font-weight: bold;
             z-index: 100;
+            width: 230px;
+            margin-left: 150px;
+            margin-top: 10px;
+            margin-bottom: 10px
           }
           
           .ageQualityLegend-item {
@@ -1571,7 +1576,7 @@ Batch processor modal
 .slider-container {
     display: flex;
     justify-content: space-between;
-    width: 100%;
+    width: 90%;
     padding: 0 20%;
 }
 

From 15566aad110854a7f196bc95fb47f37771b1aee6 Mon Sep 17 00:00:00 2001
From: "Jaenicke, Margaret (Contractor) Ellen" <mjaenicke@contractor.usgs.gov>
Date: Thu, 22 Feb 2024 19:06:30 -0600
Subject: [PATCH 2/8] #1912 Adds age and quality radio buttons to legend

---
 src/Views/gagepage.html | 45 +++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/Views/gagepage.html b/src/Views/gagepage.html
index 0e223961..6b00d027 100644
--- a/src/Views/gagepage.html
+++ b/src/Views/gagepage.html
@@ -280,31 +280,17 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                             &nbsp;<i class="fa fa-spinner fa-3x fa-spin loadingSpinner"></i>
                         </div>
                         <div class="well well-sm" style="background-color:#EBF0F5;" ng-if="vm.dischargeChartConfig">
-                            <!-- 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 -->
-                            <input type="checkbox" ng-if="vm.formattedDischargePeakDates.length > 0" id="logScaleDischarge" name="logScaleDischarge" ng-model="vm.logScaleDischarge" ng-change="vm.toggleLogLinearDischarge()" style="vertical-align: middle">
+                            <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>
 
-                            <input type="radio" ng-if="vm.error == false" id="ageData" name="toggleDischargeData" ng-model="vm.USGSMeasuredAgeQualityData" value="age" ng-change="vm.updateChart()" style="vertical-align: middle"> 
-                            <label for="ageData" ng-if="vm.error == false">  Age</label>
+                            <div class="ageQualityLegend">
+                            <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"  style="float: left; padding-right: 10px;" 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')" style="vertical-align: middle"> 
-                            <label for="qualityData" ng-if="vm.error == false"> Quality</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"  style="float: left" ng-if="vm.error == false"> Quality</label><br>
                             <!-- Start Legend -->
-                            <div ng-show="vm.USGSMeasuredAgeQualityData === 'age'" class="ageQualityLegend" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
+                            <div ng-show="vm.USGSMeasuredAgeQualityData === 'age'"  style="clear:left" 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>
@@ -316,7 +302,7 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                                 </div>
                             </div>
                             
-                            <div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'" class="ageQualityLegend" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
+                            <div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'"  style="clear:left" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
                                 <div class="ageQualityLegend-item">
                                     <span style="color:#2ED017;">Excellent - Good</span>
                             </div>
@@ -328,7 +314,22 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                             </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>
                             <highchart id="chart3" config="vm.dischargeChartConfig"></highchart>
                             <div class="data-sources">
                                 Data: 

From 8ebd382578038409dc722a37510e73f26c4298f0 Mon Sep 17 00:00:00 2001
From: "Jaenicke, Margaret (Contractor) Ellen" <mjaenicke@contractor.usgs.gov>
Date: Fri, 23 Feb 2024 11:34:38 -0600
Subject: [PATCH 3/8] #1921 Updates arrangement of inputs

---
 src/Views/gagepage.html | 60 ++++++++++++++++++++++++++---------------
 src/css/main.css        | 27 ++++++++++++++-----
 2 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/src/Views/gagepage.html b/src/Views/gagepage.html
index 6b00d027..3332b8ad 100644
--- a/src/Views/gagepage.html
+++ b/src/Views/gagepage.html
@@ -280,17 +280,30 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                             &nbsp;<i class="fa fa-spinner fa-3x fa-spin loadingSpinner"></i>
                         </div>
                         <div class="well well-sm" style="background-color:#EBF0F5;" ng-if="vm.dischargeChartConfig">
-                            <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>
 
-                            <div class="ageQualityLegend">
+                            <!-- Plot Options  put this whole line in a div and float left or right-->
+                            <div class="age-quality-container">
+                                <div >
+                                    <br>
+                            <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>
                             <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"  style="float: left; padding-right: 10px;" ng-if="vm.error == false">  Age</label>
+                            <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"  style="float: left" ng-if="vm.error == false"> Quality</label><br>
+                            <label for="qualityData" ng-if="vm.error == false"> Quality</label>
+                                </div>
+                            <!--End Plot Options -->
+
                             <!-- Start Legend -->
-                            <div ng-show="vm.USGSMeasuredAgeQualityData === 'age'"  style="clear:left" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
+                            <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>
@@ -302,7 +315,7 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                                 </div>
                             </div>
                             
-                            <div ng-show="vm.USGSMeasuredAgeQualityData === 'quality'"  style="clear:left" ng-style="{'left': vm.logScaleDischarge ? '222px' : '680px', 'bottom': vm.logScaleDischarge ? '200px' : '220px'}">
+                            <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>
@@ -313,23 +326,26 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                                 <span style="color: #FFA200;">Poor</span>
                             </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>
+
+                            <!-- 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 -->
+
+                            
                             <highchart id="chart3" config="vm.dischargeChartConfig"></highchart>
                             <div class="data-sources">
                                 Data: 
diff --git a/src/css/main.css b/src/css/main.css
index 805fa264..d77df9a0 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1101,7 +1101,7 @@ div.leaflet-top > .elevation {
 
         .ageQualityLegend {
             position: flex;
-            display: inline-block;
+            /* display: inline-block; */
             bottom: 220px;
             left: 680px;
             background-color: white;
@@ -1111,16 +1111,29 @@ div.leaflet-top > .elevation {
             font-size: 13px;
             font-weight: bold;
             z-index: 100;
-            width: 230px;
-            margin-left: 150px;
+            margin-left: 50px;
             margin-top: 10px;
             margin-bottom: 10px
-          }
-          
-          .ageQualityLegend-item {
+        }
+        
+        .ageQualityLegend-item {
             display: flex;
             align-items: center;
-          }
+        }
+
+        .age-quality-container {
+            display: flex;
+            /* justify-content: space-between; */
+            width: 80%;
+            margin: auto;
+            padding: 0 20%;
+        }
+
+        .age-quality-wrapper {
+            justify-content: left;
+            float: left
+
+        }
 
 
     /*

From 93c8e641322905a48d09952fb9aaa7008903f417 Mon Sep 17 00:00:00 2001
From: "Jaenicke, Margaret (Contractor) Ellen" <mjaenicke@contractor.usgs.gov>
Date: Fri, 23 Feb 2024 12:45:48 -0600
Subject: [PATCH 4/8] #1921 Minimizes sliders

---
 src/Views/gagepage.html | 31 +++++++++++-----------
 src/css/main.css        | 57 +++++++++++++++++++++++++++++++++--------
 2 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/src/Views/gagepage.html b/src/Views/gagepage.html
index 3332b8ad..acc28502 100644
--- a/src/Views/gagepage.html
+++ b/src/Views/gagepage.html
@@ -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>
                 
@@ -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>
diff --git a/src/css/main.css b/src/css/main.css
index d77df9a0..02e13618 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -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
         }
@@ -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 {
@@ -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;
 }
 

From b33f70f8f22c9e5b39c09b67c0a872cffd62949b Mon Sep 17 00:00:00 2001
From: "Jaenicke, Margaret (Contractor) Ellen" <mjaenicke@contractor.usgs.gov>
Date: Mon, 26 Feb 2024 09:21:36 -0600
Subject: [PATCH 5/8] #1921 Finalized styling for stage vs discharge inputs

---
 src/Views/gagepage.html | 105 ++++++++++++++++++++--------------------
 src/css/main.css        |  22 ++++++---
 2 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/src/Views/gagepage.html b/src/Views/gagepage.html
index acc28502..0dcdf670 100644
--- a/src/Views/gagepage.html
+++ b/src/Views/gagepage.html
@@ -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>
 
                             
diff --git a/src/css/main.css b/src/css/main.css
index 02e13618..a9f9105b 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -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
         }
@@ -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%;
         }
 
@@ -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 {
@@ -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;
@@ -1640,6 +1647,7 @@ rzslider .rz-pointer {
 .slider-text {
     font-size: 13px;
     white-space: nowrap;
+    color: #2D3146BF;
 }
 
 #months2show, #years2show {

From b0a1c459d978e5091c42b9f52271e9d3c7fc9c27 Mon Sep 17 00:00:00 2001
From: "Jaenicke, Margaret (Contractor) Ellen" <mjaenicke@contractor.usgs.gov>
Date: Mon, 26 Feb 2024 10:24:57 -0600
Subject: [PATCH 6/8] #1921 Updates rzslider CSS to be specifically for stage
 vs discharge

---
 src/Views/gagepage.html | 31 +++++++++++++++----------------
 src/css/main.css        | 34 ++++++++++++++++------------------
 2 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/Views/gagepage.html b/src/Views/gagepage.html
index 0dcdf670..2f882dab 100644
--- a/src/Views/gagepage.html
+++ b/src/Views/gagepage.html
@@ -280,22 +280,21 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                             &nbsp;<i class="fa fa-spinner fa-3x fa-spin loadingSpinner"></i>
                         </div>
                         <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-->
-
-
-                            <!-- End Legend -->
-                            <div class="slider-container">
-                                <div class="slider-wrapper">
+                            <div class="stagedischarge-inputs-container">
+                                <!-- Begin Sliders -->
+                                <div class="slider-wrapper" ng-if="vm.error == false">
                                     <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>
+                                    <rzslider class="gageplot-slider" 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">
+                                <div class="slider-wrapper" ng-if="vm.error == false">
                                     <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>
+                                    <rzslider class="gageplot-slider" 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>
+                                <!--End Sliders -->
+
+                                <!--Begin Plot Options (log checkbox, age and quality radios)-->
                                 <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()" >
@@ -305,12 +304,11 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                         
                                     <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>
-                                <div class="ageQualityLegend">
+                                <!--End Plot Options -->
+        
+                                <!-- Start Legend -->
+                                <div class="ageQualityLegend" ng-if="vm.error == false">
                                     <div ng-show="vm.USGSMeasuredAgeQualityData === 'age'">
                                         <span style="color: #2D3146BF; float: left;  padding-bottom: 15px; font-size: 15px;">Age:</span>
                                     </div>
@@ -341,7 +339,8 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                                 </div>
                                 </div>
                                 </div>
-                        </div>
+                                <!--End Legend -->
+                            </div>
 
                             
                             <highchart id="chart3" config="vm.dischargeChartConfig"></highchart>
diff --git a/src/css/main.css b/src/css/main.css
index a9f9105b..3cf7ded9 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1589,7 +1589,7 @@ Batch processor modal
     padding: 0 0 0 3px !important;
 }
 
-.slider-container {
+.stagedischarge-inputs-container {
     display: flex;
     width: 80%;
     padding: 0 0%;
@@ -1599,13 +1599,10 @@ Batch processor modal
 }
 
 .slider-wrapper {
-    /* display: flex; */
-    /* flex-direction: column; */
-    /* align-items: center; */
     width: 20%;
     margin-right: 50px;
 }
-rzslider .rz-pointer {
+.gageplot-slider .rz-pointer {
     top: -22px;
     z-index: 3;
     width: 20px;
@@ -1615,19 +1612,20 @@ rzslider .rz-pointer {
     -webkit-border-radius: 16px;
     -moz-border-radius: 16px;
     border-radius: 5;
-  }
-  rzslider .rz-pointer.rz-active:after {
+}
+
+.gageplot-slider .rz-pointer.rz-active:after {
     background-color: #0db9f0;
-  }
-  
-  rzslider .rz-bubble {
+}
+
+.gageplot-slider .rz-bubble {
     bottom: -15px;
     padding: 1px 3px;
     color: #55637d;
     cursor: default;
-  }
+}
 
-  rzslider .rz-pointer:after {
+.gageplot-slider .rz-pointer:after {
     position: absolute;
     top: 5px;
     left: 5px;
@@ -1635,14 +1633,14 @@ rzslider .rz-pointer {
     height: 8px;
     background: #0db9f0;
     -webkit-border-radius: 4px;
-       -moz-border-radius: 4px;
-            border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
     content: '';
-  }
-  
-  rzslider .rz-pointer:hover:after {
+}
+
+.gageplot-slider .rz-pointer:hover:after {
     background-color: #0db9f0;
-  }
+}
 
 .slider-text {
     font-size: 13px;

From 7e5eee8d20423fe62263c255e19361565c5379a0 Mon Sep 17 00:00:00 2001
From: "Jaenicke, Margaret (Contractor) Ellen" <mjaenicke@contractor.usgs.gov>
Date: Mon, 26 Feb 2024 10:25:59 -0600
Subject: [PATCH 7/8] #1921 Removes commented CSS

---
 src/css/main.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 3cf7ded9..5ec895c7 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1101,7 +1101,6 @@ div.leaflet-top > .elevation {
 
         .ageQualityLegend {
             position: flex;
-            /* display: inline-block; */
             bottom: 220px;
             left: 680px;
             background-color: white;
@@ -1123,8 +1122,6 @@ div.leaflet-top > .elevation {
         }
 
         .age-quality-container {
-            /* display: flex; */
-            /* justify-content: space-between; */
             width: 20%;
             margin-top: 10px;
             margin-right: 20px;

From 161dffda9acdd096d364e4fcbe0f1fce27f45c91 Mon Sep 17 00:00:00 2001
From: "Jaenicke, Margaret (Contractor) Ellen" <mjaenicke@contractor.usgs.gov>
Date: Mon, 26 Feb 2024 14:50:56 -0600
Subject: [PATCH 8/8] #1921 Adds ng-if to stage discharge input container

---
 src/Views/gagepage.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Views/gagepage.html b/src/Views/gagepage.html
index 2f882dab..d1a7ea97 100644
--- a/src/Views/gagepage.html
+++ b/src/Views/gagepage.html
@@ -280,7 +280,7 @@ <h4 class="modal-title">StreamStats Gage Page</h4>
                             &nbsp;<i class="fa fa-spinner fa-3x fa-spin loadingSpinner"></i>
                         </div>
                         <div class="well well-sm" style="background-color:#EBF0F5;" ng-if="vm.dischargeChartConfig">
-                            <div class="stagedischarge-inputs-container">
+                            <div class="stagedischarge-inputs-container" ng-if="vm.formattedDischargePeakDates.length > 0 || this.dischargeObj.length > 0 || this.measuredObj.length > 0">
                                 <!-- Begin Sliders -->
                                 <div class="slider-wrapper" ng-if="vm.error == false">
                                     <span class="slider-text">Plot USGS Measurements <br>Between Months</span>