Update train detail layout to improve icon placement

src/lib/Tooltip.svelte

@@ -1,40 +1,40 @@
 <script lang="ts">
-    import { onMount, onDestroy } from "svelte";
+  import { onMount, onDestroy } from 'svelte';
-    export let text: string
+  export let text: string;
 
-    let isVisible: boolean = false;
+  let isVisible: boolean = false;
-    let timer: number;
+  let timer: number;
 
-    function showTooltip() {
+  function showTooltip() {
-        isVisible = true;
+    isVisible = true;
-        timer = setTimeout(() => {
+    timer = setTimeout(() => {
-            isVisible = false;
+      isVisible = false;
-        }, 2000);
+    }, 2000);
-    }
+  }
 
-    function hideTooltip() {
+  function hideTooltip() {
-        isVisible = false;
+    isVisible = false;
-        clearTimeout(timer);
+    clearTimeout(timer);
-    }
+  }
 
-    onDestroy(() => {
+  onDestroy(() => {
-        clearTimeout(timer);
+    clearTimeout(timer);
-    });
+  });
 </script>
 
 <div class="tooltip" on:touchstart={showTooltip} on:touchend={hideTooltip} on:touchcancel={hideTooltip}>
-    <slot />
+  <slot />
-    <span class="tooltiptext">{text}</span>
+  <span class="tooltiptext">{text}</span>
 </div>
 
 <style>
-    .tooltip {
+  .tooltip {
-        position: relative;
+    position: relative;
-        display: inline-block;
+    display: inline-block;
-        cursor: pointer;
+    cursor: pointer;
-    }
+  }
 
-    .tooltip .tooltiptext {
+  .tooltip .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: var(--island-button-color);
@@ -52,7 +52,7 @@
   }
 
   .tooltip:hover .tooltiptext {
-        visibility: visible;
+    visibility: visible;
-        opacity: 1;
+    opacity: 1;
-    }
+  }
 </style>

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">
+          <p class="text-message">This has been removed from the timetable for today.</p>
-            This has been removed from the timetable for today.
+          <p class="text-message">The service may have been retimed, re-routed or removed from todays timetable completely.</p>
-          </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">
-            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}
@@ -86,26 +80,26 @@
               <th>Sch Arr.</th>
               <th>Sch Dep.</th>
             </tr>
-              {#each serviceDetail.stops as stop}
+            {#each serviceDetail.stops as stop}
-                <tr>
+              <tr>
-                  {#if stop.publicArrival || stop.publicDeparture}
+                {#if stop.publicArrival || stop.publicDeparture}
                   <td>{stop.tiploc}</td>
                   <td>{stop.platform || '-'}</td>
                   <td>{stop.publicArrival || '-'}</td>
                   <td>{stop.publicDeparture || '-'}</td>
-                  {:else if stop.wttArrival || stop.wttDeparture}
+                {:else if stop.wttArrival || stop.wttDeparture}
                   <td class="wtt">{stop.tiploc}</td>
                   <td class="wtt">{stop.platform || stop.depLine || stop.arrLine || '-'}</td>
                   <td class="wtt">{stop.wttArrival || '-'}</td>
                   <td class="wtt">{stop.wttDeparture || '-'}</td>
-                  {:else}
+                {:else}
                   <td class="pass">{stop.tiploc}</td>
                   <td class="pass">{stop.platform || stop.depLine || stop.arrLine || '-'}</td>
                   <td class="pass">-</td>
                   <td class="pass">{stop.pass || '-'}</td>
-                  {/if}
+                {/if}
-                </tr>
+              </tr>
-              {/each}
+            {/each}
           </table>
         {/if}
       {:catch}

src/lib/train/trainIcons.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-  import Tooltip from "$lib/Tooltip.svelte";
+  import Tooltip from '$lib/Tooltip.svelte';
-  import type { ServiceDetail } from "@owlboard/ts-types";
+  import type { ServiceDetail } from '@owlboard/ts-types';
-import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tabler/icons-svelte";
+  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/+page.svelte

@@ -5,7 +5,7 @@
   const title = 'More';
 
   const links = [
-    { title: 'Your Data', path: '/more/data', icon: IconUser},
+    { title: 'Your Data', path: '/more/data', icon: IconUser },
     { title: 'Registration', path: '/more/reg', icon: IconUserPlus },
     { title: 'Settings', path: '/more/settings', icon: IconSettings },
     { title: 'Help', path: '/more/help', icon: IconHelp },

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

@@ -57,16 +57,17 @@
   {#if isLoading}
     <Loading />
   {:else if state == 'unreg'}
-  <p>To register, you will need to enter a work email address to receive a confirmation email</p>
+    <p>To register, you will need to enter a work email address to receive a confirmation email</p>
-  <p class="bold">Already have a registration code? <a href="/more/reg/submit">enter it here</a></p>
+    <p class="bold">Already have a registration code? <a href="/more/reg/submit">enter it here</a></p>
-  <form on:submit={request}>
+    <form on:submit={request}>
-    <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
+      <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
-    <label for="checkbox">
+      <label for="checkbox">
-      I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
+        I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
-      <input id="checkbox" type="checkbox" required />
+        <input id="checkbox" type="checkbox" required />
-    </label><br />
+      </label><br />
-    <button type="submit">Submit</button>
+      <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}`);
@@ -35,17 +34,17 @@
   async function handleSubmit() {
     let submitString: string = '';
     for (const input of inputs) {
-        submitString += input.value.toUpperCase();
+      submitString += input.value.toUpperCase();
     }
     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

@@ -27,9 +27,9 @@
   <Island>
     <p>
       <Tooltip text="Svelte"><IconBrandSvelte /></Tooltip>
-      <Tooltip text="Javascript"><IconBrandJavascript/></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>
+      <IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br />
-      Web-app Version<br /><span class="data">{version}{#if versionTag}-{versionTag}{/if}</span>
+      Web-app Version<br /><span class="data"
+        >{version}{#if versionTag}-{versionTag}{/if}</span
+      >
     </p>
     <p>Unable to fetch server application versions</p>
   </Island>

src/routes/pis/+page.svelte

@@ -103,7 +103,7 @@
     <br />
     <button type="submit">Search</button>
   </form>
-<!-- FIND BY PIS CODE NOT WORKING AT PRESENT
+  <!-- FIND BY PIS CODE NOT WORKING AT PRESENT
   <p class="label">Find By PIS Code:</p>
   <form on:submit={findByPis}>
     <input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} />