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

Adapt StaffLDB Table to use Ubuntu-Mono and add media queries to improve readability on very small screens and on larger phones/tablets

Browse Source
This commit is contained in:
Fred Boniface
2023-07-12 16:56:04 +01:00
parent 9045834916
commit fcf8285c90
7 changed files with 141 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app.css
View File

@@ -26,6 +26,13 @@
font-style: normal;
}
@font-face {
font-family: 'ubuntu';
src: url('/font/ubuntumono/ubuntumono-regular.woff2') format('woff2'), url('/font/ubuntumono/ubuntumono-refular.woff') format('woff'), url('/font/ubuntumono/ubuntumono-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
/* COLOR VARS */
:root {
--main-bg-color: #404c55;

2
src/lib/ldb/staff/staff-ldb.svelte
View File

@@ -201,7 +201,7 @@
p.dataTime {
margin-top: 5px;
margin-bottom: 0px;
font-size: 14px;
font-size: 12px;
}
#noservices {
margin: 20px;

46
src/lib/ldb/staff/table/table-generator.svelte
View File

@@ -150,7 +150,7 @@
click(rid, uid, tid);
}
</script>
<p class="smallScreen">Your display is too small to view this data</p>
<table>
<tr>
<th class="id">ID</th>
@@ -179,20 +179,20 @@
<td class="id">{service.trainid}</td>
<td class="from {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.from}</td>
<td class="to {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.to}</td>
<td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.platform.number || '-'}</td>
<td class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schArr}</td>
<td class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled && 'canc'}"
<td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'} {serviceData.platformHidden && 'nonPass'}">{serviceData.platform.number || '-'}</td>
<td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schArr}</td>
<td class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled && 'canc'} {serviceData.isEarlyArr && 'early'}"
>{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
>
<td class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schDep}</td>
<td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schDep}</td>
<td
class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateDep && 'late'} {serviceData.isDepDelayed && 'late'}
{serviceData.isCancelled && 'canc'}">{serviceData.isDepDelayed ? 'LATE' : serviceData.expDep}</td
{serviceData.isCancelled && 'canc'} {serviceData.isEarlyDep && 'early'}">{serviceData.isDepDelayed ? 'LATE' : serviceData.expDep}</td
>
</tr>
<tr>
<td class="tableTxt" colspan="8">
{service.operator}
{service.operator} {#if service.isCharter}charter{/if}
{#if serviceData.length} | {serviceData.length} carriages{/if}
{#if service.delayReason}
<br />
@@ -227,10 +227,10 @@
}
.dataRow {
font-family: firamono, monospace;
font-family: ubuntu, monospace;
vertical-align: bottom;
cursor: pointer;
font-size: 13px;
font-size: 16px;
}
/* Table Columns */
@@ -267,6 +267,10 @@
td.from, th.from {
text-align: left;
}
td.time {
font-size: 15px;
vertical-align: middle;
}
.tableTxt {
text-align: left;
padding-left: 2px;
@@ -275,6 +279,30 @@
font-size: 12px;
}
/* Handle small screens */
.smallScreen {display: none; margin: 20px;}
@media screen and (max-width: 335px) {
th {font-size: 10px;}
.dataRow {font-size: 12px;}
td.time {font-size: 12px;}
.tableTxt{font-size:10px;}
}
@media screen and (max-width: 279px) {
table {display: none;}
.smallScreen {display: block;}
}
/* Handle Large Screens */
@media screen and (min-width: 375px) {
.dataRow{font-size: 18px;}
td.time{font-size:16px;}
}
@media screen and (min-width: 450px) {
.dataRow{font-size:20px;}
td.time{font-size:19px;}
.tableTxt{font-size:13px;}
}
/* Conditional Classes */
.cancTxt {
color: grey !important;