Commit 7a246877 authored by Michał Woźniak's avatar Michał Woźniak
Browse files

more UI work on the menu; reset buttons work

parent 7f50f6dc
......@@ -1592,9 +1592,26 @@ document.addEventListener('DOMContentLoaded', (e)=>{
/*document.getElementById('site-menu-button-rate').addEventListener('click', (e)=>{
document.getElementById('menu-shown').checked = false;
})*/
document.getElementById('site-menu-button-reset').addEventListener('click', (e)=>{
document.getElementById('site-menu-button-reset-sites').addEventListener('click', (e)=>{
window.location.hash = ''
document.getElementById('menu-shown').checked = false;
})
document.getElementById('site-menu-button-reset-settings').addEventListener('click', (e)=>{
// set the radio button groups to their defaults
document
.querySelectorAll('.chart-config-container input[type=radio]')
.forEach((r)=>{
if (r.defaultChecked) {
r.checked = true
}
})
// and all other inputs to their default values
document
.querySelectorAll('.chart-config-container input:not([type=radio])')
.forEach((r)=>{
r.value = r.defaultValue
})
// update the chart
updateChartSettings()
})
// fill out the covid data box
......
......@@ -208,17 +208,24 @@
margin-bottom: -15em;
padding:1em;
color:springgreen;
flex-direction:column;
flex-direction:row;
flex-wrap: wrap;
}
#site-menu-control-container .site-menu-container .spacer {
flex-grow:1;
#site-menu-control-container .site-menu-container * {
width:100%;
margin:0.2em;
}
#site-menu-control-container .site-menu-container .small {
width: 45%;
flex-grow: 1;
flex-shrink: 1;
}
#site-menu-control-container .site-menu-container p {
text-align:left;
font-size:90%;
}
#site-menu-control-container .site-menu-container p:first-child {
margin-top:0px;
#site-menu-control-container .site-menu-container p:not(:first-child) {
margin-top:1em;
}
#site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ .site-menu-container {
display: flex;
......@@ -230,7 +237,6 @@
box-shadow: 0px 0px 2px #555;
border: none;
color: springgreen;
margin-top: 0.3em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
......@@ -380,8 +386,9 @@
<input type="button" id="site-menu-button-percentage" value="highest percentage of population infected"/>
<input type="button" id="site-menu-button-deaths" value="most deaths"/>
<input type="button" id="site-menu-button-active-drop" value="greatest drop of number of active cases"/>
<div class="spacer"></div>
<input type="button" id="site-menu-button-reset" value="Reset all"/>
<p>Reset:</p>
<input type="button" class="small" id="site-menu-button-reset-sites" value="selected sites"/>
<input type="button" class="small" id="site-menu-button-reset-settings" value="chart settings"/>
</div>
</div>
<div class="site-data-container">
......@@ -446,7 +453,7 @@
<div class="break"></div>
<div class="chart-config-group">
<p>Start</p>
<label for="chart-start-date">on: <input type="date" name="chart-start-date" value="2020-03-22" min="2020-03-22"/></label>
<label for="chart-start-date">on: <input type="date" name="chart-start-date" value="2020-01-22" min="2020-01-22"/></label>
<p>or from:</p>
<label for="chart-start-first">1st</label>
<label for="chart-start-tenth">10th</label>
......
Supports Markdown
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