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

src/app.css

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

src/lib/ldb/staff/staff-ldb.svelte

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

src/lib/ldb/staff/table/table-generator.svelte

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

static/font/ubuntumono/LICENSE.txt

@@ -0,0 +1,96 @@
+-------------------------------
+UBUNTU FONT LICENCE Version 1.0
+-------------------------------
+
+PREAMBLE
+This licence allows the licensed fonts to be used, studied, modified and
+redistributed freely. The fonts, including any derivative works, can be
+bundled, embedded, and redistributed provided the terms of this licence
+are met. The fonts and derivatives, however, cannot be released under
+any other licence. The requirement for fonts to remain under this
+licence does not require any document created using the fonts or their
+derivatives to be published under this licence, as long as the primary
+purpose of the document is not to be a vehicle for the distribution of
+the fonts.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this licence and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Original Version" refers to the collection of Font Software components
+as received under this licence.
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to
+a new environment.
+
+"Copyright Holder(s)" refers to all individuals and companies who have a
+copyright ownership of the Font Software.
+
+"Substantially Changed" refers to Modified Versions which can be easily
+identified as dissimilar to the Font Software by users of the Font
+Software comparing the Original Version with the Modified Version.
+
+To "Propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification and with or without charging
+a redistribution fee), making available to the public, and in some
+countries other activities as well.
+
+PERMISSION & CONDITIONS
+This licence does not grant any rights under trademark law and all such
+rights are reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to propagate the Font Software, subject to
+the below conditions:
+
+1) Each copy of the Font Software must contain the above copyright
+notice and this licence. These can be included either as stand-alone
+text files, human-readable headers or in the appropriate machine-
+readable metadata fields within text or binary files as long as those
+fields can be easily viewed by the user.
+
+2) The font name complies with the following:
+(a) The Original Version must retain its name, unmodified.
+(b) Modified Versions which are Substantially Changed must be renamed to
+avoid use of the name of the Original Version or similar names entirely.
+(c) Modified Versions which are not Substantially Changed must be
+renamed to both (i) retain the name of the Original Version and (ii) add
+additional naming elements to distinguish the Modified Version from the
+Original Version. The name of such Modified Versions must be the name of
+the Original Version, with "derivative X" where X represents the name of
+the new work, appended to that name.
+
+3) The name(s) of the Copyright Holder(s) and any contributor to the
+Font Software shall not be used to promote, endorse or advertise any
+Modified Version, except (i) as required by this licence, (ii) to
+acknowledge the contribution(s) of the Copyright Holder(s) or (iii) with
+their explicit written permission.
+
+4) The Font Software, modified or unmodified, in part or in whole, must
+be distributed entirely under this licence, and must not be distributed
+under any other licence. The requirement for fonts to remain under this
+licence does not affect any document created using the Font Software,
+except any version of the Font Software extracted from a document
+created using the Font Software may only be distributed under this
+licence.
+
+TERMINATION
+This licence becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF
+COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.