Commit 51ac09ee authored by Peter Knoop's avatar Peter Knoop
Browse files

Aligned html, css, and javascript to use view.ui for layout of more of the components of app.

parent 85084fcf
...@@ -29,20 +29,15 @@ body { ...@@ -29,20 +29,15 @@ body {
width: 100%; width: 100%;
} }
#title-view { #title-view {
position: absolute;
padding: 10px; padding: 10px;
left: 50%;
transform: translate(-50%, 0);
background-color: white; background-color: white;
opacity: 0.6; opacity: 0.75;
z-index: 2;
} }
#username { #username {
font-weight: bold; font-weight: bold;
} }
#mainViewDiv { #mainViewDiv {
position: relative; position: relative;
z-index: 1;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
height: 100%; height: 100%;
...@@ -66,29 +61,26 @@ body { ...@@ -66,29 +61,26 @@ body {
} }
#parameter-picker { #parameter-picker {
position: absolute;
padding: 10px; padding: 10px;
left: 100%;
transform: translate(-100%, 0);
background-color: white; background-color: white;
opacity: 0.6; opacity: 0.75;
z-index: 3;
} }
#infoDiv { #infoDiv {
padding: 10px; padding: 10px;
width: 275px; width: 275px;
height: 50vh; height: 40vh;
opacity: 0.75;
} }
.esri-slider__max, .esri-slider__min { .esri-slider__max, .esri-slider__min {
font-weight: 700; font-weight: 700;
} }
.esri-slider--vertical .esri-slider__max { .esri-slider--vertical .esri-slider__max {
margin-bottom: 1em !important; margin-bottom: 1em !important;
} }
.esri-slider--vertical .esri-slider__min{ .esri-slider--vertical .esri-slider__min{
margin-top: 1em !important; margin-top: 1em !important;
} }
...@@ -18,26 +18,27 @@ ...@@ -18,26 +18,27 @@
<span id="sign-in" class="action">Sign In</span> <span id="sign-in" class="action">Sign In</span>
</div> </div>
<div id="authenticated-view" class="esri-widget"> <div id="authenticated-view" class="esri-widget">
<div id="title-view"> <div id="mainViewDiv" class="esri-widget">
<span id="username"></span>&nbsp;&nbsp;-&nbsp; <div id="title-view" class="esri-widget">
<span id="sign-out" class="action">Sign Out</span> <span id="username"></span>&nbsp;&nbsp;-&nbsp;
</div> <span id="sign-out" class="action">Sign Out</span>
<div id="parameter-picker"> </div>
<label for="parameter-1">NWS Parameter:</label> <div id="parameter-picker" class="esri-widget">
<select id="parameter-1-select"></select> <label for="parameter-1">NWS Parameter:</label>
<br> <select id="parameter-1-select"></select>
<label for="parameter-2-">Yale Parameter:</label> <br>
<select id="parameter-2-select"></select> <label for="parameter-2-">Yale Parameter:</label>
</div> <select id="parameter-2-select"></select>
<div id="mainViewDiv"></div> </div>
<div id="akViewDiv" class="esri-widget"></div> <div id="akViewDiv" class="esri-widget"></div>
<div id="hiViewDiv" class="esri-widget"></div> <div id="hiViewDiv" class="esri-widget"></div>
<div id="infoDiv" class="esri-widget"> <div id="infoDiv" class="esri-widget">
<div id="infoDescription"> <div id="infoDescription">
Show where the % that believe the global warming is between: Show where the % that believe the global warming is between:
<span id="sliderHighValue">100</span>% and <span id="sliderLowValue">0</span>%. <span id="sliderHighValue">100</span>% and <span id="sliderLowValue">0</span>%.
</div>
<div id="sliderDiv" class"slider"></div>
</div> </div>
<div id="sliderDiv" class"slider"></div>
</div> </div>
</div> </div>
</body> </body>
......
...@@ -105,6 +105,9 @@ require([ ...@@ -105,6 +105,9 @@ require([
} }
}); });
// Add username and sign out link.
mainView.ui.add('title-view', 'top-right');
// Create a layer from Perry's alert and Yale's opinion data at the level of Congressional Districts (115th). // Create a layer from Perry's alert and Yale's opinion data at the level of Congressional Districts (115th).
const layer = new FeatureLayer({ const layer = new FeatureLayer({
//url: 'https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/Yale_Congressional_District_115_Level/FeatureServer/0', //url: 'https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/Yale_Congressional_District_115_Level/FeatureServer/0',
...@@ -121,6 +124,7 @@ require([ ...@@ -121,6 +124,7 @@ require([
// Populate selection lists for parameters. // Populate selection lists for parameters.
setParameterSelectionLists(); setParameterSelectionLists();
mainView.ui.add('parameter-picker', 'top-right');
// Set relationship (or bivariate) renderer for data. // Set relationship (or bivariate) renderer for data.
setRelationshipRenderer(); setRelationshipRenderer();
...@@ -437,28 +441,8 @@ require([ ...@@ -437,28 +441,8 @@ require([
console.log('Parameter selection lists set.') console.log('Parameter selection lists set.')
} }
// // add slider widget
// // Joe is adding a comment for some reason...
// const slider = new Slider({
// container: document.getElementById('sliderDiv'),
// min: 0,
// max: 100,
// values: [ 50 ],
// rangeLabelsVisible: true,
// precision: 0,
// layout: 'vertical'
// });
//
// mainView.ui.add(slider, {
// position: 'top-right',
// });
console.log('complete')
// add slider widget // add slider widget
mainView.ui.add("infoDiv", { mainView.ui.add("infoDiv", {
position: "top-right", position: "top-right",
}); });
...@@ -537,6 +521,8 @@ require([ ...@@ -537,6 +521,8 @@ require([
setHIFeatureLayerViewFilter(filterField + " >= " + sliderLowValue + " AND " + filterField + " <= " + sliderHighValue); setHIFeatureLayerViewFilter(filterField + " >= " + sliderLowValue + " AND " + filterField + " <= " + sliderHighValue);
}); });
console.log('complete')
}); });
} }
}); });
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment