Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-13 10:38:34 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Size entities list to dialog and scroll when necessary

Browse source 
Also add a footer.
This commit is contained in:
David Rowe 2016-03-22 18:03:12 +13:00
parent 3d2cb6554e
commit 02a62766e0
2 changed files with 106 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
examples/html/edit-style.css
View file

@ -13,7 +13,7 @@
body {
margin: 0;
padding: 0;
padding: 24px 12px 24px 12px;
background-color: #404040;
color: #afafaf;
@ -161,14 +161,63 @@ input.no-spin::-webkit-inner-spin-button {
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
table#entity-table {
#entity-list {
position: relative; /* New positioning context. */
}
div#entity-table-scroll {
/* Height is set by JavaScript. */
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-top: 24px; /* Space for header and footer outside of scroll region. */
margin-top: 24px;
}
#entity-table-scroll, #entity-table {
background-color: #2d2d2d;
}
#entity-table {
border-collapse: collapse;
width: 100%;
margin-top: -24px;
margin-bottom: -24px;
table-layout: fixed;
font-family: Sans-Serif;
font-size: 9pt;
}
#col-type {
width: 15%;
}
#col-name {
width: 30%;
}
#col-url {
width: 54%;
}
#col-id {
width: 0;
}
#entity-table thead {
position: absolute;
top: 32px;
left: 0;
width: 100%;
}
#entity-table tfoot {
position: absolute;
bottom: -18px;
left: 0;
width: 100%;
}
#entity-table tr {
width: 100%;
cursor: pointer;
border-bottom: 0.75pt solid rgb(63, 63, 63)
}
@ -178,8 +227,11 @@ table#entity-table {
background-color: #AAA;
}
#entity-table th {
#entity-table th, #entity-table tfoot {
background-color: #333;
}
#entity-table th {
color: #fff;
border: 0pt black solid;
text-align: left;
@ -190,9 +242,10 @@ table#entity-table {
#entity-table td {
font-size: 9.0pt;
border: 0pt black solid;
word-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: nowrap;
}
#entity-table td.url {
@ -200,11 +253,6 @@ table#entity-table {
overflow: hidden;
}
th#entity-type {
width: 33.75pt;
}
div.input-area {
display: inline-block;

66
examples/html/entityList.html
View file

@ -240,7 +240,23 @@
setTimeout(refreshEntities, 1000);
}
});
}
function resize() {
// Set the table height to take up available window space
var tableHeight = window.innerHeight - 180;
document.getElementById("entity-table-scroll").style.height = tableHeight;
// Update the widths of the header cells to match the body
var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
var ths = document.querySelectorAll("#entity-table thead th");
for (var i = 0; i < ths.length; i++) {
ths[i].style.width = tds[i].offsetWidth;
}
};
window.onresize = resize;
resize();
}
</script>
</head>
<body onload='loaded();'>
@ -255,23 +271,37 @@
<input type="text" class="search" id="filter" placeholder="Filter" />
<span id="radius-and-unit"><input type="number" id="radius" value="100" />&nbsp;m</span>
</div>
<table id="entity-table">
<thead>
<tr>
<th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
<th id="entity-name" data-sort="type">Name <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
<th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
</tr>
</thead>
<tbody class="list" id="entity-table-body">
<tr>
<td class="id" style="display: none">Type</td>
<td class="type">Type</td>
<td class="name">Name</td>
<td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
</tr>
</tbody>
</table>
<div id="entity-table-scroll">
<table id="entity-table">
<colgroup>
<col span="1" id="col-type" />
<col span="1" id="col-name" />
<col span="1" id="col-url" />
<col span="1" id="col-id" />
</colgroup>
<thead>
<tr>
<th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
<th id="entity-name" data-sort="type">Name <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
<th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
<th style="display: none"></th>
</tr>
</thead>
<tbody class="list" id="entity-table-body">
<tr>
<td class="type">Type</td>
<td class="name">Name</td>
<td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
<td class="id" style="display: none">Type</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer text</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="no-entities">
No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.