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

menu UI done (inshallah!); a few small UI fixes

parent 36904554
......@@ -48,6 +48,28 @@
color: yellow;
}
input[type=button] {
display:inline-block;
border:none;
border-radius:0.2em;
color:springgreen;
font-family: "Play Bold";
font-size: 100%;
padding:0.4em 1em 0.5em 1em;
background:#555;
box-shadow:0px 0px 2px #555;
font-variant: all-small-caps;
transition: box-shadow 0.5s, color 0.5s, background-color 0.5s;
}
input[type=button]:hover {
color:black;
background:springgreen;
box-shadow:0px 0px 2px springgreen;
}
input[type=button]:active {
box-shadow:inset 0px 0px 2px #444;
}
#covid-stats {
display: grid;
grid-auto-flow: column;
......@@ -85,14 +107,40 @@
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#menu-shown {
display:none;
}
#main-menu-container {
max-height:0px;
padding-top:1em;
overflow:hidden;
transition:max-height 1s;
font-size:80%;
}
#internal-main-menu-container {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#internal-main-menu-container h2 {
font-size: 100%;
font-variant: all-small-caps;
margin: 0.3em 0.2em;
padding: 0.5em 1em 0.5em 0.2em;
}
#internal-main-menu-container input[type=button] {
margin: 0.3em;
flex-grow: 1;
flex-shrink: 1;
padding-left:2em;
padding-right:2em;
}
input[type=checkbox][name=menu-shown]:checked ~ #main-menu-container {
max-height:30em;
max-height:10em;
}
input[type=checkbox][name=menu-shown]:checked ~ #covid-stats #main-menu-control {
background:#444;
......@@ -195,9 +243,6 @@
color: springgreen;
z-index: -10; /* needed to not obscure the select box from clicks */
}
input#menu-shown {
display:none;
}
.sites-menu-container {
width:1px;
height:0px;
......@@ -214,7 +259,7 @@
line-height: 90%;
outline:none;
text-align: Center;
margin-top: 0.47em;
margin-top: 0.49em;
color: springgreen;
display: none;
cursor: pointer;
......@@ -269,34 +314,12 @@
.chart-config-container label input[type=date] {
}
.chart-config-container label,
.chart-config-container input[type=button] {
.chart-config-container label {
padding: 0.5em;
border-radius:0.2em;
background:#404040;
box-shadow: inset 0px 0px 2px #333;
}
.chart-config-container input[type=button] {
display:inline-block;
border:none;
color:springgreen;
font-family: "Play Bold";
font-size: 100%;
padding-left:1em;
padding-right:1em;
background:#555;
box-shadow:0px 0px 2px #555;
font-variant: all-small-caps;
transition: box-shadow 0.5s, color 0.5s, background-color 0.5s;
}
.chart-config-container input[type=button]:hover {
color:black;
background:springgreen;
box-shadow:0px 0px 2px springgreen;
}
.chart-config-container input[type=button]:active {
box-shadow:inset 0px 0px 2px #444;
}
/*
* chart controls mechanics
*/
......@@ -384,9 +407,9 @@
<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>
<div class="main-menu-container">
<div id="main-menu-container">
<div id="internal-main-menu-container">
<h2>Show 6 sites with:</h2>
<h2>Load 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"/>
......
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