Skip to content

GitLab

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

still working onthe menu

parent 60bd7d6d
Hide whitespace changes
Inline Side-by-side
index.html
View file @ 2b430cf1
......@@ -64,8 +64,7 @@
font-family: "Play Bold";
align-self: end;
}
#covid-stats h2,
.site-data-container h2 {
#covid-stats h2 {
font-size: 140%;
font-family: "Play Regular";
font-weight: bold;
......@@ -152,9 +151,16 @@
font-size:70%;
}
.site-data-container h2 {
font-family: "Play Regular";
font-weight: normal;
margin-top:0.35em;
}
.site-data-container h2.for-select {
position:relative;
font-size:140%;
margin-top:0.85em;
}
.site-data-container h2::after {
.site-data-container h2.for-select::after {
position:absolute;
right:0.5em;
top:0.25em;
......@@ -167,6 +173,10 @@
display:none;
}
.sites-menu-container {
width:1px;
height:0px;
}
.sites-menu-container#site-menu-control-container {
width:0px;
}
.sites-menu-container > input {
......@@ -195,10 +205,10 @@
#add-site.visible {
display: inline-block;
}
.site-data-container:nth-of-type(8) + .sites-menu-container > #add-site {
.site-data-container:nth-of-type(9) + .sites-menu-container > #add-site {
display:none;
}
.site-data-container:nth-of-type(4) ~ .sites-menu-container > #remove-site {
.site-data-container:nth-of-type(5) ~ .sites-menu-container > #remove-site {
display:inline-block;
}
.sites-menu-container.left > label,
......@@ -214,60 +224,45 @@
color:black;
}
#site-menu-control-container .sites-menu {
display:none;
min-width: 18.95em;
height: 13em;
background:black;
position: relative;
z-index: 10;
left: 1em;
top: -6.7em;
font-size: 100%;
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 .sites-menu * {
#sites-data-container .site-data-container.sites-menu {
width:100%;
margin:0.2em;
}
#site-menu-control-container .sites-menu .small {
width: 45%;
flex-grow: 1;
flex-shrink: 1;
}
#site-menu-control-container .sites-menu p {
text-align:left;
font-size:90%;
max-height:0px;
transition: max-height 1s;
overflow:hidden;
flex-grow:1;
}
#site-menu-control-container .sites-menu p:not(:first-child) {
margin-top:1em;
#sites-data-container .site-data-container.sites-menu > #internal-sites-menu-container {
display:flex;
flex-direction:column;
padding:1em;
}
#site-menu-control-container input[type=checkbox][name=menu-shown]:checked ~ .sites-menu {
display: flex;
input[type=checkbox][name=menu-shown]:checked ~ #sites-data-container .site-data-container.sites-menu {
max-height:30em;
}
.sites-menu input {
#sites-data-container .site-data-container.sites-menu input {
padding: 0.5em;
border-radius: 0.2em;
background: #444;
box-shadow: 0px 0px 2px #555;
border: none;
color: springgreen;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
font-family: "Play Regular";
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%;
text-align: center;
padding-left:1em;
padding-right:1em;
background:#555;
box-shadow:0px 0px 2px #555;
font-variant: all-small-caps;
transition:background-color 0.5s, color 0.5s;
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-menu input:hover {
#sites-data-container .site-data-container.sites-menu.sites-menu input:hover {
background: springgreen;
color: black;
box-shadow: 0px 0px 2px springgreen;
......@@ -423,17 +418,21 @@
<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>
<a href="#clear-all" id="clear-all-sites">↻</a>
</div>
<div class="site-data-container sites-menu">
<p>Show 6 sites with:</p>
<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>
<div class="sites-menu-container left">
<a href="#clear-all" id="clear-all-sites">↻</a>
</div>
<div class="site-data-container">
<h2><select class="sites-select" tabindex="1">
<h2 class="for-select"><select class="sites-select" tabindex="1">
<option value="select one">(select an area)</option>
</select></h2>
<div class="site-data">
......
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