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; z-index: 100 !important;
} }
button { cursor: pointer; }
button.selected { button.selected {
font-weight: bolder; 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; list-style-type: none;
margin: 0; padding: 0; margin: 0; padding: 0;
min-width: 40em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.tabs li { .tabs li {
flex: 1; flex: 1;
padding: 0 0.25em;
text-align: center; text-align: center;
font-size: 120%; font-size: 120%;
} }
@ -31,8 +35,7 @@ h2.device-name { text-align: center; }
opacity: 0.5; opacity: 0.5;
background: hsla(252, 82%, 66%, 0.53); background: hsla(252, 82%, 66%, 0.53);
border-bottom: 0; border-radius: 0.25em;
border-radius: 0.25em 0.25em 0 0;
color: hsl(252, 100%, 59%); color: hsl(252, 100%, 59%);
text-decoration: none; text-decoration: none;
@ -45,10 +48,14 @@ h2.device-name { text-align: center; }
.tab-content:target { display: block !important; } .tab-content:target { display: block !important; }
.device-data { .device-data {
display: flex; display: flex; justify-content: center;
flex-direction: row;
min-height: 20em;
padding-top: 1em;
} }
.device-params { margin: 0 auto; }
.device-property-table { .device-property-table {
border-collapse: collapse; border-collapse: collapse;
} }
@ -64,7 +71,18 @@ h2.device-name { text-align: center; }
} }
.reading-types { .reading-types {
list-style-type: none;
padding: 0;
display: flex; display: flex;
flex-direction: row; 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")); result.appendChild(CreateElement("ul.tabs"));
let tabs = result.querySelector(".tabs"); let tabs = result.querySelector(".tabs");
tabs.innerHTML = `<li><a href="#tab-info">Info</a></li> tabs.innerHTML = `<li><a href="#tab-info">Info</a></li>