Change icons. Minor other improvements

bengawalk · Aug 11, 2024 · 1a8aa18 · 1a8aa18
1 parent a3f03c8
commit 1a8aa18
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 32 deletions.
diff --git a/src/assets/icon-bus-route-new.svg b/src/assets/icon-bus-route-new.svg
diff --git a/src/assets/icon-bus-stop-new.svg b/src/assets/icon-bus-stop-new.svg
diff --git a/src/components/bottom_tray.jsx b/src/components/bottom_tray.jsx
@@ -65,9 +65,9 @@ class BottomTray extends React.PureComponent {
     }
 
     onPointerDown = (e) => {
-        if (window.innerWidth > 999) {
-          return;
-        }
+        // if (window.innerWidth > 999) {
+        //   return;
+        // }
         const [x, y] = getCoordinatesFromEvent(e);
         this.mouseTime = performance.now();
         this.setState({ x, y });

diff --git a/src/index.scss b/src/index.scss
@@ -322,16 +322,16 @@ body {
 .search-result-item {
   display: flex;
   margin: 0 0 10px;
-  align-items: flex-start;
+  align-items: center;
   padding: 5px 0 10px;
   color: inherit;
   text-decoration: none;
 }
 
 .search-item-icon {
   margin-right: 8px;
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
 }
 
 .search-item-text {
@@ -344,15 +344,15 @@ body {
   text-decoration: none;
 }
 
-.bus_number {
-  background-color: #1A73E9;
-  border: 2px solid #1967D3;
-  border-radius: 4px;
-  color: #ffffff;
-  font-weight: bold;
-  font-size: 0.7rem;
-  padding: 0 6px;
-}
+// .bus_number {
+//   background-color: #1A73E9;
+//   border: 2px solid #1967D3;
+//   border-radius: 4px;
+//   color: #ffffff;
+//   font-weight: bold;
+//   font-size: 0.7rem;
+//   padding: 0 6px;
+// }
 
 .search-result-favourite {
   background-color: transparent;

diff --git a/src/landing/index.jsx b/src/landing/index.jsx
@@ -5,7 +5,7 @@ import {MAPBOX_TOKEN, MAX_HISTORY_LENGTH, ROUTES} from "../utils/constants.js";
 
 import { Icon } from '@iconify/react';
 import Sidebar from "./sidebar.jsx";
-import {Link, useLocation} from "react-router-dom";
+import { Link } from "react-router-dom";
 import SearchResultItem from "../search/search_result_item.jsx";
 
 mapboxgl.accessToken = MAPBOX_TOKEN;
@@ -91,13 +91,4 @@ class LandingPage extends React.PureComponent {
   }
 }
 
-const LandingPageWithRouter = () => {
-  const location = useLocation();
-  console.log(location);
-  return (
-    <LandingPage />
-  )
-};
-
-
-export default LandingPageWithRouter;
+export default LandingPage;
diff --git a/src/route/index.jsx b/src/route/index.jsx
@@ -36,6 +36,7 @@ class RoutePage extends React.PureComponent {
       // lat: 12.977529081680132,
       // lng: 77.57247169985196,
       // zoom: 11,
+      tripIndex: 0,
       supported: mapboxgl.supported(),
       isFavourited: false,
     };
@@ -122,7 +123,7 @@ class RoutePage extends React.PureComponent {
 
 
     // Update route line data
-    const coordinates = routeDetails.shapeInformation.line;
+    const coordinates = routeDetails.shapeInformation[0].line;
     afterMapLoad(this.map, () => {
       this.map.getSource('route').setData({
           'type': 'Feature',
@@ -136,7 +137,7 @@ class RoutePage extends React.PureComponent {
       // Set map boundaries to the line
       const bounds = new mapboxgl.LngLatBounds(coordinates[0],coordinates[0]);
       for (const coord of coordinates) { bounds.extend(coord); }
-      this.map.fitBounds(bounds, { padding: 20 });
+      this.map.fitBounds(bounds, { padding: { left: 20, right: 20, top: 20, bottom: 220 }});
 
       // Add start and end markers
       const sourceDetails = _.find(
@@ -202,6 +203,7 @@ class RoutePage extends React.PureComponent {
     const { routeDetails, isFavourited } = this.state;
     const [from, to] = (routeDetails?.route_long_name || "").split("→");
 
+    // console.log(routeDetails);
     return (
       <>
         <div id="map" ref={this.mapContainer} className="map-container" />

diff --git a/src/search/search_result_item.jsx b/src/search/search_result_item.jsx
@@ -1,17 +1,22 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import IconBusStop from "../assets/icon_bus_stop.svg";
-import IconBusNumber from "../assets/icon_bus_number.svg";
+// import IconBusStop from "../assets/icon_bus_stop.svg";
+// import IconBusNumber from "../assets/icon_bus_number.svg";
 import IconMetroPurple from "../assets/icon_metro_purple.svg";
 import IconMetroGreen from "../assets/icon_metro_green.svg";
 import IconLocation from "../assets/icon_location.svg";
+
+import IconBusStopNew from "../assets/icon-bus-stop-new.svg";
+import IconBusRouteNew from "../assets/icon-bus-route-new.svg";
+
 import {SEARCH_RESULT_TYPES} from "../utils/constants.js";
 import {Icon} from "@iconify/react/dist/iconify.js";
 
+
 const IconForResultType = {
-  [SEARCH_RESULT_TYPES.bus_stop]: IconBusStop,
-  [SEARCH_RESULT_TYPES.bus_number]: IconBusNumber,
+  [SEARCH_RESULT_TYPES.bus_stop]: IconBusStopNew,
+  [SEARCH_RESULT_TYPES.bus_number]: IconBusRouteNew,
   [SEARCH_RESULT_TYPES.metro_station_green]: IconMetroGreen,
   [SEARCH_RESULT_TYPES.metro_station_purple]: IconMetroPurple,
   [SEARCH_RESULT_TYPES.location]: IconLocation,