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 { body, html {
padding: 0; padding: 0;
margin: 0; margin: 0;
width: 100%;
height: 100%;
} }
body { body {
@ -8,13 +10,42 @@ body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} }
button, input { button, input, select {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 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 { .sensors {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; 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) { @media only screen and (max-width: 1200px) {
@ -29,6 +60,8 @@ button, input {
margin: 0.5rem; margin: 0.5rem;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
overflow: hidden; overflow: hidden;
min-height: 350px;
height: 350px;
} }
.sensor .header { .sensor .header {
@ -64,6 +97,7 @@ button, input {
margin-top: 5%; margin-top: 5%;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
border-radius: 0.5rem; border-radius: 0.5rem;
width: 20rem;
} }
.settings-modal .inner .body { .settings-modal .inner .body {
@ -83,8 +117,17 @@ form .input {
form .actions { form .actions {
text-align: right; text-align: right;
margin-top: 1rem;
} }
form .actions button {
padding: 0.5rem 1rem;
}
form .actions button.cancel {
background-color: transparent;
color: #000;
}
form.horizontal { form.horizontal {
flex-direction: row; flex-direction: row;
@ -102,13 +145,19 @@ form.horizontal .input label {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
.filters { .filters .inner {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
margin-bottom: 1rem;
background-color: #fff; 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 { .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="inner" onclick=${preventPropagation}>
<div class="body"> <div class="body">
<form onsubmit="${handleSave}"> <form onsubmit="${handleSave}">
<div class="input">
<label>Sensor</label>
<input value="${sensor.sensor}" disabled />
</div>
<div class="input"> <div class="input">
<label>Name</label> <label>Name</label>
<input name="name" value="${config.name}" /> <input name="name" value="${config.name}" />
@ -98,7 +102,7 @@ function renderConfig({ sensor, onSave, shown }) {
</div> </div>
<div class="actions"> <div class="actions">
<button onclick=${hideConfig} type="button">Cancel</button> <button class="cancel" onclick=${hideConfig} type="button">Cancel</button>
<button>Save</button> <button>Save</button>
</div> </div>
</form> </form>
@ -201,58 +205,61 @@ function renderFilters() {
render( render(
$filters, $filters,
html` html`
<div class="filter-form"> <div class="inner">
<form class="horizontal" onsubmit=${handleApply}> <div class="filter-form">
<div class="input"> <form class="horizontal" onsubmit=${handleApply}>
<label>Interval</label> <div class="input">
<select <label>Interval</label>
name="interval" <select
value="${lastIntervalSelected}" name="interval"
onchange=${handleIntervalChange} value="${lastIntervalSelected}"
> onchange=${handleIntervalChange}
<option value="hour">Hour</option> >
<option value="day">Day</option> <option value="hour">Hour</option>
<option value="week">Week</option> <option value="day">Day</option>
<option value="month">Month</option> <option value="week">Week</option>
<option value="custom">Custom</option> <option value="month">Month</option>
</select> <option value="custom">Custom</option>
</div> </select>
</div>
${isCustomSelected ${isCustomSelected
? html` ? html`
<div class="input date-time"> <div class="input date-time">
<label>From</label> <label>From</label>
<div> <div>
<input <input
type="date" type="date"
value="${customFrom[0]}" value="${customFrom[0]}"
name="fromDate" name="fromDate"
/> />
<input <input
type="time" type="time"
value="${customFrom[1]}" value="${customFrom[1]}"
name="fromTime" name="fromTime"
/> />
</div>
</div> </div>
</div> <div class="input date-time">
<div class="input date-time"> <label>To</label>
<label>To</label> <div>
<div> <input type="date" value="${customTo[0]}" name="toDate" />
<input type="date" value="${customTo[0]}" name="toDate" /> <input type="time" value="${customTo[1]}" name="toTime" />
<input type="time" value="${customTo[1]}" name="toTime" /> </div>
</div> </div>
</div> `
` : undefined}
: undefined}
<button>Apply</button> <button>Apply</button>
</form> </form>
</div> </div>
<div class="actions"> <div class="actions">
<!--TODO:--> <!--TODO:-->
<!--<label class="checkbox-label"><input type="checkbox"><span>auto-refresh</span></label>--> <!--<label class="checkbox-label"><input type="checkbox"><span>auto-refresh</span></label>-->
<button onclick=${refreshAll}>Refresh</button> <button onclick=${refreshAll}>Refresh</button>
</div>
</div> </div>
<div class="shadow"></div>
` `
); );
} }
@ -344,6 +351,7 @@ function createSensor(sensor) {
t: 20, t: 20,
pad: 5, pad: 5,
}, },
height: 300
}, },
{ {
responsive: true, responsive: true,