fix(landing): Update map to resize while loading to fix mobile map si…

…ze. (#1706) * Update map to resize while loading. * resize map on load event.
linz · Jun 28, 2021 · d019992 · d019992
1 parent 3da52d1
commit d019992
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 35 deletions.
diff --git a/packages/landing/src/map.ts b/packages/landing/src/map.ts
@@ -61,9 +61,15 @@ export class Basemaps {
             MapAttribution.init(this.map, this.config);
         }
 
+        this.map.on('load', this.resize);
+
         this.map.on('render', this.render);
     }
 
+    resize = (): void => {
+        this.map.resize();
+    };
+
     updateUrlTimer: unknown | null = null;
     render = (): void => {
         if (this.updateUrlTimer != null) return;

diff --git a/packages/landing/static/index.css b/packages/landing/static/index.css
@@ -25,39 +25,10 @@ button {
     flex: 1;
 }
 
-#map .ol-control {
-    background-color: inherit;
-}
-
-#map .ol-zoom button,
-#map .ol-attribution button {
-    cursor: pointer;
-    background-color: white;
-    color: #00425d;
-    margin: 0;
-    width: 28px;
-    height: 32px;
-}
-
-#map .ol-zoom-in {
-    border-radius: 4px 4px 0 0;
-}
-
-#map .ol-zoom-out {
-    border-radius: 0 0 4px 4px;
-}
-
-#map .ol-control button:hover {
-    background-color: #e2f3f7;
-}
-
-#map .ol-attribution {
-    font-size: .8em;
-    background-color: rgba(255, 255, 255, .7);
-}
-
 .checker-board {
-    background-image: linear-gradient(45deg, #00000010 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #00000010 75%), linear-gradient(45deg, transparent 75%, #00000010 75%), linear-gradient(45deg, #00000010 25%, transparent 25%);
+    background-image: linear-gradient(45deg, #00000010 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #00000010 75%), linear-gradient(45deg, transparent 75%, #00000010 75%),
+        linear-gradient(45deg, #00000010 25%, transparent 25%);
     background-size: 100px 100px;
     background-position: 0 0, 0 0, -50px -50px, 50px 50px;
 }
@@ -93,7 +64,7 @@ button {
 .lui-footer a.nz-govt-logo {
     padding: 8px 0 4px 0;
     display: flex;
-    border-bottom: none
+    border-bottom: none;
 }
 
 .nz-govt-logo svg {
@@ -171,7 +142,7 @@ button {
     transition: right 0.5s;
 }
 
-#side-nav>h3 {
+#side-nav > h3 {
     margin: 0;
 }
 
@@ -305,4 +276,4 @@ button {
 .side-nav[aria-hidden='true'] a {
     visibility: hidden;
     transition: 0.5s;
-}
+}