Skip to content

GitLab

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

interface work around the menu is done; time to implement stuff

parent f6d122e3
Hide whitespace changes
Inline Side-by-side
index.html
View file @ aec620c6
......@@ -158,11 +158,11 @@
display: block;
color: springgreen;
}
#site-menu-container,
#site-menu-control-container,
#add-site-container {
width:0px;
}
#site-menu-container a,
#site-menu-control-container > *,
#add-site-container > a {
font-size: 250%;
text-decoration: none;
......@@ -185,11 +185,67 @@
.site-data-container:nth-of-type(3) ~ #add-site-container > #remove-site {
display:inline-block;
}
#site-menu-container a#site-menu {
#site-menu-control-container #site-menu-control {
display: inline-block;
margin-left: -1em;
line-height: 78%;
}
#site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ #site-menu-control {
background:springgreen;
color:black;
}
#site-menu-control-container .site-menu-container {
display:none;
min-width: 18.95em;
height: 13em;
background:black;
position: relative;
z-index: 10;
left: 1em;
top: -3em;
font-size: 100%;
margin-bottom: -15em;
padding:1em;
color:springgreen;
flex-direction:column;
}
#site-menu-control-container .site-menu-container .spacer {
flex-grow: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 input[type=checkbox][name=menu-shown]:checked ~ .site-menu-container {
display: flex;
}
.site-menu-container input {
padding: 0.5em;
border-radius: 0.2em;
background: #444;
box-shadow: 0px 0px 2px #555;
border: none;
color: springgreen;
margin-top: 0.3em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
font-family: "Play Regular";
font-size: 80%;
text-align: center;
font-variant: all-small-caps;
transition:background-color 0.5s, color 0.5s;
}
.site-menu-container input:hover {
background: springgreen;
color: black;
box-shadow: 0px 0px 2px springgreen;
}
#the-chart-container {
height:80vh;
min-height:600px;
......@@ -315,8 +371,18 @@
</div>
<div class="sources"><a href="https://github.com/CSSEGISandData/COVID-19">source</a></div>
<div id="sites-data-container">
<div id="site-menu-container">
<a href="#site-menu" id="site-menu">☰</a>
<div 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">
<p>Show 6 sites with:</p>
<input type="button" id="site-menu-button-highest-rate" value="largest growth rate"/>
<input type="button" id="site-menu-button-highest-percentage" value="highest percentage of population infected"/>
<input type="button" id="site-menu-button-most-deaths" value="most deaths"/>
<input type="button" id="site-menu-button-most-deaths" value="greatest drop of number of active cases"/>
<div class="spacer"></div>
<input type="button" id="site-menu-button-reset" value="Reset all"/>
</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