Improvements to responsive design

No warning on small formfactor devices

frontend/src/components/AreaAction.vue

@@ -1,43 +1,32 @@
 <script setup lang="ts">
-type syncAsyncFunction = () => void | Promise<void>;
-interface AreaActionProps {
-  onLeftTap?: syncAsyncFunction;
-  onMiddleTap?: syncAsyncFunction;
-  onRightTap?: syncAsyncFunction;
-}
+const emit = defineEmits<{
+  onLeftTap: [];
+  onMiddleTap: [];
+  onRightTap: [];
+}>();
 
-const props = defineProps<AreaActionProps>();
-
-const slideLeft = ref(false);
-const slideRight = ref(false);
 const delay = 500;
 
 const handleClick = (event: MouseEvent) => {
   const screenWidth = window.innerWidth;
   const clickPosition = event.clientX;
 
-  if (clickPosition < screenWidth / 4 && props.onLeftTap) {
-    slideLeft.value = true;
+  if (clickPosition < screenWidth / 4) {
     setTimeout(() => {
-      props.onLeftTap!();
+      emit("onLeftTap");
     }, delay);
     return;
   }
 
-  if (clickPosition > (3 * screenWidth) / 4 && props.onRightTap) {
-    slideRight.value = true;
+  if (clickPosition > (3 * screenWidth) / 4) {
     setTimeout(() => {
-      props.onRightTap!();
+      emit("onRightTap");
     }, delay);
 
     return;
   }
 
-  if (!props.onMiddleTap) {
-    return;
-  }
-
-  props.onMiddleTap();
+  emit("onMiddleTap");
 };
 </script>
 

frontend/src/components/ErrorPopup.vue

@@ -24,7 +24,8 @@ const closeModal = () => {
 
 watch(
   () => props.open,
-  () => (isOpen.value = props.open)
+  () => (isOpen.value = props.open),
+  { immediate: true }
 );
 </script>
 
@@ -44,7 +45,7 @@ watch(
       </TransitionChild>
 
       <div
-        class="fixed inset-28 flex min-h-full items-center justify-center overflow-y-auto p-4 text-center"
+        class="fixed inset-6 flex min-h-full items-center justify-center overflow-y-auto p-4 text-center md:inset-28"
       >
         <TransitionChild
           as="template"

frontend/src/components/HomeView.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-  TrainsResponseEntity,
-  AppConstants,
-} from "@wmata-train-tracker/shared";
-import MinSizeWarning from "./MinSizeWarning.vue";
+import { TrainsResponseEntity } from "@wmata-train-tracker/shared";
 import AreaAction from "./AreaAction.vue";
 import SublineText from "./SublineText.vue";
 import TrainArrivalBoard from "./TrainArrivalBoard.vue";
@@ -29,33 +25,31 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <MinSizeWarning :min-width="AppConstants.minScreenSize" class="trains">
-    <AreaAction
-      :on-left-tap="() => emit('onLeftTap')"
-      :on-middle-tap="() => emit('onMiddleTap')"
-      :on-right-tap="() => emit('onRightTap')"
-    >
-      <div v-if="trainData" class="flex h-screen flex-col justify-between">
-        <TrainArrivalBoard class="trains" :trains="trainData.trains" />
-        <div class="mb-2 flex flex-row items-center gap-4">
-          <SublineText
-            class="trains mr-auto w-1/2 truncate text-4xl text-gray-700"
-          >
-            {{ selectedStationName }}
-          </SublineText>
-          <IncidentNotification
-            v-if="hasIncidents"
-            @on-see-incidents="() => emit('onSeeIncidents')"
-          />
-          <LastUpdated
-            class="trains"
-            :last-updated="new Date(trainData.lastUpdated)"
-          />
-        </div>
+  <AreaAction
+    @on-left-tap="() => emit('onLeftTap')"
+    @on-middle-tap="() => emit('onMiddleTap')"
+    @on-right-tap="() => emit('onRightTap')"
+  >
+    <div v-if="trainData" class="flex h-screen flex-col justify-between">
+      <TrainArrivalBoard class="trains" :trains="trainData.trains" />
+      <div class="mb-2 flex flex-row items-center gap-4">
+        <SublineText
+          class="trains mr-auto w-1/2 truncate text-2xl text-gray-700 md:text-4xl"
+        >
+          {{ selectedStationName }}
+        </SublineText>
+        <IncidentNotification
+          v-if="hasIncidents"
+          @on-see-incidents="() => emit('onSeeIncidents')"
+        />
+        <LastUpdated
+          class="trains"
+          :last-updated="new Date(trainData.lastUpdated)"
+        />
       </div>
-      <LoadingIndicator :show="isRefreshing" />
-    </AreaAction>
-  </MinSizeWarning>
+    </div>
+    <LoadingIndicator :show="isRefreshing" />
+  </AreaAction>
 </template>
 
 <style scoped>

frontend/src/components/LastUpdated.vue

@@ -16,7 +16,7 @@ const lastUpdatedLocale = computed(() =>
 </script>
 
 <template>
-  <SublineText class="text-4xl text-gray-700"
+  <SublineText class="text-2xl text-gray-700 md:text-4xl"
     >Updated: {{ lastUpdatedLocale }}</SublineText
   >
 </template>

frontend/src/components/LoadingIndicator.vue

@@ -2,6 +2,7 @@
 interface LoadingProps {
   show: boolean;
 }
+
 const minLoadingTimeInMs = 1000;
 const props = defineProps<LoadingProps>();
 const show = ref(false);

frontend/src/components/SublineText.vue

@@ -1,3 +1,3 @@
 <template>
-  <p class="text-4xl text-gray-700"><slot></slot></p>
+  <p class="text-gray-700"><slot></slot></p>
 </template>

frontend/src/components/TextCarousel.vue

@@ -52,7 +52,7 @@ const emit = defineEmits<{
     <p
       v-for="(slide, index) of slides"
       :key="index"
-      class="slide flex w-screen items-center justify-center text-center text-5xl leading-[1.7ch] text-red-600"
+      class="slide flex w-screen items-center justify-center text-center text-2xl leading-[1.7ch] text-red-600 md:text-5xl"
       :style="{ transform: `translateX(-${activeIndex * 100}%)` }"
     >
       {{ slide }}

frontend/src/components/TrainArrivalBoard.vue

@@ -14,7 +14,7 @@ defineProps<TrainArrivalBoardProps>();
 </script>
 
 <template>
-  <div ref="parent" class="bg-black text-8xl">
+  <div ref="parent" class="bg-black text-4xl md:text-8xl">
     <div class="mb-2 grid grid-cols-8 text-red-600">
       <p class="col-span-1">LN</p>
       <p class="col-span-2">CAR</p>

frontend/src/components/index.ts

@@ -6,7 +6,6 @@ import IncidentsNotification from "./IncidentNotification.vue";
 import IncidentsView from "./IncidentsView.vue";
 import LastUpdate from "./LastUpdated.vue";
 import LoadingIndicator from "./LoadingIndicator.vue";
-import MinSizeWarning from "./MinSizeWarning.vue";
 import ScrollableStationList from "./ScrollableStationList.vue";
 import SublineText from "./SublineText.vue";
 import TextCarousel from "./TextCarousel.vue";
@@ -21,7 +20,6 @@ export {
   IncidentsView,
   LastUpdate,
   LoadingIndicator,
-  MinSizeWarning,
   ScrollableStationList,
   SublineText,
   TextCarousel,

frontend/src/composables/typed-router.ts

@@ -1,8 +1,5 @@
 import { useRouter } from "vue-router";
-import { Route } from "@/constants/constants";
-
-type RouteKeys = keyof typeof Route;
-type RouteValues = (typeof Route)[RouteKeys];
+import { RouteValues } from "@wmata-train-tracker/shared";
 
 /**
  * A utility function that wraps the Vue Router's `useRouter` hook and provides type safety

frontend/src/constants/constants.ts

@@ -8,9 +8,3 @@ export const RuntimeErrorEvent = {
   trains: "trains_error",
   incidents: "incidents_error",
 } as const;
-
-export const Route = {
-  Index: "/",
-  Stations: "/stations",
-  Incidents: "/incidents",
-} as const;

frontend/src/pages/IncidentsPage.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { GetIncidents } from "@wails/go/app/App";
-import { IncidentsResponseEntity } from "@wmata-train-tracker/shared";
+import { IncidentsResponseEntity, Route } from "@wmata-train-tracker/shared";
 import IncidentsView from "@/components/IncidentsView.vue";
 import { useQuery } from "@/composables/query";
 import { useTypedRouter } from "@/composables/typed-router";
-import { Route } from "@/constants/constants";
 
 const router = useTypedRouter();
 

frontend/src/pages/IndexPage.vue

@@ -4,11 +4,12 @@ import {
   IncidentsResponseEntity,
   StationEntity,
   TrainsResponseEntity,
+  Route,
 } from "@wmata-train-tracker/shared";
 import HomeView from "@/components/HomeView.vue";
 import ErrorPopup from "@/components/ErrorPopup.vue";
 import { useQuery } from "@/composables/query";
-import { Route, RuntimeEvent, RuntimeErrorEvent } from "@/constants/constants";
+import { RuntimeEvent, RuntimeErrorEvent } from "@/constants/constants";
 import { useTypedRouter } from "@/composables/typed-router";
 import { useRuntime } from "@/composables/runtime";
 

frontend/src/pages/StationsPage.vue

@@ -2,6 +2,7 @@
 import {
   StationEntity,
   StationsResponseEntity,
+  Route,
 } from "@wmata-train-tracker/shared";
 import ScrollableStationList from "@/components/ScrollableStationList.vue";
 import { useQuery } from "@/composables/query";
@@ -13,7 +14,6 @@ import {
   SetCurrentStationPage,
 } from "@wails/go/app/App";
 import { useTypedRouter } from "@/composables/typed-router";
-import { Route } from "@/constants/constants";
 import ErrorPopup from "@/components/ErrorPopup.vue";
 
 const router = useTypedRouter();

frontend/src/routes/router.ts

@@ -1,8 +1,8 @@
 import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
+import { Route } from "@wmata-train-tracker/shared";
 import IndexPage from "@/pages/IndexPage.vue";
 import StationsPage from "@/pages/StationsPage.vue";
 import IncidentsPage from "@/pages/IncidentsPage.vue";
-import { Route } from "@/constants/constants";
 
 const routes: RouteRecordRaw[] = [
   { path: Route.Index, component: IndexPage },

nuxt/composables/use_mounted_interval.composable.ts

@@ -9,7 +9,7 @@ export const useMountedInterval = (
   callback: () => void | Promise<void>,
   delay: number
 ) => {
-  const refreshInterval = ref<NodeJS.Timer>();
+  const refreshInterval = ref<NodeJS.Timeout>();
 
   onMounted(() => {
     refreshInterval.value = setInterval(callback, delay);

nuxt/pages/incidents.vue

@@ -1,19 +1,25 @@
 <script setup lang="ts">
-import { useTrainStore } from "~/stores/train.store";
 import { IncidentsView } from "@wmata-train-tracker/frontend";
+import { Route } from "@wmata-train-tracker/shared";
+import { useTrainStore } from "~/stores/train.store";
 
 const trainStore = useTrainStore();
 const { incidents } = toRefs(trainStore);
 
 const onSlideEnd = () => {
   trainStore.clearIncidents();
-  navigateTo("/", { replace: true });
+  navigateTo(Route.Index, { replace: true });
 };
 
-onMounted(() => {
-  if (trainStore.incidents.length === 0) {
-    navigateTo("/", { replace: true });
-  }
+definePageMeta({
+  middleware: [
+    function () {
+      const trainStore = useTrainStore();
+      if (trainStore.incidents.length === 0) {
+        return navigateTo(Route.Index, { replace: true });
+      }
+    },
+  ],
 });
 </script>