Increased height for thetrack browser (#16) and testing the onClick handler on paths (#17)

src/components/map/Gpx.tsx

@@ -6,7 +6,6 @@ import { lat2tile, lon2tile } from '../../lib/geo';
 import { zoom0 } from '../../store/map';
 
 const Gpx: React.FC<{ gpx: any }> = (props) => {
-
   var trkpts: any[] = [];
 
   trkpts = useFind({
@@ -18,13 +17,18 @@ const Gpx: React.FC<{ gpx: any }> = (props) => {
     //   use_index: 'type-trkpt-gpx-time3',
   });
 
-  console.log(`rendering gpx, subtype:"${props.gpx.subtype}", ${trkpts.length} points`);
-
+  console.log(
+    `rendering gpx, subtype:"${props.gpx.subtype}", ${trkpts.length} points`
+  );
 
   trkpts.sort((first: any, second: any) =>
     first.trkpt.time.localeCompare(second.trkpt.time)
   );
 
+  const clickHandler = (event: any) => {
+    console.log(`gpx (${JSON.stringify(props.gpx)}) clicked.`);
+  };
+
   //  console.log(`gpx: ${JSON.stringify(props.gpx)}`);
 
   const d = trkpts.reduce((previous: string, current: any, index: number) => {
@@ -36,7 +40,13 @@ const Gpx: React.FC<{ gpx: any }> = (props) => {
     )}`;
   }, '');
 
-  return <path d={d} className={`track ${props.gpx.subtype}`} />;
+  return (
+    <path
+      d={d}
+      className={`track ${props.gpx.subtype}`}
+      onClick={clickHandler}
+    />
+  );
 };
 
 export default Gpx;

src/components/map/TracksBrowser.tsx

@@ -40,6 +40,7 @@ const TrackBrowser: React.FC<{}> = () => {
       </IonButton>
       <IonModal
         ref={modal}
+        className='full-height'
         trigger='track-browser-button'
         enterAnimation={enterAnimation}
         leaveAnimation={leaveAnimation}

src/theme/map.css

@@ -50,6 +50,10 @@ ion-modal {
     0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
+ion-modal.full-height {
+  --height: 99%;
+}
+
 /* ion-modal::part(backdrop) {
   background: rgba(209, 213, 219);
   opacity: 1;