Note: The default ITS GitLab runner is a shared resource and is subject to slowdowns during heavy usage.
You can run your own GitLab runner that is dedicated just to your group if you need to avoid processing delays.

Commit ee7b8c59 authored by Joe Alberts's avatar Joe Alberts
Browse files

Add Calcite styling and attempt select2 use

Style dropdowns and toggle with Calcite.

Initial attempt to use select2 to text wrap select options, but there appears to be a jQuery conflict.
parent 57d479b3
......@@ -60,17 +60,30 @@ body {
background-color: rgba(255,255,255,0.8)
}
.esri-ui-top-right.esri-ui-corner {
max-width: 25vw;
}
#parameter-picker {
padding: 10px;
background-color: white;
opacity: 0.75;
opacity: 0.9;
}
.wrap-options.select2-selection--single {
height: 100%;
}
.select2-container .wrap-options.select2-selection--single .select2-selection__rendered {
word-wrap: break-word;
text-overflow: inherit;
white-space: normal;
}
#infoDiv {
padding: 10px;
width: 275px;
height: 40vh;
opacity: 0.75;
opacity: 0.9;
}
.esri-slider__max, .esri-slider__min {
......
......@@ -11,6 +11,9 @@
<script src="https://js.arcgis.com/4.16/"></script>
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> -->
<script src="sharedAir.js"></script>
</head>
......@@ -25,14 +28,17 @@
<span id="sign-out" class="action">Sign Out</span>
</div>
<div id="parameter-picker" class="esri-widget">
<label for="parameter-1-select">NWS Parameter:</label>
<select id="parameter-1-select"></select>
<label for="parameter-1-select" class="avenir-demi">NWS Parameter:</label>
<select id="parameter-1-select" class="select-full wrap-options"></select>
<br>
<label for="parameter-2-select">Yale Parameter:</label>
<select id="parameter-2-select"></select>
<label for="parameter-2-select" class="avenir-demi">Yale Parameter:</label>
<select id="parameter-2-select" class="select-full wrap-options"></select>
<br>
<label for="normalize-check">Normalize occurrences by area?</label>
<input type="checkbox" id="normalize-check" />
<label for="normalize-check" class="toggle-switch">
<input type="checkbox" id="normalize-check" class="toggle-switch-input" />
<span class="toggle-switch-track margin-right-1"></span>
<span class="toggle-switch-label font-size--1">Normalize occurrences by area?</span>
</label>
</div>
<div id="akViewDiv" class="esri-widget"></div>
<div id="hiViewDiv" class="esri-widget"></div>
......
......@@ -536,6 +536,11 @@ require([
console.log('Parameter selection lists set.')
}
// Define select2 target class
// var $select2 = $('.select2').select2({
// containerCssClass: "wrap-options"
// })
// add slider widget
// Disabled for now. If re-enabled, uncomment the require and function declarations at the top.
/*mainView.ui.add("infoDiv", {
......
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