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

more work on the menu; bunch of UI fixes

parent 2b430cf1
......@@ -30,6 +30,14 @@ Some improvements have been suggested, no promises if and when they get implemen
- ~~normalize to population, show cases per million~~
- ~~make the new daily cases graph a rolling average with control over how many days/datapoints~~
- chart global cases
- ~~chart global cases~~
- chart cases requiring intensive medical care
- chart deaths
- chart tested
- ~~chart deaths~~
22 January 2020
WHO mission to China issued a statement saying that there was evidence of human-to-human transmission in Wuhan but more investigation was needed to understand the full extent of transmission.
https://bugs.webkit.org/show_bug.cgi?id=119175
......@@ -69,10 +69,35 @@
font-family: "Play Regular";
font-weight: bold;
text-transform: uppercase;
}
#covid-stats h2 {
color: #444;
opacity: 0.4;
margin:0px;
}
#covid-stats .item-container {
display: flex;
justify-content: center;
align-items: center;
}
#covid-stats #main-menu-control {
font-size: 200%;
height: 1em;
padding: 0em 0.3em 0.2em 0.3em;
line-height: 100%;
background:springgreen;
transition: box-shadow 0.5s, color 0.5s, background-color 0.5s;
/* border: dotted 1px #444; */
}
#covid-stats #main-menu-control:hover {
box-shadow: 0px 0px 2px #444;
/* border: solid 1px #444; */
}
input[type=checkbox][name=menu-shown]:checked ~ #main-menu-container {
max-height:30em;
}
input[type=checkbox][name=menu-shown]:checked ~ #covid-stats #main-menu-control {
background:#444;
color:springgreen;
box-shadow: inset 0px 0px 2px springgreen
}
.sources {
font-size: 80%;
......@@ -115,6 +140,7 @@
align-items:stretch;
justify-content: center;
flex-wrap: wrap;
min-height:8em;
}
#sites-data-container .site-data-container {
display: flex;
......@@ -142,10 +168,10 @@
font-family: inherit;
font-size:inherit;
min-width:15em;
transition: box-shadow 0.5s;
}
.site-data-container .sites-select:hover {
box-shadow: 0px 0px 5px springgreen;
border-style:solid;
}
.site-data-container .sites-select option {
font-size:70%;
......@@ -176,13 +202,9 @@
width:1px;
height:0px;
}
.sites-menu-container#site-menu-control-container {
width:0px;
}
.sites-menu-container > input {
display:none;
}
.sites-menu-container > label,
.sites-menu-container > a {
font-size: 250%;
text-decoration: none;
......@@ -196,78 +218,24 @@
color: springgreen;
display: none;
cursor: pointer;
transition: box-shadow 0.5s;
}
.sites-menu-container > label:hover,
.sites-menu-container > a:hover {
box-shadow: 0px 0px 5px springgreen;
border-style:solid;
}
#add-site.visible {
display: inline-block;
}
.site-data-container:nth-of-type(9) + .sites-menu-container > #add-site {
.site-data-container:nth-of-type(7) + .sites-menu-container > #add-site {
display:none;
}
.site-data-container:nth-of-type(5) ~ .sites-menu-container > #remove-site {
.site-data-container:nth-of-type(3) ~ .sites-menu-container > #remove-site {
display:inline-block;
}
.sites-menu-container.left > label,
.sites-menu-container.left > a {
display: inline-block;
margin-left: -1em;
}
.sites-menu-container.left > label {
line-height: 78%;
}
input[type=checkbox][name=menu-shown]:checked ~ #sites-data-container .sites-menu-container #site-menu-control {
background:springgreen;
color:black;
}
#sites-data-container .site-data-container.sites-menu {
width:100%;
max-height:0px;
transition: max-height 1s;
overflow:hidden;
flex-grow:1;
}
#sites-data-container .site-data-container.sites-menu > #internal-sites-menu-container {
display:flex;
flex-direction:column;
padding:1em;
}
input[type=checkbox][name=menu-shown]:checked ~ #sites-data-container .site-data-container.sites-menu {
max-height:30em;
}
#sites-data-container .site-data-container.sites-menu input {
padding: 0.5em;
border-radius:0.2em;
background:#404040;
box-shadow: inset 0px 0px 2px #333;
display:inline-block;
border:none;
color:springgreen;
font-family: "Play Bold";
font-size: 80%;
padding-left:1em;
padding-right:1em;
background:#555;
box-shadow:0px 0px 2px #555;
font-variant: all-small-caps;
transition: color 0.5s, background-color 0.5s;
margin-top:0.3em;
}
#sites-data-container .site-data-container.sites-menu input:hover {
color:black;
background:springgreen;
box-shadow:0px 0px 2px springgreen;
}
#sites-data-container .site-data-container.sites-menu.sites-menu input:hover {
background: springgreen;
color: black;
box-shadow: 0px 0px 2px springgreen;
}
#the-chart-container {
height:80vh;
min-height:600px;
......@@ -319,7 +287,7 @@
background:#555;
box-shadow:0px 0px 2px #555;
font-variant: all-small-caps;
transition: color 0.5s, background-color 0.5s;
transition: box-shadow 0.5s, color 0.5s, background-color 0.5s;
}
.chart-config-container input[type=button]:hover {
color:black;
......@@ -406,30 +374,28 @@
</head>
<body>
<h1>Scary COVID-19 data</h1>
<input type="checkbox" id="menu-shown" name="menu-shown"/>
<div id="covid-stats">
<h2>Global stats</h2>
<div id="confirmed"><span class="label">Confirmed cases:</span> <span class="value"></span></div>
<div id="deaths"><span class="label">Deaths:</span> <span class="value"></span></div>
<div id="recovered"><span class="label">Recovered:</span> <span class="value"></span></div>
<div id="mortality"><span class="label">Mortality rate:</span> <span class="value"></span></div>
<div class="item-container"><h2>Global stats</h2></div>
<div id="confirmed"><span class="label">Confirmed cases:</span> <span class="value">(loading...)</span></div>
<div id="deaths"><span class="label">Deaths:</span> <span class="value">(loading...)</span></div>
<div id="recovered"><span class="label">Recovered:</span> <span class="value">(loading...)</span></div>
<div id="mortality"><span class="label">Mortality rate:</span> <span class="value">(loading...)</span></div>
<div class="item-container"><label id="main-menu-control" for="menu-shown"></label></div>
</div>
<div class="sources"><a href="https://github.com/CSSEGISandData/COVID-19">source</a></div>
<input type="checkbox" id="menu-shown" name="menu-shown"/>
<div id="sites-data-container">
<div class="sites-menu-container left" id="site-menu-control-container">
<label id="site-menu-control" for="menu-shown"></label>
</div>
<div class="site-data-container sites-menu">
<div id="internal-sites-menu-container">
<h2>Show 6 sites with:</h2>
<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"/>
</div>
<div class="main-menu-container">
<div id="internal-main-menu-container">
<h2>Show 6 sites with:</h2>
<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"/>
</div>
</div>
<div id="sites-data-container">
<div class="sites-menu-container left">
<a href="#clear-all" id="clear-all-sites"></a>
<a href="#clear-all" id="clear-all-sites">×</a>
</div>
<div class="site-data-container">
<h2 class="for-select"><select class="sites-select" tabindex="1">
......
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