Adjust spacing on StaffLDB Table

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

@@ -7,28 +7,17 @@
   export let services: TrainServices[];
   export let click: Function;
 
-  interface locationObject {
-    location: string;
-    via?: string;
-  }
-
   function detail(event: any, rid: string, uid: string, tid: string) {
     const target = event.target;
     click(rid, uid, tid);
   }
 
-  async function formatLocations(locations: ServiceLocation[]): Promise<locationObject> {
+  async function formatLocations(locations: ServiceLocation[]): Promise<string> {
     let tiplocs: string[] = [];
     for (const location of locations) {
       tiplocs.push(location.tiploc);
     }
-    let locationObj: locationObject = {
+    return tiplocs.join(' & ');
-      location: tiplocs.join(' & ')
-    };
-    if (locations[0]['via']) {
-      locationObj.via = locations[0]['via'];
-    }
-    return locationObj;
   }
 
   async function classGenerator(service: TrainServices) {
@@ -132,15 +121,11 @@
     >
       {#await classGenerator(service) then classes}
         <!-- HEADCODE -->
-        <td class="id {classes.other}">{service.trainid}</td>
+        <td class="id">{service.trainid}</td>
         <!-- ORIGIN -->
-        <td class="loc from {classes.other}"
+        <td class="loc from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td>
-          >{#await formatLocations(service.origin) then origin}{origin.location}{#if origin.via}<br /><span class="via">{origin.via}</span>{/if}{/await}</td
-        >
         <!-- DESTINATION -->
-        <td class="loc to {classes.other}"
+        <td class="loc to {classes.other}">{#await formatLocations(service.destination) then dest}<span class="locName">{dest}</span>{/await}</td>
-          >{#await formatLocations(service.destination) then dest}{dest.location}{#if dest.via}<br /><span class="via">{dest.via}</span>{/if}{/await}</td
-        >
         <!-- PLATFORM -->
         <td class="plat {classes.other} {classes.plat}">{service.platform || '-'}</td>
         <!-- SCHEDULED ARR -->
@@ -154,16 +139,22 @@
       {/await}
     </tr>
     <tr>
-      <td class="tableTxt" colspan="8">
+      <td colspan="1" />
+      <td class="tableTxt" colspan="7">
+        {#if service.destination?.[0]?.via}<span class="via">{service.destination[0].via}</span><br />{/if}
         {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
         {#if service.length} | {service.length} carriages{/if}
         {#if service.delayReason}
           <br />
+          <span class="delayTxt">
             <Reason type={'delay'} code={service.delayReason} />
+          </span>
         {/if}
         {#if service.cancelReason}
           <br />
+          <span class="cancTxt">
             <Reason type={'cancel'} code={service.cancelReason} />
+          </span>
         {/if}
       </td>
     </tr>
@@ -187,9 +178,12 @@
 
   .dataRow {
     font-family: ubuntu, monospace;
-    vertical-align: bottom;
+    vertical-align: top;
     cursor: pointer;
     font-size: 16px;
+    line-height: 1;
+    padding: 0;
+    margin: 0;
   }
 
   /* Table Columns */
@@ -219,8 +213,7 @@
     color: yellow;
   }
 
-  td.to,
+  td.to {
-  th.to {
     text-align: right;
   }
   td.from,
@@ -229,7 +222,7 @@
   }
   td.time {
     font-size: 15px;
-    vertical-align: middle;
+    vertical-align: top;
   }
   .tableTxt {
     text-align: left;
@@ -237,11 +230,17 @@
     color: var(--second-text-color);
     vertical-align: top;
     font-size: 12px;
+    padding-bottom: 10px;
+  }
+  .delayTxt {
+    color: var(--main-warning-color);
+  }
+  .cancTxt {
+    color: var(--main-alert-color);
   }
   .via {
-    font-size: 10px;
+    color: yellow;
-    margin-bottom: 0px;
+    padding-left: 0px;
-    padding: 0px;
   }
   /* Handle small screens */
   .smallScreen {
@@ -300,7 +299,6 @@
 
   /* Conditional Classes */
   .loc.canc,
-  .id.canc,
   .canc {
     color: grey;
     text-decoration: line-through;