Skip to content

GitLab

Commit 043145ad authored by Michał Woźniak's avatar Michał Woźniak
Browse files

cleanups; clear-all-sites button moved out of the menu

parent 7a246877
Hide whitespace changes
Inline Side-by-side
covid.js
View file @ 043145ad
......@@ -1555,6 +1555,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
// now we can add more sites
var addSite = document.getElementById('add-site')
var removeSite = document.getElementById('remove-site')
var clearAllSites = document.getElementById('clear-all-sites')
// draw the chart
chart()
......@@ -1592,9 +1593,6 @@ 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-sites').addEventListener('click', (e)=>{
window.location.hash = ''
})
document.getElementById('site-menu-button-reset-settings').addEventListener('click', (e)=>{
// set the radio button groups to their defaults
document
......@@ -1678,7 +1676,10 @@ document.addEventListener('DOMContentLoaded', (e)=>{
history.pushState({}, '', window.location.hash.replace(/,[^,]+$/, ''))
updateChartSettings()
})
clearAllSites.addEventListener('click', (e)=>{
window.location.hash = ''
})
// handling manual hash change
window.addEventListener("hashchange", (e)=>{
......
index.html
View file @ 043145ad
......@@ -158,12 +158,16 @@
display: block;
color: springgreen;
}
#site-menu-control-container,
#add-site-container {
.sites-menu-container {
width:0px;
}
#site-menu-control-container > *,
#add-site-container > a {
.sites-menu-container > input {
display:none;
}
.sites-menu-container > label,
.sites-menu-container > a,
.sites-menu-container .sites-menu {
font-size: 250%;
text-decoration: none;
border: dotted 1px springgreen;
......@@ -179,15 +183,18 @@
#add-site.visible {
display: inline-block;
}
.site-data-container:nth-of-type(7) + #add-site-container > #add-site {
.site-data-container:nth-of-type(7) + .sites-menu-container > #add-site {
display:none;
}
.site-data-container:nth-of-type(3) ~ #add-site-container > #remove-site {
.site-data-container:nth-of-type(3) ~ .sites-menu-container > #remove-site {
display:inline-block;
}
#site-menu-control-container #site-menu-control {
.sites-menu-container.left > label,
.sites-menu-container.left > a {
display: inline-block;
margin-left: -1em;
}
.sites-menu-container.left > label {
line-height: 78%;
}
#site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ #site-menu-control {
......@@ -195,7 +202,7 @@
color:black;
}
#site-menu-control-container .site-menu-container {
#site-menu-control-container .sites-menu {
display:none;
min-width: 18.95em;
height: 13em;
......@@ -203,34 +210,36 @@
position: relative;
z-index: 10;
left: 1em;
top: -3em;
top: -6.7em;
font-size: 100%;
margin-bottom: -15em;
margin-bottom: -15.55em;
padding:1em;
color:springgreen;
flex-direction:row;
flex-wrap: wrap;
border: dotted 1px springgreen;
line-height: 90%;
}
#site-menu-control-container .site-menu-container * {
#site-menu-control-container .sites-menu * {
width:100%;
margin:0.2em;
}
#site-menu-control-container .site-menu-container .small {
#site-menu-control-container .sites-menu .small {
width: 45%;
flex-grow: 1;
flex-shrink: 1;
}
#site-menu-control-container .site-menu-container p {
#site-menu-control-container .sites-menu p {
text-align:left;
font-size:90%;
}
#site-menu-control-container .site-menu-container p:not(:first-child) {
#site-menu-control-container .sites-menu p:not(:first-child) {
margin-top:1em;
}
#site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ .site-menu-container {
#site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ .sites-menu {
display: flex;
}
.site-menu-container input {
.sites-menu input {
padding: 0.5em;
border-radius: 0.2em;
background: #444;
......@@ -246,7 +255,7 @@
font-variant: all-small-caps;
transition:background-color 0.5s, color 0.5s;
}
.site-menu-container input:hover {
.sites-menu input:hover {
background: springgreen;
color: black;
box-shadow: 0px 0px 2px springgreen;
......@@ -377,17 +386,17 @@
</div>
<div class="sources"><a href="https://github.com/CSSEGISandData/COVID-19">source</a></div>
<div id="sites-data-container">
<div id="site-menu-control-container">
<div class="sites-menu-container left" id="site-menu-control-container">
<input type="checkbox" id="menu-shown" name="menu-shown"/>
<label id="site-menu-control" for="menu-shown">☰</label>
<div class="site-menu-container">
<a href="#clear-all" id="clear-all-sites">↻</a>
<div class="sites-menu">
<p>Show 6 sites with:</p>
<input type="button" id="site-menu-button-rate" value="largest growth rate"/>
<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"/>
<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>
......@@ -398,7 +407,7 @@
<div class="site-data">
</div>
</div>
<div id="add-site-container">
<div class="sites-menu-container right">
<a href="#add-site" id="add-site">+</a>
<a href="#remove-site" id="remove-site">-</a>
</div>
......
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