Add transport-mode images

src/lib/ldb/public-ldb.svelte

@@ -146,9 +146,12 @@
       {/each}
     </table>
   {:else}
-    <p>No Scheduled Train Services</p>
+    <p class="table-head-text">No Scheduled Train Services</p>
   {/if}
   {#if busServices.length}
+    <br>
+    <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services"><br>
+    <span class="table-head-text">Bus Services</span>
     <table>
       <tr>
         <th class="from">From</th>
@@ -181,10 +184,11 @@
         </td></tr>
       {/each}
     </table>
-  {:else}
-    <p>No Scheduled Bus Services</p>
   {/if}
   {#if ferryServices.length}
+    <br>
+    <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services"><br>
+    <span class="table-head-text">Ferry Services</span>
     <table>
       <tr>
         <th class="from">From</th>
@@ -205,9 +209,6 @@
         </tr>
 
         <tr><td colspan="7">
-          <p class="service-detail">
-            A {service.operator || 'Unknown'} service
-          </p>
           {#if service.delayReason}
             <p class="service-detail">{service.delayReason}</p>
           {/if}
@@ -217,14 +218,13 @@
         </td></tr>
       {/each}
     </table>
-  {:else}
-    <p>No Scheduled Ferry Serices</p>
   {/if}
 {/if}
 <style>
   #timestamp {
     margin: auto;
     text-align: left;
+    font-size: 14px;
   }
   table {
     width: 100%;
@@ -239,13 +239,23 @@
     padding: 0;
     margin: 0;
   }
+  .transport-mode {
+    width: 30px;
+  }
+  .table-head-text {
+    color: white;
+    font-size: 14px;
+  }
 @media (min-width: 800px) {
     table {font-size: 15px;}
     .service-detail {font-size: 14px;}
+    .transport-mode {width: 50px;}
+    #timestamp {font-size: 16px;}
 }
 @media (min-width: 1000px) {
     table {font-size: 17px;}
     .service-detail{font-size: 16px;}
+    .table-head-text {font-size: 16px;}
 }
 @media (min-width: 1600px) {
     table {font-size: 19px;}