From 839c2a5899c5841abbe723a7061a955ed0c0fc45 Mon Sep 17 00:00:00 2001 From: Aaron Brethorst Date: Fri, 22 Nov 2024 22:06:27 -0800 Subject: [PATCH] Standalone Stop Pages Fit and Finish * Extracts some CSS classes from common UI elements and reuses them in a few places in our UI (tabs and buttons) * Create a 'StandalonePage' component meant to be used on a page that isn't part of the map * Create a CompassArrow component that takes in a cardinal direction and returns a FontAwesome arrow icon pointing in the same direction * Add a TabContainer component that can be used to make inter-page tab bars * Renames StopDetailsHeader to StopPageHeader, shrinks it a bit, and removes some information that shows up elsewhere * Add a tab bar to StopPageHeader for toggling between Arrivals and Departures and Schedule * Rethink some elements of the Schedule page user experience: * Single column with the date picker moved into a flex container with the expand/collapse buttons * Start with all routes expanded * Use default styles for both the expand and collapse buttons --- src/app.css | 20 ++++++ src/components/StandalonePage.svelte | 3 + src/components/controls/CompassArrow.svelte | 41 +++++++++++ .../StopDetailsHeader.svelte | 35 --------- src/components/stops/StopPageHeader.svelte | 39 ++++++++++ src/components/tabs/TabContainer.svelte | 3 + src/components/tabs/TabLink.svelte | 10 +++ .../trip-planner/ItineraryTab.svelte | 5 +- .../trip-planner/TripPlanModal.svelte | 2 +- src/locales/am.json | 14 ++-- src/locales/ar.json | 14 ++-- src/locales/en.json | 10 ++- src/locales/es.json | 14 ++-- src/locales/pl.json | 14 ++-- src/locales/so.json | 14 ++-- src/locales/tl.json | 14 ++-- src/locales/vi.json | 14 ++-- src/routes/+page.svelte | 5 ++ src/routes/stops/[stopID]/+page.svelte | 13 +++- .../stops/[stopID]/schedule/+page.svelte | 72 ++++++++----------- tailwind.config.js | 4 ++ 21 files changed, 216 insertions(+), 144 deletions(-) create mode 100644 src/components/StandalonePage.svelte create mode 100644 src/components/controls/CompassArrow.svelte delete mode 100644 src/components/schedule-for-stop/StopDetailsHeader.svelte create mode 100644 src/components/stops/StopPageHeader.svelte create mode 100644 src/components/tabs/TabContainer.svelte create mode 100644 src/components/tabs/TabLink.svelte diff --git a/src/app.css b/src/app.css index c1bae2b..91088bd 100644 --- a/src/app.css +++ b/src/app.css @@ -19,6 +19,26 @@ @apply rounded-lg border-gray-500 bg-white/90 px-4 shadow-lg dark:bg-black dark:text-white dark:shadow-lg dark:shadow-gray-200/10; } + .tab-container { + @apply flex border-b border-gray-300; + } + + .tab-container__item { + @apply -mb-px px-4 py-2 font-semibold text-gray-500; + } + + .tab-container__item--active { + @apply border-b-2 border-green-500 text-green-500; + } + + .button { + @apply rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50; + } + + .button--primary { + @apply rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600; + } + .rtl { @apply flex-row-reverse text-right; direction: rtl; diff --git a/src/components/StandalonePage.svelte b/src/components/StandalonePage.svelte new file mode 100644 index 0000000..2cd0932 --- /dev/null +++ b/src/components/StandalonePage.svelte @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/components/controls/CompassArrow.svelte b/src/components/controls/CompassArrow.svelte new file mode 100644 index 0000000..b57c39d --- /dev/null +++ b/src/components/controls/CompassArrow.svelte @@ -0,0 +1,41 @@ + + + + + diff --git a/src/components/schedule-for-stop/StopDetailsHeader.svelte b/src/components/schedule-for-stop/StopDetailsHeader.svelte deleted file mode 100644 index f0d82db..0000000 --- a/src/components/schedule-for-stop/StopDetailsHeader.svelte +++ /dev/null @@ -1,35 +0,0 @@ - - -
-

- - {$t('schedule_for_stop.stop_details')} -

-

- - {$t('schedule_for_stop.stop_name')}: - {stopName} | {$t('schedule_for_stop.stop_id')}: - {stopId} -

-

- - {$t('schedule_for_stop.direction')}: - {stopDirection} -

-
- - - {$t('schedule_for_stop.click_for_realtime')} - -
-
diff --git a/src/components/stops/StopPageHeader.svelte b/src/components/stops/StopPageHeader.svelte new file mode 100644 index 0000000..2c4a4c1 --- /dev/null +++ b/src/components/stops/StopPageHeader.svelte @@ -0,0 +1,39 @@ + + +
+

+ {stopName} +

+
+
+ + {$t('schedule_for_stop.stop_id')}: + {stopId} +
+
+ + {$t('schedule_for_stop.direction')}: + {stopDirection} +
+
+ + {$t('arrivals_and_departures_for_stop.title')} + {$t('schedule_for_stop.route_schedules')} + +
diff --git a/src/components/tabs/TabContainer.svelte b/src/components/tabs/TabContainer.svelte new file mode 100644 index 0000000..cb37e3e --- /dev/null +++ b/src/components/tabs/TabContainer.svelte @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/components/tabs/TabLink.svelte b/src/components/tabs/TabLink.svelte new file mode 100644 index 0000000..572d096 --- /dev/null +++ b/src/components/tabs/TabLink.svelte @@ -0,0 +1,10 @@ + + +
+ + + +
diff --git a/src/components/trip-planner/ItineraryTab.svelte b/src/components/trip-planner/ItineraryTab.svelte index d12eb7c..61f2ff8 100644 --- a/src/components/trip-planner/ItineraryTab.svelte +++ b/src/components/trip-planner/ItineraryTab.svelte @@ -6,9 +6,8 @@ - +
+ +
+ +
+ + +
-
+
{#if emptySchedules}

{$t('schedule_for_stop.no_schedules_available')}

{:else} - + {#each schedules as schedule, index (schedule.tripHeadsign)}
- -{/if} + {/if} + diff --git a/tailwind.config.js b/tailwind.config.js index a4bb789..01af366 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -23,6 +23,10 @@ export default { 800: '#CC4522', 900: '#A5371B' } + }, + rotate: { + 135: '135deg', + 225: '225deg' } } },