Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Improvements in Route Schedule #169

Merged
merged 8 commits into from
Feb 8, 2025
+26 −16
Merged

UI Improvements in Route Schedule #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a182207
ui: add padding in StandalonePage to make responsive
tarunsinghofficial Jan 21, 2025
93c4ed9
Remove unnecessary ternary operation for cleaner code in schedule tab…
tarunsinghofficial Jan 21, 2025
434470a
Refactor UI: Combine 'Collapse All' and 'Show All' buttons into a sin…
tarunsinghofficial Jan 21, 2025
469ee9a
added padding in accordion item for better UI
tarunsinghofficial Jan 21, 2025
038dc1a
fix: resolve z-index issue between accordion and datepicker, reduced …
tarunsinghofficial Jan 21, 2025
d1de43c
fix: remove underlines from schedule minutes. Replace with subtle bac…
tarunsinghofficial Jan 31, 2025
c309ed4
fix: initialize routes as collapsed by default
tarunsinghofficial Jan 31, 2025
3b20243
fix: correct sticky header positioning in accordion
tarunsinghofficial Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/StandalonePage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
let { children } = $props();
</script>

<div class="mx-auto h-full max-w-5xl overflow-y-auto">
<div class="mx-auto h-full max-w-5xl overflow-y-auto p-4">
{@render children?.()}
</div>
2 changes: 1 addition & 1 deletion src/components/containers/AccordionItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</script>

<div class="relative">
<div class="sticky top-0 z-10 bg-white dark:bg-gray-800">
<div class="sticky -top-[17px] z-10 bg-white px-4 dark:bg-gray-800">
<button
type="button"
class="flex w-full items-center justify-between py-3 text-left text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
Expand Down
14 changes: 8 additions & 6 deletions src/components/schedule-for-stop/RouteScheduleTable.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@
>
{formatHour(hour)} <span class="text-sm text-gray-600 dark:text-gray-100">AM</span>
</td>
<td class="border px-6 py-3 text-lg dark:border-gray-700 dark:text-white">
<td
class="flex items-start gap-3 border px-6 py-3 text-lg dark:border-gray-700 dark:text-white"
>
{#each times as stopTime, index (index)}
<span>
<span class="rounded bg-gray-50 px-2 dark:bg-gray-800">
{extractMinutes(stopTime.arrivalTime)}
{index < times.length - 1 ? ', ' : ''}
</span>
{/each}
</td>
Expand Down Expand Up @@ -96,11 +97,12 @@
>
{formatHour(hour)} <span class="text-sm text-gray-600 dark:text-gray-100">PM</span>
</td>
<td class="border px-6 py-3 text-lg dark:border-gray-700 dark:text-white">
<td
class="flex items-start gap-3 border px-6 py-3 text-lg dark:border-gray-700 dark:text-white"
>
{#each times as stopTime, index (index)}
<span>
<span class="rounded bg-gray-50 px-2 dark:bg-gray-800">
{extractMinutes(stopTime.arrivalTime)}
{index < times.length - 1 ? ', ' : ''}
</span>
{/each}
</td>
Expand Down
24 changes: 16 additions & 8 deletions src/routes/stops/[stopID]/schedule/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
let stopDirection = $state('');
let loading = $state(true);
let accordionComponent = $state();
let allRoutesExpanded = $state(false);
let schedulesMap = new Map();
let routeReference = new Map();
Expand Down Expand Up @@ -105,10 +106,18 @@
return grouped;
}
function toggleAllRoutes() {
if (allRoutesExpanded) {
accordionComponent.closeAll();
} else {
accordionComponent.openAll();
}
allRoutesExpanded = !allRoutesExpanded;
}
onMount(async () => {
const formattedDate = currentDate.toISOString().split('T')[0];
await fetchScheduleForStop(stopId, formattedDate);
accordionComponent.openAll(false);
});
stopId = $page.params.stopID;
Expand Down Expand Up @@ -143,22 +152,21 @@
</h2>
<div class="mb-4 flex gap-4">
<div class="min-w-32">
<div class="z-20 w-[30%] min-w-32">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this causes a regression on mobile devices.

image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. Thanks for solving this :)

<Datepicker bind:value={selectedDate} inputClass="w-96" />
</div>
<div class="flex-1 text-right">
<button class="button" onclick={() => accordionComponent.openAll()}>
{$t('schedule_for_stop.show_all_routes')}
</button>
<button class="button" onclick={() => accordionComponent.closeAll()}>
{$t('schedule_for_stop.collapse_all_routes')}
<button class="button" onclick={toggleAllRoutes}>
{allRoutesExpanded
? $t('schedule_for_stop.collapse_all_routes')
: $t('schedule_for_stop.show_all_routes')}
</button>
</div>
</div>
<div
class="flex-1 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-black"
class="flex-1 rounded-lg border border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-black"
>
{#if emptySchedules}
<p class="text-center text-gray-700 dark:text-gray-400">
Expand Down