Make the UI responsive enough to look OK on mobile devices

transitopia · Jan 5, 2024 · 6b34d33 · 6b34d33
1 parent a65ef81
commit 6b34d33
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,19 +7,20 @@ import { CyclingMap } from './CyclingMap/CyclingMap.tsx';
 import { LinkWithQuery } from './components/LinkWithQuery.tsx';
 import { Icon } from './components/Icon.tsx';
 import { WalkingMap } from './WalkingMap/WalkingMap.tsx';
+import { MapOverlayWindow } from './Map/MapOverlayWindow.tsx';
 
 function App() {
 
     return (
         <>
             <Map>
-                <div className="absolute w-96 bg-white z-50 top-5 left-5 border border-gray-500 rounded shadow-md p-2 flex items-center">
-                    <img src="/transitopia-logo-h.svg" alt="Transitopia" className='block h-10 mr-4' />
-                    <div className="w-8 mx-1"></div>
+                <MapOverlayWindow className="top-5 flex items-center">
+                    <img src="/transitopia-logo-h.svg" alt="Transitopia" className='block h-7 lg:h-10 mr-2 lg:mr-4' />
+                    <div className="flex-auto"></div>
                     {/*<LinkWithQuery href="/transit" className="mx-1 p-1  w-8 h-8 text-center rounded-full bg-gray-50 hover:bg-gray-100" classNameActive="!bg-transitBlue"><Icon icon="bus-front-fill" altText="Transit" /></LinkWithQuery>*/}
                     <LinkWithQuery href="/walking" className="mx-1 p-1 w-8 h-8 text-center rounded-full bg-gray-50 hover:bg-gray-100" classNameActive="!bg-pedestrianOrange"><Icon icon="person-walking" altText="Walking" /></LinkWithQuery>
                     <LinkWithQuery href="/cycling" className="mx-1 p-1  w-8 h-8 text-center rounded-full bg-gray-50 hover:bg-gray-100" classNameActive="!bg-cyclistGreen"><Icon icon="bicycle" altText="Cycling" /></LinkWithQuery>
-                </div>
+                </MapOverlayWindow>
                 <Switch>
                     <Route path="/cycling"><CyclingMap /></Route>
                     <Route path="/walking"><WalkingMap /></Route>

diff --git a/src/CyclingMap/CyclingMap.tsx b/src/CyclingMap/CyclingMap.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { mapSource, layers } from "./cycling-map-layers.ts";
 import { useMap, useMapLayerEvent } from "../Map/MapUtils.ts";
 import { MapCyclingElement } from "../Map/MapData.ts";
+import { MapOverlayWindow } from "../Map/MapOverlayWindow.tsx";
 
 export const CyclingMap: React.FC = () => {
 
@@ -107,7 +108,7 @@ export const CyclingMap: React.FC = () => {
     return <>
         {
             selectedFeature ?
-                <div className="absolute w-96 h-60 bg-white z-50 top-24 left-5 border border-gray-500 rounded shadow-md p-2">
+                <MapOverlayWindow className="top-24">
                     <div className="flex">
                         <div className="flex-1">
                             {selectedFeature.name ?
@@ -129,7 +130,7 @@ export const CyclingMap: React.FC = () => {
                             selectedFeature.class === "lane" && selectedFeature.shared_with_vehicles ? <span className="inline-block m-1 px-1 rounded-md bg-red-600 text-white">shared lane</span> :
                                 <span className="inline-block m-1 px-1 rounded-md bg-yellow-200">bike lane on roadway</span>
                     }
-                </div>
+                </MapOverlayWindow>
                 : null
         }
     </>

diff --git a/src/Map/MapOverlayWindow.tsx b/src/Map/MapOverlayWindow.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+/**
+ * Some white rectangle that appears over the map and contains information
+ */
+export function MapOverlayWindow({className, children}: {className?: string, children: React.ReactNode}) {
+    return <div className={`absolute lg:w-96 bg-white z-50 left-5 right-5 lg:right-auto border border-gray-500 rounded shadow-md p-2 ${className}`}>
+        {children}
+    </div>
+}
diff --git a/src/WalkingMap/WalkingMap.tsx b/src/WalkingMap/WalkingMap.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { layers } from "./walking-map-layers.ts";
 import { useMap, useMapZoom } from "../Map/MapUtils.ts";
+import { MapOverlayWindow } from "../Map/MapOverlayWindow.tsx";
 
 export const WalkingMap: React.FC = () => {
 
@@ -22,15 +23,15 @@ export const WalkingMap: React.FC = () => {
     });
 
     return <>
-        <div className="absolute w-96 h-30 bg-white z-50 top-24 left-5 border border-gray-500 rounded shadow-md p-2">
+        <MapOverlayWindow className="top-24">
             The Transitopia walking map is not yet developed, but for now you can see
             all the known pedestrian paths from OpenStreetMap.
-        </div>
+        </MapOverlayWindow>
         {
             zoom < 14 ?
-                <div className="absolute w-96 h-30 bg-white z-50 top-48 left-5 border border-gray-500 rounded shadow-md p-2 font-bold">
+                <MapOverlayWindow className="top-56 lg:top-48">
                     Zoom in to see walkways.
-                </div>
+                </MapOverlayWindow>
             : null
         }
     </>;