From e42a8946c787f5955dd70e55673d4ca3c02fce07 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Wed, 12 Jul 2023 17:25:35 +0100
Subject: [PATCH] Staff LDB and train detail fully responsive

---
 src/lib/ldb/staff/train-detail.svelte | 79 ++++++++++++++++++---------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/lib/ldb/staff/train-detail.svelte b/src/lib/ldb/staff/train-detail.svelte
index 1b41e7b..a2a2bd7 100644
--- a/src/lib/ldb/staff/train-detail.svelte
+++ b/src/lib/ldb/staff/train-detail.svelte
@@ -1,6 +1,6 @@
 <script>
   import OverlayIsland from '$lib/islands/overlay-island.svelte';
-  import Loading from '$lib/navigation/loading.svelte';
+  import { fade } from 'svelte/transition';
   import Reason from '$lib/raw-fetchers/reason.svelte';
   import { uuid } from '$lib/stores/uuid';
   export let detail = {
@@ -97,50 +97,46 @@
 
 <OverlayIsland>
   <div id="detailBox">
+    <button type="button" id="closeService" on:click={handleClick}>X</button>
     {#await getTrain(detail.rid)}
       <h6>{detail.headcode}</h6>
-      <Loading />
+      <p in:fade id="loading">Loading Data...</p>
     {:then train}
       <h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
-      <button type="button" id="closeService" on:click={handleClick}>X</button>
       <p>
         Locations in grey are not scheduled stops
         <br />
         Times in <span class="estimate">yellow</span> are estimated times
       </p>
-      <table id="detailTable">
         {#if train.GetServiceDetailsResult.delayReason}
-          <tr
-            ><td colspan="7" class="late">
+          <p class="reason late">
               <Reason type="delay" code={train.GetServiceDetailsResult.delayReason} />
-            </td></tr
-          >
+          </p>
         {/if}
         {#if train.GetServiceDetailsResult.cancelReason}
-          <tr
-            ><td colspan="7" class="canc">
+          <p class="reason canc">
               <Reason type="cancel" code={train.GetServiceDetailsResult.cancelReason} />
-            </td></tr
-          >
+          </p>
         {/if}
+        <table id="detailTable">
+        <tr>
+          <th class="tableLocation">Loc.</th>
+          <th class="tablePlatform">Pl.</th>
+          <th class="tableTime">Sch</th>
+          <th class="tableTime">Est/<br>Act</th>
+          <th class="tableTime">Sch</th>
+          <th class="tableTime">Est/<br>Act</th>
+          <th class="tableDelay" />
+        </tr>
         <tr>
           <th colspan="2" />
           <th colspan="2">Arrival</th>
           <th colspan="2">Departure</th>
           <th />
         </tr>
-        <tr>
-          <th class="tableLocation">Location</th>
-          <th class="tablePlatform">Pl.</th>
-          <th class="tableTime">Sch</th>
-          <th class="tableTime">Est/Act</th>
-          <th class="tableTime">Sch</th>
-          <th class="tableTime">Est/Act</th>
-          <th class="tableDelay" />
-        </tr>
         {#each train.GetServiceDetailsResult.locations.location as location}
           <tr>
-            <td class={location?.isPass === 'true' ? 'pass' : ''}>{location.tiploc}</td>
+            <td class="location {location?.isPass === 'true' ? 'pass' : ''}">{location.tiploc}</td>
             <td class={location?.isPass === 'true' ? 'pass' : ''}>{location.platform || ''}</td>
             {#await parseTimes(location)}
               <td />
@@ -180,10 +176,17 @@
     left: 20px;
     font-size: 18px;
   }
+  #loading {
+    color: white;
+    animation: pulse-early 2.5s linear infinite;
+  }
   p {
     margin-top: 45px;
     margin-bottom: 0px;
   }
+  p.reason {
+    margin-top: 5px;
+  }
   #closeService {
     position: absolute;
     top: 10px;
@@ -199,28 +202,49 @@
   }
   #detailTable {
     margin-top: 10px;
-    margin: auto;
+    table-layout: fixed;
+    width: 100%;
+    margin-top: 12px;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding: 0px;
     color: white;
+    font-family: ubuntu,monospace;
+    font-size: 16px;
+  }
+  @media screen and (max-width: 338px) {
+    #detailTable{font-size: 14px}
+  }
+  @media screen and (max-width: 301px) {
+    #detailTable{font-size: 12px}
+  }
+  @media screen and (min-width: 469px) {
+    #detailTable{font-size: 20px}
   }
   .tableLocation {
-    width: 20%;
+    width: 18%;
+  }
+  td.location {
+    color: yellow;
   }
   .tablePlatform {
-    width: 8%;
+    width: 5%;
   }
   .tableTime {
     width: 15%;
   }
   .tableDelay {
-    width: 5%;
+    width: 7%;
   }
   .estimate {
-    color: rgb(255, 255, 50);
+    color: rgb(255, 255, 119);
   }
   .pass {
+    color: white !important;
     opacity: 0.45;
   }
   .canc {
+    color: white;
     animation: pulse-cancel 1.5s linear infinite;
   }
 
@@ -229,6 +253,7 @@
   }
 
   .late {
+    color: white;
     animation: pulse-late 1.5s linear infinite;
   }