feat: map expand button for mobile (#302)

Co-authored-by: Noam Gaash <[email protected]>

src/pages/Map.scss

@@ -1,44 +1,65 @@
 main,
-main>div,
+main > div,
 .map-container,
 .leaflet-container,
 .map-info {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
 }
 
 pre {
-    direction: ltr;
-    height: 200px;
-    overflow-y: auto;
+  direction: ltr;
+  height: 200px;
+  overflow-y: auto;
 }
 
 .map-header-buttons {
-    display: flex;
-    flex-direction: row;
-    margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
 }
 
 .bus-icon-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    > .bus-icon-circle{
-        width: 30px;
-        height: 30px;
-        padding: 5px;
-        border-radius: 50%;
-        background-color: white;
-        img {
-            width: 100%;
-            height: 100%;
-        }
-    }
-    > .operator-name{
-        background-color: rgba(255, 255, 255, 0.4);
-        font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  > .bus-icon-circle {
+    width: 30px;
+    height: 30px;
+    padding: 5px;
+    border-radius: 50%;
+    background-color: white;
+
+    img {
+      width: 100%;
+      height: 100%;
     }
-}
+  }
+
+  > .operator-name {
+    background-color: rgba(255, 255, 255, 0.4);
+    font-weight: bold;
+  }
+}
+
+.expand-button {
+  position: absolute;
+  left: 5px;
+  bottom: 5px;
+  z-index: 999;
+}
+
+.expanded {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+@media screen and (min-width: 430px) {
+  .expand-button {
+    display: none;
+  }
+}

src/pages/singleLineMap/index.tsx

@@ -1,5 +1,5 @@
 import moment from 'moment'
-import { useContext, useEffect, useMemo, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
 import { getRoutesAsync } from 'src/api/gtfsService'
 import useVehicleLocations from 'src/api/useVehicleLocations'
@@ -12,6 +12,9 @@ import { useTranslation } from 'react-i18next'
 import { SearchContext } from '../../model/pageState'
 import { NotFound } from '../components/NotFound'
 import { Point } from '../realtimeMap'
+import styled from 'styled-components'
+import { Button } from 'antd'
+import { ExpandAltOutlined } from '@ant-design/icons'
 
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 import '../Map.scss'
@@ -40,7 +43,8 @@ const position: Point = {
 const SingleLineMapPage = () => {
   const { search, setSearch } = useContext(SearchContext)
   const { operatorId, lineNumber, timestamp, routes, routeKey } = search
-
+  const [isExpanded, setIsExpanded] = useState<boolean>(false)
+  const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), [])
   const [agencyList, setAgencyList] = useState<Agency[]>([])
   const { t } = useTranslation()
 
@@ -107,6 +111,11 @@ const SingleLineMapPage = () => {
     [filteredPositions],
   )
 
+  const ExpandableMap = styled(MapContainer)`
+    height: 100%;
+    width: 100%;
+  `
+
   return (
     <PageContainer className="map-container">
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
@@ -163,12 +172,22 @@ const SingleLineMapPage = () => {
       </Grid>
 
       <div className="map-info">
-        <MapContainer center={position.loc} zoom={8} scrollWheelZoom={true}>
+        <Button
+          type="primary"
+          className="expand-button"
+          shape="circle"
+          onClick={toggleExpanded}
+          icon={<ExpandAltOutlined />}
+        />
+        <ExpandableMap
+          center={position.loc}
+          zoom={8}
+          scrollWheelZoom={true}
+          className={`${isExpanded ? 'expanded' : 'collapsed'}`}>
           <TileLayer
             attribution='&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
             url="https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png"
           />
-
           {filteredPositions.map((pos, i) => {
             const icon = busIcon({
               operator_id: pos.operator?.toString() || 'default',
@@ -192,7 +211,7 @@ const SingleLineMapPage = () => {
               positions={path.locations.map(({ lat, lon }) => [lat, lon])}
             />
           ))}
-        </MapContainer>
+        </ExpandableMap>
       </div>
     </PageContainer>
   )