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

a number of small UI fixes; work on the sites menu

parent 73873816
......@@ -113,7 +113,7 @@
flex-grow:1;
display: flex;
flex-direction: row;
align-items:flex-start;
align-items:stretch;
justify-content: center;
flex-wrap: wrap;
}
......@@ -144,6 +144,10 @@
font-size:inherit;
min-width:15em;
}
.site-data-container .sites-select:hover {
box-shadow: 0px 0px 5px springgreen;
border-style:solid;
}
.site-data-container .sites-select option {
font-size:70%;
}
......@@ -157,8 +161,11 @@
content: "▾";
display: block;
color: springgreen;
z-index: -10; /* needed to not obscure the select box from clicks */
}
input#menu-shown {
display:none;
}
.sites-menu-container {
width:0px;
}
......@@ -166,8 +173,7 @@
display:none;
}
.sites-menu-container > label,
.sites-menu-container > a,
.sites-menu-container .sites-menu {
.sites-menu-container > a {
font-size: 250%;
text-decoration: none;
border: dotted 1px springgreen;
......@@ -179,14 +185,20 @@
margin-top: 0.47em;
color: springgreen;
display: none;
cursor: pointer;
}
.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(7) + .sites-menu-container > #add-site {
.site-data-container:nth-of-type(8) + .sites-menu-container > #add-site {
display:none;
}
.site-data-container:nth-of-type(3) ~ .sites-menu-container > #remove-site {
.site-data-container:nth-of-type(4) ~ .sites-menu-container > #remove-site {
display:inline-block;
}
.sites-menu-container.left > label,
......@@ -197,7 +209,7 @@
.sites-menu-container.left > label {
line-height: 78%;
}
#site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ #site-menu-control {
input[type=checkbox][name=menu-shown]:checked ~ #sites-data-container .sites-menu-container #site-menu-control {
background:springgreen;
color:black;
}
......@@ -407,18 +419,18 @@
<div id="mortality"><span class="label">Mortality rate:</span> <span class="value"></span></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">
<!--input type="checkbox" id="menu-shown" name="menu-shown"/>
<label id="site-menu-control" for="menu-shown">☰</label-->
<label id="site-menu-control" for="menu-shown"></label>
<a href="#clear-all" id="clear-all-sites"></a>
<!--div class="sites-menu">
</div>
<div class="site-data-container 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"/>
</div-->
</div>
<div class="site-data-container">
<h2><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