kamen
/
graphicek
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved page layout and button styling

This commit is contained in:
Jan Zípek 2022-08-15 09:07:38 +02:00
parent b516a45e24
commit 37efde7281
Signed by: kamen
GPG Key ID: A17882625B33AC31
2 changed files with 109 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
client/css/style.css
View File

@ -1,6 +1,8 @@
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
body {
@ -8,13 +10,42 @@ body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button, input {
button, input, select {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
background: #1160F0;
color: #fff;
cursor: pointer;
border: none;
padding: 0.25rem 0.4rem;
border-radius: 0.25rem;
}
button:hover {
background-color: #6B9CF5;
}
input, select {
padding: 0.15rem 0.4rem;
box-sizing: border-box;
}
#sensors-container {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}
.sensors {
display: grid;
grid-template-columns: 1fr 1fr;
overflow: auto;
min-height: 0;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
@media only screen and (max-width: 1200px) {
@ -29,6 +60,8 @@ button, input {
margin: 0.5rem;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
overflow: hidden;
min-height: 350px;
height: 350px;
}
.sensor .header {
@ -64,6 +97,7 @@ button, input {
margin-top: 5%;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
border-radius: 0.5rem;
width: 20rem;
}
.settings-modal .inner .body {
@ -83,8 +117,17 @@ form .input {
form .actions {
text-align: right;
margin-top: 1rem;
}
form .actions button {
padding: 0.5rem 1rem;
}
form .actions button.cancel {
background-color: transparent;
color: #000;
}
form.horizontal {
flex-direction: row;
@ -102,13 +145,19 @@ form.horizontal .input label {
margin-right: 0.25rem;
}
.filters {
.filters .inner {
display: flex;
align-items: center;
padding: 0.5rem 0.5rem;
margin-bottom: 1rem;
background-color: #fff;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
.filters .shadow {
position: absolute;
background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(190,190,190,1) 100%);
width: 100%;
height: 12px;
z-index: 1;
}
.filters .actions {

104
client/js/index.js
View File

@ -70,6 +70,10 @@ function renderConfig({ sensor, onSave, shown }) {
<div class="inner" onclick=${preventPropagation}>
<div class="body">
<form onsubmit="${handleSave}">
<div class="input">
<label>Sensor</label>
<input value="${sensor.sensor}" disabled />
</div>
<div class="input">
<label>Name</label>
<input name="name" value="${config.name}" />
@ -98,7 +102,7 @@ function renderConfig({ sensor, onSave, shown }) {
</div>
<div class="actions">
<button onclick=${hideConfig} type="button">Cancel</button>
<button class="cancel" onclick=${hideConfig} type="button">Cancel</button>
<button>Save</button>
</div>
</form>
@ -201,58 +205,61 @@ function renderFilters() {
render(
$filters,
html`
<div class="filter-form">
<form class="horizontal" onsubmit=${handleApply}>
<div class="input">
<label>Interval</label>
<select
name="interval"
value="${lastIntervalSelected}"
onchange=${handleIntervalChange}
>
<option value="hour">Hour</option>
<option value="day">Day</option>
<option value="week">Week</option>
<option value="month">Month</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="inner">
<div class="filter-form">
<form class="horizontal" onsubmit=${handleApply}>
<div class="input">
<label>Interval</label>
<select
name="interval"
value="${lastIntervalSelected}"
onchange=${handleIntervalChange}
>
<option value="hour">Hour</option>
<option value="day">Day</option>
<option value="week">Week</option>
<option value="month">Month</option>
<option value="custom">Custom</option>
</select>
</div>
${isCustomSelected
? html`
<div class="input date-time">
<label>From</label>
<div>
<input
type="date"
value="${customFrom[0]}"
name="fromDate"
/>
<input
type="time"
value="${customFrom[1]}"
name="fromTime"
/>
${isCustomSelected
? html`
<div class="input date-time">
<label>From</label>
<div>
<input
type="date"
value="${customFrom[0]}"
name="fromDate"
/>
<input
type="time"
value="${customFrom[1]}"
name="fromTime"
/>
</div>
</div>
</div>
<div class="input date-time">
<label>To</label>
<div>
<input type="date" value="${customTo[0]}" name="toDate" />
<input type="time" value="${customTo[1]}" name="toTime" />
<div class="input date-time">
<label>To</label>
<div>
<input type="date" value="${customTo[0]}" name="toDate" />
<input type="time" value="${customTo[1]}" name="toTime" />
</div>
</div>
</div>
`
: undefined}
`
: undefined}
<button>Apply</button>
</form>
</div>
<div class="actions">
<!--TODO:-->
<!--<label class="checkbox-label"><input type="checkbox"><span>auto-refresh</span></label>-->
<button onclick=${refreshAll}>Refresh</button>
<button>Apply</button>
</form>
</div>
<div class="actions">
<!--TODO:-->
<!--<label class="checkbox-label"><input type="checkbox"><span>auto-refresh</span></label>-->
<button onclick=${refreshAll}>Refresh</button>
</div>
</div>
<div class="shadow"></div>
`
);
}
@ -344,6 +351,7 @@ function createSensor(sensor) {
t: 20,
pad: 5,
},
height: 300
},
{
responsive: true,