Skip to content

Commit

Permalink
changed mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
vishalkrishnads committed Jun 27, 2024
1 parent 636113c commit 69f197d
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 8 deletions.
2 changes: 0 additions & 2 deletions src/components/RouteStatistics.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Icon from './material/Icon'
type RouteStatisticsProps = {
class?: string
route?: Route
speed?: number
}

export const RouteCardStatistics: VoidComponent<RouteStatisticsProps> = (props) => {
Expand Down Expand Up @@ -57,7 +56,6 @@ export const DriveStatistics: VoidComponent<RouteStatisticsProps> = (props) => {
}

return <div class="mb-2 flex h-full w-screen items-center justify-center rounded-md lg:w-full lg:flex-col">
<Statistic icon="speed" label="Speed" data={`${props.speed}mph`} />
<Statistic icon="map" label="Distance" data={`${props.route?.ui_derived?.distance}mi`} />
<Statistic icon="timer" label="Duration" data={formatRouteDuration(props.route?.ui_derived?.duration)} />
<Statistic icon="search_hands_free" label="Engagement" data={`${props.route?.ui_derived?.engagement}%`} />
Expand Down
15 changes: 9 additions & 6 deletions src/pages/dashboard/activities/RouteActivity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,19 +107,22 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
</div>
</div>
</div>
<div class="flex basis-10/12 flex-col items-center p-2 lg:basis-8/12 lg:justify-center lg:p-6" >
<div style={{ height: `${isDesktop() ? videoHeight() : 50}%`, width: `${isDesktop() ? 120 - width() : 100}%` }} class="flex w-full flex-col items-center justify-center lg:flex-row lg:space-x-10">
<div class="flex basis-10/12 flex-col items-center px-2 py-0 lg:basis-8/12 lg:justify-center lg:p-6" >
<div style={{ height: `${isDesktop() ? videoHeight() : 50}%`, width: `${isDesktop() ? 120 - width() : 100}%` }} class="flex w-full flex-col-reverse items-center justify-center lg:flex-row lg:space-x-10">
<div class="flex size-full flex-col items-center justify-center lg:w-2/12">
<DriveStatistics speed={speed()} route={route()} />
<DriveStatistics route={route()} />
</div>
<div class="flex h-full w-11/12 flex-col">
<div class="flex h-full w-full lg:w-11/12 flex-col">
<Suspense
fallback={
<div class="skeleton-loader aspect-[241/151] rounded-lg bg-surface-container-low" />
}
>
<div class="relative left-2 top-10 z-40 flex h-8 w-20 items-center justify-center rounded-lg bg-primary-container px-2 py-1 text-on-primary-container sm:left-4">
<p class="text-xs">{speed()} mph</p>
</div>
<RouteVideoPlayer routeName={routeName()} onProgress={setSeekTime} />
<Timeline class="mb-1" routeName={routeName()} seekTime={seekTime()} />
<Timeline class="mb-4" routeName={routeName()} seekTime={seekTime()} />
</Suspense>
</div>
</div>
Expand All @@ -132,7 +135,7 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
</Suspense>
</div>
<div class="flex basis-4/12 flex-col items-center justify-center p-4">
<div class="grid size-full h-full grid-cols-2 grid-rows-3 rounded-md lg:h-3/4">
<div class="grid size-full h-full grid-cols-2 grid-rows-3 space-y-2 rounded-md lg:h-3/4">
<Action selectable selected label="Preserved" icon="hide_source" />
<Action selectable label="Public Access" icon="key" />
<Action label="View in useradmin" icon="admin_panel_settings" />
Expand Down

0 comments on commit 69f197d

Please sign in to comment.