sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-11-22 06:23:01 +00:00
Code Issues Releases Wiki Activity

[client] Theme tabs & buttons

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-01-26 17:06:30 +00:00
parent 38b393cd43
commit 2d2df3a1dc
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
3 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client_src/css/main.css
View file

@ -52,6 +52,7 @@ main {
z-index: 100 !important;
}
button { cursor: pointer; }
button.selected {
font-weight: bolder;
}

28
client_src/css/popup.css
View file

@ -15,12 +15,16 @@ h2.device-name { text-align: center; }
list-style-type: none;
margin: 0; padding: 0;
min-width: 40em;
display: flex;
flex-direction: row;
}
.tabs li {
flex: 1;
padding: 0 0.25em;
text-align: center;
font-size: 120%;
}
@ -31,8 +35,7 @@ h2.device-name { text-align: center; }
opacity: 0.5;
background: hsla(252, 82%, 66%, 0.53);
border-bottom: 0;
border-radius: 0.25em 0.25em 0 0;
border-radius: 0.25em;
color: hsl(252, 100%, 59%);
text-decoration: none;
@ -45,10 +48,14 @@ h2.device-name { text-align: center; }
.tab-content:target { display: block !important; }
.device-data {
display: flex;
flex-direction: row;
display: flex; justify-content: center;
min-height: 20em;
padding-top: 1em;
}
.device-params { margin: 0 auto; }
.device-property-table {
border-collapse: collapse;
}
@ -64,7 +71,18 @@ h2.device-name { text-align: center; }
}
.reading-types {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
list-style-type: none;
}
.reading-types button {
margin: 0.25em;
background: hsla(252, 82%, 66%, 0.53);
border-radius: 0.25em;
border: none;
color: hsl(252, 100%, 59%);
}

3
client_src/js/LayerDeviceMarkers.mjs
View file

@ -84,6 +84,9 @@ class LayerDeviceMarkers {
// ----------------------------------
// Select a tab by default
window.location = "#tab-data";
result.appendChild(CreateElement("ul.tabs"));
let tabs = result.querySelector(".tabs");
tabs.innerHTML = `<li><a href="#tab-info">Info</a></li>