nils/gluon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gluon-status-page: set fixed layout and responsive view for data tables

Browse Source
This commit is contained in:
Jan Alexander 2020-04-07 11:45:00 +02:00 committed by David Bauer
parent 8aa30b7099
commit 016b323a17
5 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package/gluon-status-page/files/lib/gluon/status-page/view/status-page.html
View File

@ -152,7 +152,7 @@
</table>
</div>
</div>
<div class="frame">
<div class="frame frame-wide">
<h2><%:Neighbors%></h2>
<%
@ -167,12 +167,12 @@
<tr>
<th><%:Node%></th>
<% for i, v in ipairs(mesh.attrs or {}) do %>
<th<%= attr('data-key', v[1]) .. attr('data-suffix', v[3]) %>><%| v[2] %></th>
<th<%= attr('class', 'row-' .. v[1] ) .. attr('data-key', v[1]) .. attr('data-suffix', v[3]) %>><%| v[2] %></th>
<% end %>
<% if wireless then %>
<th>dBm</th>
<th><%:Distance%></th>
<th><%:Last seen%></th>
<th class="row-signal">dBm</th>
<th class="row-distance"><%:Distance%></th>
<th class="row-inactive"><%:Last seen%></th>
<% end %>
</tr>
</table>

2
package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.css
View File

@ -1 +1 @@
html,body,div,span,h1,h2,h3,dl,dt,dd,canvas,header,table,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{background:rgba(0,0,0,0.12);font-family:Roboto, Lucida Grande, sans, Arial;color:rgba(0,0,0,0.87);font-size:14px;line-height:1}a{color:rgba(220,0,103,0.87);text-decoration:none;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover{text-decoration:underline}h1{font-weight:bold}h2{font-size:16px;margin-bottom:16px;color:rgba(0,0,0,0.54)}h3{font-size:15px;margin-top:16px;margin-bottom:8px;color:rgba(0,0,0,0.54)}header{display:flex;padding:0 14px;background:#dc0067;color:rgba(255,255,255,0.98);position:absolute;top:0;width:100%;box-sizing:border-box;height:20vh;z-index:-1;box-shadow:0px 5px 6px rgba(0,0,0,0.16),0px 1.5px 3px rgba(0,0,0,0.23);white-space:nowrap}header h1{font-size:24px;margin:10px 0;padding:6px 0;text-overflow:ellipsis;overflow:hidden;flex:1}.container{display:flex;max-width:90vw;margin:64px auto 24px auto;background:#fdfdfd;box-shadow:0px 5px 20px rgba(0,0,0,0.19),0px 3px 6px rgba(0,0,0,0.23)}.container>.frame{flex:1;border-style:solid;border-color:rgba(0,0,0,0.12);box-sizing:border-box;padding:16px}.container>.frame+.frame{border-width:0 0 0 1px}dt,th{font-weight:bold;color:rgba(0,0,0,0.87)}dt{margin-bottom:4px}th,td{text-align:left;padding:4px 16px 4px 0}th:last-child,td:last-child{padding-right:0}dd,td{font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.54)}dd{margin-bottom:16px}table{border-collapse:collapse;border-spacing:0}table.datatable{width:100%}table.datatable th,table.datatable td{font-size:1em;white-space:nowrap}table.datatable th:last-child,table.datatable td:last-child{width:100%}table.datatable tr.inactive{opacity:0.33}table.datatable tr.highlight{background:rgba(255,180,0,0.25)}canvas.signalgraph{margin-top:8px;width:100%}@media only screen and (max-width: 1250px){.container{max-width:none;margin:56px 0 0}header{height:56px;z-index:1;position:fixed}}@media only screen and (max-width: 700px){.container{display:block}.container>.frame+.frame{border-width:1px 0 0 0}}
html,body,div,span,h1,h2,h3,dl,dt,dd,canvas,header,table,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{background:rgba(0,0,0,0.12);font-family:Roboto, Lucida Grande, sans, Arial;color:rgba(0,0,0,0.87);font-size:14px;line-height:1}a{color:rgba(220,0,103,0.87);text-decoration:none;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover{text-decoration:underline}h1{font-weight:bold}h2{font-size:16px;margin-bottom:16px;color:rgba(0,0,0,0.54)}h3{font-size:15px;margin-top:16px;margin-bottom:8px;color:rgba(0,0,0,0.54)}header{display:flex;padding:0 14px;background:#dc0067;color:rgba(255,255,255,0.98);position:absolute;top:0;width:100%;box-sizing:border-box;height:20vh;z-index:-1;box-shadow:0px 5px 6px rgba(0,0,0,0.16),0px 1.5px 3px rgba(0,0,0,0.23);white-space:nowrap}header h1{font-size:24px;margin:10px 0;padding:6px 0;text-overflow:ellipsis;overflow:hidden;flex:1}.container{display:flex;max-width:90vw;margin:64px auto 24px auto;background:#fdfdfd;box-shadow:0px 5px 20px rgba(0,0,0,0.19),0px 3px 6px rgba(0,0,0,0.23)}.container>.frame{flex:1;border-style:solid;border-color:rgba(0,0,0,0.12);box-sizing:border-box;padding:16px}.container>.frame+.frame{border-width:0 0 0 1px}.container>.frame-wide{flex:2}dt,th,td::before{font-weight:bold;color:rgba(0,0,0,0.87)}dt{margin-bottom:4px}th,td{text-align:left;padding:4px 16px 4px 0}th:last-child,td:last-child{padding-right:0}dd,td{font-weight:normal;font-size:0.9em;color:rgba(0,0,0,0.54)}dd{margin-bottom:16px}table{border-collapse:collapse;border-spacing:0}table.datatable{width:100%;table-layout:fixed}table.datatable th,table.datatable td{font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.datatable th.row-tq{width:42px}table.datatable th.row-signal{width:36px}table.datatable th.row-distance{width:90px}table.datatable th.row-inactive{width:130px}table.datatable tr.inactive{opacity:0.33}table.datatable tr.highlight{background:rgba(255,180,0,0.25)}canvas.signalgraph{margin-top:8px;width:100%}@media only screen and (max-width: 1250px){.container{max-width:none;margin:56px 0 0}header{height:56px;z-index:1;position:fixed}.datatable tr{display:block;margin-bottom:15px}.datatable tr:first-child{margin-bottom:0}.datatable th{display:none}.datatable td{display:block;position:relative;padding-left:150px;max-width:calc(100% - 150px)}.datatable td::before{position:absolute;left:5px;content:attr(data-label)}}@media only screen and (max-width: 700px){.container{display:block}.container>.frame+.frame{border-width:1px 0 0 0}}

2
package/gluon-status-page/files/lib/gluon/status-page/www/static/status-page.js
View File

File diff suppressed because one or more lines are too long

16
package/gluon-status-page/javascript/status-page.js
View File

@ -433,6 +433,7 @@
var el = iface.table.insertRow();
var tdHostname = el.insertCell();
tdHostname.setAttribute('data-label', th.children[0].textContent);
if (iface.wireless) {
var marker = document.createElement("span");
@ -456,6 +457,7 @@
var td = el.insertCell();
td.textContent = '-';
td.setAttribute('data-label', attr.textContent);
meshAttrs[key] = {
'td': td,
@ -474,10 +476,24 @@
if (iface.wireless) {
tdSignal = el.insertCell();
tdSignal.textContent = '-';
tdSignal.setAttribute(
'data-label',
th.children[Object.keys(meshAttrs).length + 1].textContent
);
tdDistance = el.insertCell();
tdDistance.textContent = '-';
tdDistance.setAttribute(
'data-label',
th.children[Object.keys(meshAttrs).length + 2].textContent
);
tdInactive = el.insertCell();
tdInactive.textContent = '-';
tdInactive.setAttribute(
'data-label',
th.children[Object.keys(meshAttrs).length + 3].textContent
);
signal = Signal(color);
iface.signalgraph.addSignal(signal);

55
package/gluon-status-page/sass/status-page.scss
View File

@ -109,10 +109,14 @@ header {
& + .frame {
border-width: 0 0 0 1px;
}
&-wide {
flex: 2;
}
}
}
dt, th {
dt, th, td::before {
font-weight: bold;
color: rgba(0, 0, 0, 0.87);
}
@ -146,13 +150,30 @@ table {
&.datatable {
width: 100%;
table-layout: fixed;
th, td {
font-size: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:last-child {
width: 100%;
th {
&.row-tq {
width: 42px;
}
&.row-signal {
width: 36px;
}
&.row-distance {
width: 90px;
}
&.row-inactive {
width: 130px;
}
}
@ -182,6 +203,34 @@ canvas.signalgraph {
z-index: 1;
position: fixed;
}
.datatable {
tr {
display: block;
margin-bottom: 15px;
&:first-child {
margin-bottom: 0;
}
}
th {
display: none;
}
td {
display: block;
position: relative;
padding-left: 150px;
max-width: calc(100% - 150px);
&::before {
position: absolute;
left: 5px;
content: attr(data-label)
}
}
}
}
@media only screen and (max-width: 700px) {