Margin fixes

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

@@ -138,7 +138,7 @@
     return processedMessages;
   }
 
-  function showDetail(rid='', uid='', tid='') {
+  function showDetail(rid = '', uid = '', tid = '') {
     detail = {
       rid: rid,
       uid: uid,
@@ -184,15 +184,14 @@
     <p id="noservices">There are no scheduled train services in the next two hours</p>
   {/if}
   {#if busServices && busServices.length}
-    
-    <img  class="transport-mode-image"src="/images/transport-modes/bus.svg" alt="">
-    <br>
+    <img class="transport-mode-image" src="/images/transport-modes/bus.svg" alt="" />
+    <br />
     <span class="transport-mode-text">Bus Services</span>
     <TableGenerator services={busServices} click={showDetail} />
   {/if}
   {#if ferryServices && ferryServices.length}
-  <img  class="transport-mode-image"src="/images/transport-modes/ferry.svg" alt="">
-    <br>
+    <img class="transport-mode-image" src="/images/transport-modes/ferry.svg" alt="" />
+    <br />
     <span class="transport-mode-text">Ferry Services</span>
     <TableGenerator services={ferryServices} click={showDetail} />
   {/if}

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

@@ -145,9 +145,9 @@
     };
   }
 
-  function detail(event,rid,uid,tid) {
+  function detail(event, rid, uid, tid) {
     const target = event.target;
-    click(rid,uid,tid)
+    click(rid, uid, tid);
   }
 </script>
 
@@ -172,7 +172,11 @@
       {#await generateServiceData(service)}
         <tr><td colspan="8">Loading Service Data...</td></tr>
       {:then serviceData}
-        <tr class="dataRow" on:click={(event) => detail(event, service.rid, service.uid, service.trainid)} on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}>
+        <tr
+          class="dataRow"
+          on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
+          on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
+        >
           <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>
@@ -196,7 +200,7 @@
               <Reason type={'delay'} code={service.delayReason} />
             {/if}
             {#if service.cancelReason}
-              <br>
+              <br />
               <Reason type={'cancel'} code={service.cancelReason} />
             {/if}
           </td>

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

@@ -198,9 +198,8 @@
     font-size: 14px;
   }
   #detailTable {
-    
     margin-top: 10px;
-    margin:auto;
+    margin: auto;
     color: white;
   }
   .tableLocation {

src/lib/train/train-detail.svelte

@@ -13,8 +13,8 @@
 <div class="container">
   <div class="container-header" on:click={expand} on:keypress={expand}>
     <span class="header"
-      >{service.operator || 'GW'}: {service.stops[0]['publicDeparture'] || service.stops[0]['wttDeparture']}
-      {service.stops[0]['tiploc']} to {service.stops[service['stops'].length - 1]['tiploc']}</span
+      >{service?.operator || ''}: {service?.stops[0]['publicDeparture'] || service?.stops[0]['wttDeparture']}
+      {service?.stops[0]['tiploc']} to {service?.stops[service['stops'].length - 1]['tiploc']}</span
     >
     <span id="container-arrow" class:isExpanded>V</span>
   </div>

src/routes/more/+page.svelte

@@ -6,14 +6,14 @@
   const links = [
     { title: 'Your Data', path: '/more/data' },
     { title: 'Registration', path: '/more/reg' },
+    { title: 'Settings', path: '/more/settings' },
+    { title: 'Report Issue', path: '/more/report' },
+    { title: 'About', path: '/more/about' },
     { title: 'Location Reference Code Lookup', path: '/more/corpus' },
     { title: 'Reason Code Lookup', path: '/more/reasons' },
     { title: 'Privacy Policy', path: '/more/privacy' },
     { title: 'Component Versions', path: '/more/versions' },
-    { title: 'Statictics', path: '/more/statistics' },
-    { title: 'Settings', path: '/more/settings' },
-    { title: 'Report Issue', path: '/more/report' },
-    { title: 'About', path: '/more/about' }
+    { title: 'Statistics', path: '/more/statistics' }
   ];
 </script>
 

src/routes/more/about/+page.svelte

@@ -20,6 +20,10 @@
 <Nav />
 
 <style>
+  p {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
   .neg {
     margin-top: -40px;
     margin-bottom: 40px;

src/routes/more/corpus/+page.svelte

@@ -100,6 +100,9 @@
 <Nav />
 
 <style>
+  p {
+    margin: 10px;
+  }
   input {
     font-family: urwgothic, sans-serif;
     border-radius: 50px;

src/routes/more/data/+page.svelte

@@ -52,6 +52,9 @@
 <Nav />
 
 <style>
+  p {
+    margin: 10px;
+  }
   .api_response {
     color: white;
   }

src/routes/more/reasons/+page.svelte

@@ -85,6 +85,7 @@
 
 <style>
   p {
+    margin: 10px;
     margin-top: 20px;
   }
   input {

src/routes/more/reg/+page.svelte

@@ -88,6 +88,9 @@
 <Nav />
 
 <style>
+  p {
+    margin: 10px;
+  }
   ul {
     text-align: left;
     color: white;

src/routes/more/reg/submit/+page.svelte

@@ -71,3 +71,9 @@
   <p>You are now logged in</p>
 {/if}
 <Nav />
+
+<style>
+  p {
+    margin: 14px;
+  }
+</style>

src/routes/more/report/+page.svelte

@@ -127,6 +127,10 @@
 <Nav />
 
 <style>
+  p {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
   select {
     text-align: center;
     border: none;

src/routes/more/statistics/+page.svelte

@@ -27,6 +27,7 @@
 {#await getData()}
   <Loading />
 {:then data}
+  <br />
   <p>API Server:<br /><span>{data?.hostname}</span></p>
   <p>Runtime Mode: <span>{data?.runtimeMode}</span></p>
   <p>Stats Reset: <span>{U2L(data?.reset) || 'Unknown'}</span></p>
@@ -70,6 +71,7 @@
     color: lightgray;
   }
   h2 {
+    font-family: urwgothic, sans-serif;
     margin-bottom: 2px;
     margin-top: 8px;
   }

src/routes/pis/+page.svelte

@@ -113,6 +113,10 @@
 <Nav />
 
 <style>
+  p {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
   .label {
     font-weight: 600;
     color: var(--main-text-color);

src/routes/train/+page.svelte

@@ -86,7 +86,9 @@
 {/if}
 
 {#each data as service}
+  {#if service}
     <TrainDetail {service} />
+  {/if}
 {/each}
 
 <Nav />