fred.boniface/OwlBoard
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Add output table to board

Browse Source 
Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-18 11:02:29 +00:00
parent cbd71efb45
commit 04e66c3317
2 changed files with 66 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/board.html
View File

@ -34,6 +34,39 @@
</p>
</div>
<div id="output">
<table id="pub-table">
<tr>
<th class="name">Origin</th>
<th class="name">Dest.</th>
<th class="plat">Plat.</th>
<th class="time">Sch Arr.</th>
<th class="time">Act Arr.</th>
<th class="time">Sch Dep.</th>
<th class="time">Act Dep.</th>
</tr>
<!-- EXAMPLE DATA FOR STYLING REASONS -->
<tr>
<td class="name">Bristol Temple Meads</td>
<td class="name">Southampton Airport Parkway</td>
<td class="plat">1</td>
<td class="time">10:57</td>
<td class="time changed">10:59</td>
<td class="time">11:02</td>
<td class="time">On Time</td>
</tr>
<tr>
<td class="name">Bristol Parkway</td>
<td class="name">Dorchester South</td>
<td class="plat changed">13</td>
<td class="time">11:07</td>
<td class="time">11:22</td>
<td class="time">11:09</td>
<td class="time changed">11:23</td>
</tr>
</table>
</div>
<div id="error_notice" class="main-notice hidden-while-loading">
<h1 class="error">Oops</h1>
<p class="error">There was an error with your request</p>
@ -45,9 +78,6 @@
<p>There are no scheduled train services from this station</p>
</div>
<div id="output">
</div>
<div id="footer">
<picture>
<source srcset="./images/nre/nre-powered_200w.webp" type="image/webp">

33
static/styles/boards.css
View File

@ -66,4 +66,37 @@
#nrcc_notices p {
width: 95%;
margin: auto;
}
/* Content */
#output {
width: 100%;
}
table {
width: 100%;
font-size: 10.5px;
}
.name{
text-align: left;
}
.plat{
width: 50px;
text-align: center;
}
.time{
width: 75px;
text-align: center;
}
.changed{
animation: pulse 1.5s linear infinite;
}
/* Animations */
@keyframes pulse {
50% {
opacity: 0;
}
}