#1921 Moves legend off plot area

USGS-WiM · Feb 22, 2024 · 8172e02 · 8172e02
1 parent f6f9980
commit 8172e02
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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%;
 }