OwlBoard/owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Fix public LDB Styling

Browse Source
This commit is contained in:
Fred Boniface 2023-07-01 22:06:01 +01:00
parent 62060e5475
commit 19f84501aa
2 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/lib/ldb/public-ldb.svelte
View File

@ -155,7 +155,7 @@
{#if dataAge} {#if dataAge}
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p> <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
{#if services.length} {#if services.length}
<table> <table class="ldbTable">
<tr> <tr>
<th class="from">From</th> <th class="from">From</th>
<th class="to">To</th> <th class="to">To</th>
@ -215,7 +215,7 @@
<br> <br>
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services"><br> <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services"><br>
<span class="table-head-text">Bus Services</span> <span class="table-head-text">Bus Services</span>
<table> <table class="ldbTable">
<tr> <tr>
<th class="from">From</th> <th class="from">From</th>
<th class="to">To</th> <th class="to">To</th>
@ -252,7 +252,7 @@
<br> <br>
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services"><br> <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services"><br>
<span class="table-head-text">Ferry Services</span> <span class="table-head-text">Ferry Services</span>
<table> <table class="ldbTable">
<tr> <tr>
<th class="from">From</th> <th class="from">From</th>
<th class="to">To</th> <th class="to">To</th>
@ -289,54 +289,56 @@
{#if serviceDetail} {#if serviceDetail}
<OverlayIsland> <OverlayIsland>
<h6>Service Detail</h6> <div id="detailBox">
<button type="button" id="closeService" on:click={closeService}>X</button> <h6>Service Detail</h6>
<table id="detailTable"> <button type="button" id="closeService" on:click={closeService}>X</button>
<tr> <table id="detailTable">
<th>Location</th> <tr>
<th>Sch</th> <th>Location</th>
<th>Exp</th> <th>Sch</th>
</tr> <th>Exp</th>
{#if serviceDetail?.previousCallingPoints?.callingPointList?.callingPoint} </tr>
{#if Array.isArray(serviceDetail?.previousCallingPoints?.callingPointList?.callingPoint)} {#if serviceDetail?.previousCallingPoints?.callingPointList?.callingPoint}
{#each serviceDetail.previousCallingPoints.callingPointList.callingPoint as prevPoint} {#if Array.isArray(serviceDetail?.previousCallingPoints?.callingPointList?.callingPoint)}
{#each serviceDetail.previousCallingPoints.callingPointList.callingPoint as prevPoint}
<tr>
<td>{prevPoint.locationName}</td>
<td>{prevPoint.st}</td>
<td class="time {parseTime(prevPoint.at || prevPoint.et).changed}">{parseTime(prevPoint.at || prevPoint.et).data}</td>
</tr>
{/each}
{:else}
<tr> <tr>
<td>{prevPoint.locationName}</td> <td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.locationName}</td>
<td>{prevPoint.st}</td> <td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.st}</td>
<td class="time {parseTime(prevPoint.at || prevPoint.et).changed}">{parseTime(prevPoint.at || prevPoint.et).data}</td> <td class="time {parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).changed}">{parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).data}</td>
</tr> </tr>
{/each} {/if}
{:else}
<tr>
<td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.locationName}</td>
<td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.st}</td>
<td class="time {parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).changed}">{parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).data}</td>
</tr>
{/if} {/if}
{/if} <tr class="thisStop">
<tr class="thisStop"> <td>{title}</td>
<td>{title}</td> <td>{serviceDetail.std || serviceDetail.sta}</td>
<td>{serviceDetail.std || serviceDetail.sta}</td> <td class="time {parseTime(serviceDetail.etd || serviceDetail.eta).changed}">{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td>
<td class="time {parseTime(serviceDetail.etd || serviceDetail.eta).changed}">{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td> </tr>
</tr> {#if serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint}
{#if serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint} {#if Array.isArray(serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint)}
{#if Array.isArray(serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint)} {#each serviceDetail.subsequentCallingPoints.callingPointList.callingPoint as nextPoint}
{#each serviceDetail.subsequentCallingPoints.callingPointList.callingPoint as nextPoint} <tr>
<tr> <td>{nextPoint.locationName}</td>
<td>{nextPoint.locationName}</td> <td>{nextPoint.st}</td>
<td>{nextPoint.st}</td> <td class="time {parseTime(nextPoint.et).changed}">{parseTime(nextPoint.et).data}</td>
<td class="time {parseTime(nextPoint.et).changed}">{parseTime(nextPoint.et).data}</td> </tr>
{/each}
{:else}
<tr class="detailRow">
<td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.locationName}</td>
<td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.st}</td>
<td class="time {parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).changed}">{parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).data}</td>
</tr> </tr>
{/each} {/if}
{:else}
<tr>
<td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.locationName}</td>
<td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.st}</td>
<td class="time {parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).changed}">{parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).data}</td>
</tr>
{/if} {/if}
{/if} </table>
</table> </div>
</OverlayIsland> </OverlayIsland>
{/if} {/if}
@ -346,10 +348,12 @@
text-align: left; text-align: left;
font-size: 14px; font-size: 14px;
} }
table { .ldbTable {
width: 100%; width: 100%;
max-width: 800px; min-width: 300px;
margin: auto; margin: auto;
padding-right: 2px;
padding-left: 0px;
color: white; color: white;
font-size: 13px; font-size: 13px;
} }
@ -368,7 +372,7 @@
font-size: 14px; font-size: 14px;
} }
@media (min-width: 800px) { @media (min-width: 800px) {
table {font-size: 15px;} table {font-size: 15px; max-width: 850px;}
.service-detail {font-size: 14px;} .service-detail {font-size: 14px;}
.transport-mode {width: 50px;} .transport-mode {width: 50px;}
#timestamp {font-size: 16px;} #timestamp {font-size: 16px;}
@ -418,6 +422,9 @@
color: var(--main-alert-color); color: var(--main-alert-color);
} }
} }
#detailBox {
width: 100%;
}
h6 { h6 {
position: absolute; position: absolute;
top: -25px; top: -25px;
@ -439,6 +446,8 @@ h6 {
} }
#detailTable { #detailTable {
margin-top: 40px; margin-top: 40px;
color: white;
font-size: 15px;
} }
.thisStop { .thisStop {
color: yellow; color: yellow;

5
src/routes/more/data/+page.svelte
View File

@ -35,8 +35,9 @@
<Header {title} /> <Header {title} />
<p>OwlBoard stored as little data about you as possible to offer the service.</p> <p>OwlBoard stores as little data about you as possible to offer the service.</p>
<p>Besides your randomly generated UUID which is used to authorise your staff access we store the following data:</p> <p>Your randomly generated UUID is not displayed, this is stored in your browser and on the OwlBoard server.</p>
<p>The data below is the entirity of the data we hold about you and constitutes a response to a `Subject Access Request` under GDPR legislation.</p>
<br><br> <br><br>
{#if isLoading} {#if isLoading}