Fix VPP map not showing up in Safari (#200)

mbta · Sep 16, 2019 · 0339664 · 0339664
1 parent 0049a6a
commit 0339664
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 13 deletions.
diff --git a/assets/css/_vehicle_map.scss b/assets/css/_vehicle_map.scss
@@ -1,9 +1,3 @@
-.m-vehicle-map {
-  flex: 1 1 auto;
-  margin-top: 1rem;
-  min-height: 5rem;
-}
-
 .m-vehicle-map__label {
   @include font-emph;
 

diff --git a/assets/css/_vehicle_properties_panel.scss b/assets/css/_vehicle_properties_panel.scss
@@ -139,6 +139,18 @@
   color: $color-font-warning;
 }
 
+.m-vehicle-properties-panel__map {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  margin-top: 1rem;
+  min-height: 5rem;
+
+  .m-vehicle-map {
+    flex: 1 0 auto;
+  }
+}
+
 .m-vehicle-properties-panel__data-discrepancies {
   padding: 1rem;
 }

diff --git a/assets/src/components/map.tsx b/assets/src/components/map.tsx
@@ -212,6 +212,7 @@ const Map = (props: Props): ReactElement<HTMLDivElement> => {
   return (
     <div
       id="id-vehicle-map"
+      className="m-vehicle-map"
       ref={container => (containerRef.current = container)}
     />
   )

diff --git a/assets/src/components/vehiclePropertiesPanel.tsx b/assets/src/components/vehiclePropertiesPanel.tsx
@@ -202,7 +202,7 @@ const Location = ({ vehicle }: { vehicle: Vehicle }) => {
         Directions
       </a>
       {!isShuttle(vehicle) && (
-        <div className="m-vehicle-map">
+        <div className="m-vehicle-properties-panel__map">
           <Map vehicles={[vehicle]} centerOnVehicle={vehicle.id} />
         </div>
       )}

diff --git a/assets/tests/components/__snapshots__/map.test.tsx.snap b/assets/tests/components/__snapshots__/map.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`map renders 1`] = `
 <div
+  className="m-vehicle-map"
   id="id-vehicle-map"
 />
 `;
diff --git a/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap b/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
@@ -102,6 +102,7 @@ exports[`Shuttle Map Page renders 1`] = `
     }
   >
     <div
+      className="m-vehicle-map"
       id="id-vehicle-map"
     />
   </div>
@@ -210,6 +211,7 @@ exports[`Shuttle Map Page renders a selected shuttle vehicle 1`] = `
     }
   >
     <div
+      className="m-vehicle-map"
       id="id-vehicle-map"
     />
   </div>
@@ -493,6 +495,7 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
     }
   >
     <div
+      className="m-vehicle-map"
       id="id-vehicle-map"
     />
   </div>

diff --git a/assets/tests/components/__snapshots__/vehiclePropertiesPanel.test.tsx.snap b/assets/tests/components/__snapshots__/vehiclePropertiesPanel.test.tsx.snap
@@ -272,9 +272,10 @@ Array [
         Directions
       </a>
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-properties-panel__map"
       >
         <div
+          className="m-vehicle-map"
           id="id-vehicle-map"
         />
       </div>
@@ -565,9 +566,10 @@ Array [
         Directions
       </a>
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-properties-panel__map"
       >
         <div
+          className="m-vehicle-map"
           id="id-vehicle-map"
         />
       </div>
@@ -858,9 +860,10 @@ Array [
         Directions
       </a>
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-properties-panel__map"
       >
         <div
+          className="m-vehicle-map"
           id="id-vehicle-map"
         />
       </div>
@@ -1441,9 +1444,10 @@ Array [
         Directions
       </a>
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-properties-panel__map"
       >
         <div
+          className="m-vehicle-map"
           id="id-vehicle-map"
         />
       </div>
@@ -1738,9 +1742,10 @@ Array [
         Directions
       </a>
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-properties-panel__map"
       >
         <div
+          className="m-vehicle-map"
           id="id-vehicle-map"
         />
       </div>
@@ -2031,9 +2036,10 @@ Array [
         Directions
       </a>
       <div
-        className="m-vehicle-map"
+        className="m-vehicle-properties-panel__map"
       >
         <div
+          className="m-vehicle-map"
           id="id-vehicle-map"
         />
       </div>