Fix map animations on small width screens

Fix overlay layer blocking map interaction
dellisd · Aug 8, 2023 · 24e53d1 · 24e53d1
1 parent 514cbfc
commit 24e53d1
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 5 deletions.
diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/map/MapView.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/map/MapView.kt
@@ -12,7 +12,6 @@ import ca.derekellis.reroute.RerouteConfig
 import ca.derekellis.reroute.ui.View
 import ca.derekellis.reroute.utils.jsObject
 import geojson.Feature
-import kotlinx.browser.window
 import me.tatarka.inject.annotations.Inject
 import org.jetbrains.compose.web.css.height
 import org.jetbrains.compose.web.css.hsl
@@ -37,7 +36,7 @@ class MapView : View<MapViewModel, MapViewEvent> {
         mapState.flyTo(
           center = LngLat(longitude, latitude),
           zoom = 16.0,
-          padding = jsObject { right = window.innerWidth - window.innerHeight },
+          padding = jsObject { right = 512 },
         )
       } else {
         mapState.padding = jsObject { right = 0 }

diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/search/SearchView.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/search/SearchView.kt
@@ -22,7 +22,6 @@ import org.jetbrains.compose.web.css.borderRadius
 import org.jetbrains.compose.web.css.boxSizing
 import org.jetbrains.compose.web.css.cursor
 import org.jetbrains.compose.web.css.display
-import org.jetbrains.compose.web.css.em
 import org.jetbrains.compose.web.css.flexDirection
 import org.jetbrains.compose.web.css.height
 import org.jetbrains.compose.web.css.hsl
@@ -70,7 +69,7 @@ class SearchView : View<SearchViewModel, SearchViewEvent> {
 object SearchStyleSheet : StyleSheet() {
   val searchContainer by style {
     padding(16.px)
-    width(32.em)
+    width(512.px)
     height(auto)
     display(DisplayStyle.Flex)
     flexDirection(FlexDirection.Column)

diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/ui/AppStylesheet.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/ui/AppStylesheet.kt
@@ -34,6 +34,7 @@ object AppStylesheet : StyleSheet() {
     left(0.px)
     width(100.percent)
     height(100.percent)
+    property("pointer-events", "none")
   }
 
   val SmallMediaQuery = mediaMaxWidth(600.px)

diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/ui/InfoPanel.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/ui/InfoPanel.kt
@@ -24,7 +24,7 @@ import org.jetbrains.compose.web.dom.Text
 
 object InfoPanelStylesheet : StyleSheet() {
   val infoPanelContainer by style {
-    width(32.em)
+    width(512.px)
     height(100.percent)
     background("#FFFFFF")
     position(Position.Fixed)