Update train detail layout to improve icon placement

src/lib/Tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { onMount, onDestroy } from "svelte";
-    export let text: string
+  import { onMount, onDestroy } from 'svelte';
+  export let text: string;
 
   let isVisible: boolean = false;
   let timer: number;

src/lib/navigation/nav.svelte

@@ -21,9 +21,8 @@
 </script>
 
 <footer>
-  
   {#each links as item}
-    <a href={item.path} class:active={$page.url.pathname == item.path || $page.url.pathname == item.path + "/"}>
+    <a href={item.path} class:active={$page.url.pathname == item.path || $page.url.pathname == item.path + '/'}>
       <svelte:component this={item.icon} />
       <br />
       <span>{item.title}</span>

src/lib/overlays/welcome.svelte

@@ -27,7 +27,7 @@
     '<h3>Resgistration Update</h3>' +
       '<p>The registration issue has been fixed and registrations are now open.</p>' +
       '<p>Headcode and PIS Lookups will still be possible without registering but only for a limited time.</p>' +
-      '<p>You will receive further warning before mandatory registration is re-enabled.</p>',
+      '<p>You will receive further warning before mandatory registration is re-enabled.</p>'
   ];
 </script>
 

src/lib/train/train-detail.svelte

@@ -49,19 +49,13 @@
         <LoadingText />
       {:then serviceDetail}
         {#if serviceDetail.stpIndicator === 'C'}
-          <p class="text-message">
-            This has been removed from the timetable for today.
-          </p>
-          <p class="text-message">
-            The service may have been retimed, re-routed or removed from todays timetable completely.
-          </p>
-          <p class="text-message">
-            If it has been retimed or re-routed, there is likely to be another service with the same headcode booked to run.
-          </p>
+          <p class="text-message">This has been removed from the timetable for today.</p>
+          <p class="text-message">The service may have been retimed, re-routed or removed from todays timetable completely.</p>
+          <p class="text-message">If it has been retimed or re-routed, there is likely to be another service with the same headcode booked to run.</p>
         {:else}
           <div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
 
-          <TrainIcons serviceDetails={serviceDetail.serviceDetails} />
+          <TrainIcons serviceDetails={serviceDetail.serviceDetail} />
           {#if serviceDetail.pis}
             <PisHandler pisObject={serviceDetail.pis} />
           {/if}

src/lib/train/trainIcons.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-  import Tooltip from "$lib/Tooltip.svelte";
-  import type { ServiceDetail } from "@owlboard/ts-types";
-import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tabler/icons-svelte";
+  import Tooltip from '$lib/Tooltip.svelte';
+  import type { ServiceDetail } from '@owlboard/ts-types';
+  import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from '@tabler/icons-svelte';
 
-  
-
-    export let serviceDetails: ServiceDetail
+  export let serviceDetails: ServiceDetail;
 </script>
 
-
 {#if serviceDetails.firstClass}
   <Tooltip text="First Class is available">
     <IconSquare1 />
@@ -33,6 +30,10 @@ import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tab
   </Tooltip>
 {/if}
 
-<style>
+<!-- Render a newline if any of the icons is to appear -->
+{#if serviceDetails.firstClass || serviceDetails.catering || serviceDetails.sleeper || serviceDetails.vstp}
+  <br>
+{/if}
 
+<style>
 </style>

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

@@ -66,7 +66,8 @@
         <input id="checkbox" type="checkbox" required />
       </label><br />
       <button type="submit">Submit</button>
-  </form><br>
+    </form>
+    <br />
     <p class="bold">What do you get?</p>
     <li>Access to Train details</li>
     <li>Access to PIS Codes</li>
@@ -74,7 +75,6 @@
     <li>Non-Public trains on departure boards</li>
     <li>Hidden platform numbers on departure boards</li>
     <li>See up to the next 40 trains departing a station over the next two hours</li>
-
   {:else if state == 'sent'}
     <p>An email has been sent, enter the code in the email to activate your profile.</p>
     <p class="bold"><a href="/more/reg/submit">Ready to enter your code?</a></p>

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

@@ -17,7 +17,6 @@
     { id: '6', value: '' }
   ];
 
-
   function handleInput(index: number, event: KeyboardEvent): void {
     if (event.key === 'Backspace' && index > 0 && inputs[index].value === '') {
       const prevInput = document.getElementById(`input-${index}`);
@@ -39,13 +38,13 @@
     }
     console.log(`Code: ${submitString}`);
     const res = await submit(submitString);
-    console.log(`Registration Status: ${res}`)
+    console.log(`Registration Status: ${res}`);
     if (res == 201) {
-        status = "okay"
+      status = 'okay';
     } else if (res == 401) {
-        status = "fail"
+      status = 'fail';
     } else {
-        console.error("Unable to register: ", status)
+      console.error('Unable to register: ', status);
     }
     state = true;
   }
@@ -70,17 +69,16 @@
       return res.status;
     }
   }
-
 </script>
 
 <Header {title} />
 
 {#if state}
-  {#if status == "okay"}
+  {#if status == 'okay'}
     <p class="title-ish">You are now registered</p>
     <p>Your secret key will be stored in your browser.</p>
     <p>If you change browsers, change device or clear your browsing data, you may have to register again.</p>
-  {:else if status == "fail"}
+  {:else if status == 'fail'}
     <p class="title-ish">Your code was not accepted</p>
     <p>The code expires after 1 hour, you can check the code and enter it again or request a <a href="/more/reg">new code</a>.</p>
   {/if}

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

@@ -29,7 +29,7 @@
       <Tooltip text="Svelte"><IconBrandSvelte /></Tooltip>
       <Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
       <Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
-      <br>
+      <br />
       <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank"
         >Web-app version<br /><span class="data"
           >{version}{#if versionTag}-{versionTag}{/if}</span
@@ -40,25 +40,27 @@
       <Tooltip text="NodeJS"><IconBrandNodejs /></Tooltip>
       <Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
       <Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
-      <br>
+      <br />
       <a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a>
     </p>
     <p>
       <Tooltip text="Python"><IconBrandPython /></Tooltip>
-      <br>
+      <br />
       <a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a>
     </p>
     <p>
       <Tooltip text="Go"><IconBrandGolang /></Tooltip>
-      <br>
+      <br />
       <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
     </p>
   </Island>
 {:catch}
   <Island>
     <p>
-      <IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br>
-      Web-app Version<br /><span class="data">{version}{#if versionTag}-{versionTag}{/if}</span>
+      <IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br />
+      Web-app Version<br /><span class="data"
+        >{version}{#if versionTag}-{versionTag}{/if}</span
+      >
     </p>
     <p>Unable to fetch server application versions</p>
   </Island>