fix(historicPage): remove redundant labels at mobile view (#330)

since there are labels at the top of each input - i consider better to remove the extra ones...
hasadna · Dec 21, 2023 · cb9c288 · cb9c288
1 parent 089d800
commit cb9c288
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/pages/TimelinePage.tsx → src/pages/historicTimeline/index.tsx b/src/pages/TimelinePage.tsx → src/pages/historicTimeline/index.tsx
@@ -13,16 +13,18 @@ import RouteSelector from 'src/pages/components/RouteSelector'
 import { Label } from 'src/pages/components/Label'
 import { useTranslation } from 'react-i18next'
 import StopSelector from 'src/pages/components/StopSelector'
-import { Spin } from 'antd'
+import { Spin, Typography, Alert } from 'antd'
 import { getSiriStopHitTimesAsync } from 'src/api/siriService'
 import { TimelineBoard } from 'src/pages/components/timeline/TimelineBoard'
-import { PageContainer } from './components/PageContainer'
-import { SearchContext, TimelinePageState } from '../model/pageState'
-import { NotFound } from './components/NotFound'
+import { PageContainer } from '../components/PageContainer'
+import { SearchContext, TimelinePageState } from '../../model/pageState'
+import { NotFound } from '../components/NotFound'
 import moment from 'moment'
-import { DateSelector } from './components/DateSelector'
+import { DateSelector } from '../components/DateSelector'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 
+const { Title } = Typography
+
 const StyledTimelineBoard = styled(TimelineBoard)`
   margin-top: ${MARGIN_MEDIUM * 3}px;
 `
@@ -135,12 +137,14 @@ const TimelinePage = () => {
 
   return (
     <PageContainer>
+      <Title level={3}>הסטורית נסיעות</Title>
+      <Alert message="רשימת זמני עצירה בתחנה שנבחרה" type="info" />
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date */}
-        <Grid xs={4}>
+        <Grid xs={4} className="hideOnMobile">
           <Label text={t('choose_date')} />
         </Grid>
-        <Grid xs={8}>
+        <Grid sm={8} xs={12}>
           <DateSelector
             time={moment(timestamp)}
             onChange={(ts) =>
@@ -149,20 +153,20 @@ const TimelinePage = () => {
           />
         </Grid>
         {/* choose operator */}
-        <Grid xs={4}>
+        <Grid xs={4} className="hideOnMobile">
           <Label text={t('choose_operator')} />
         </Grid>
-        <Grid xs={8}>
+        <Grid sm={8} xs={12}>
           <OperatorSelector
             operatorId={operatorId}
             setOperatorId={(id) => setSearch((current) => ({ ...current, operatorId: id }))}
           />
         </Grid>
         {/* choose line */}
-        <Grid xs={4}>
+        <Grid xs={4} className="hideOnMobile">
           <Label text={t('choose_line')} />
         </Grid>
-        <Grid xs={8}>
+        <Grid sm={8} xs={12}>
           <LineNumberSelector
             lineNumber={lineNumber}
             setLineNumber={(number) => setSearch((current) => ({ ...current, lineNumber: number }))}

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,7 +1,7 @@
 import { Navigate, Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
 import { lazy } from 'react'
 const DashboardPage = lazy(() => import('../pages/dashboard/DashboardPage'))
-const TimelinePage = lazy(() => import('../pages/TimelinePage'))
+const TimelinePage = lazy(() => import('../pages/historicTimeline'))
 const GapsPage = lazy(() => import('../pages/gaps'))
 const GapsPatternsPage = lazy(() => import('../pages/gapsPatterns'))
 const RealtimeMapPage = lazy(() => import('../pages/realtimeMap'))