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

package/gluon-status-page/files/lib/gluon/status-page/view/status-page.html

@@ -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 class="row-signal">dBm</th>
-									<th><%:Distance%></th>
+									<th class="row-distance"><%:Distance%></th>
-									<th><%:Last seen%></th>
+									<th class="row-inactive"><%:Last seen%></th>
 								<% end %>
 							</tr>
 						</table>

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

@@ -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}}

package/gluon-status-page/javascript/status-page.js

@@ -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);

package/gluon-status-page/sass/status-page.scss

@@ -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 {
+		th {
-				width: 100%;
+			&.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) {