Improve documentation compatibility with small screens

Author: tjdavey

docs/assets/css/style.scss

@@ -46,19 +46,70 @@
 }
 
 .header-buttons .btn, .header-buttons .btn+btn {
-  margin: 0.5em 1em;
+  margin: 0.5em 0;
   width: 100%;
 }
 
+@media only screen and (max-width: 1000px) {
+  .header-content {
+    max-width: 100%;
+    width: 100%;
+    padding: 0 6rem;
+    margin: 0 auto;
+  }
+
+  .header-options {
+    flex-direction: column;
+    gap: 1em;
+  }
+
+  .header-buttons {
+    border-left: none;
+    padding: 0;
+  }
+}
+
+@media only screen and (max-width: 780px) {
+  .header-content {
+    max-width: 100%;
+    width: 100%;
+    padding: 0 4rem;
+  }
+}
+
+@media only screen and (max-width: 672px) {
+  .header-content {
+    max-width: 100%;
+    width: 100%;
+    padding: 0 2rem;
+  }
+}
+
+@media only screen and (max-width: 520px) {
+  .header-content {
+    max-width: 100%;
+    width: 100%;
+    padding: 0;
+  }
+
+  .install-instructions {
+    display: none;
+  }
+}
+
 .map-preview {
   margin: 0 auto;
   border-radius: 0.3rem;
+  height: 300px;
+  width: 100%;
+  max-width: 600px;
 }
 
 #map-main-preview-area {
   border: 1px solid #ddd;
   background-color: #f3f6fa;
-  width: 620px;
+  width: 100%;
+  max-width: 620px;
   padding: 10px;
   margin: 0 auto;
   border-radius: 0.3rem;
@@ -75,13 +126,15 @@
 #map-main-preview-info {
   display: flex;
   flex-direction: row;
-  gap: 3em;
+  flex-wrap: wrap;
+  gap: 0.5em 3em;
   font-size: 0.8em;
 }
 
 #map-main-preview-info div {
   display: flex;
   flex-direction: row;
+  flex-wrap: nowrap;
   gap: 0.5em;
 }
 

docs/index.markdown

@@ -21,7 +21,7 @@ minimum bounding rectangle.
       <label class="map-main-preview-fit-label" for="map-main-preview-fit-bbox">Bounding Box</label>
     </fieldset>
 
-    <div id="map-main-preview" class="map-preview" style="width: 600px; height: 300px;"></div>
+    <div id="map-main-preview" class="map-preview"></div>
 
     <div id="map-main-preview-info">
       <div>
@@ -118,7 +118,7 @@ This padding object is identical to the [Mapbox GL JS `paddingOptions` object](h
   );
 ```
 
-<div id="map-padding-preview" class="map-preview" style="width: 600px; height: 300px;"></div>
+<div id="map-padding-preview" class="map-preview"></div>
 
 #### Bearing Preference
 
@@ -136,7 +136,7 @@ This defaults to `0` which prefers to point the map in a northerly bearing.
   );
 ```
 
-<div id="map-bearing-preview" class="map-preview" style="width: 600px; height: 300px;"></div>
+<div id="map-bearing-preview" class="map-preview"></div>
 
 ### Additional Features and Documentation
 

docs/src/main.ts

@@ -10,8 +10,8 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 
 window.addEventListener("load", (event) => {
   setupMapMainPreview();
-  setupPaddingMap();
-  setupBearingMap();
+  addMap('map-padding-preview', {padding: {top: 50, bottom: 50, left: 100, right: 100}});
+  addMap('map-bearing-preview', {preferredBearing: 45});
   setupCodePreview();
 });
 
@@ -22,15 +22,18 @@ function setupMapMainPreview() {
     top: 10,
     bottom: 10
   }
-  const bestFit = mapFitFeatures(
-    sampleData as GeoJSON.FeatureCollection,
-    [600, 300],
-    {maxZoom: 8, padding});
-  const boundingBox = turf.bbox(sampleData as GeoJSON.FeatureCollection);
+  const mapId = 'map-main-preview';
+
+  const previewMap = addMap(mapId, {padding});
 
   document.getElementById('map-main-preview-fit-bestFit').addEventListener('change', function() {
     const radioButton = this as HTMLInputElement;
 
+    const bestFit = mapFitFeatures(
+      sampleData as GeoJSON.FeatureCollection,
+      [document.getElementById(mapId).clientWidth, document.getElementById(mapId).clientHeight],
+      {maxZoom: 8, padding});
+
     if (radioButton.checked) {
       previewMap.easeTo({
         center: bestFit.center,
@@ -43,22 +46,13 @@ function setupMapMainPreview() {
   document.getElementById('map-main-preview-fit-bbox').addEventListener('change', function() {
     const radioButton = this as HTMLInputElement;
 
+    const boundingBox = turf.bbox(sampleData as GeoJSON.FeatureCollection);
+
     if (radioButton.checked) {
       previewMap.fitBounds(boundingBox as LngLatBoundsLike, {padding});
     }
   });
 
-  const previewMap = new Map({
-    container: 'map-main-preview',
-    style: 'https://demotiles.maplibre.org/style.json',
-    center: bestFit.center,
-    bearing: bestFit.bearing,
-    zoom: bestFit.zoom,
-    interactive: false,
-  });
-
-  addSampleDataToMap(previewMap);
-
   function updateMapInfo() {
     document.getElementById('map-main-preview-info-center').innerText = `${previewMap.getCenter().toArray().map((coord => coord.toFixed(4))).join(', ')}`;
     document.getElementById('map-main-preview-info-zoom').innerText = `${previewMap.getZoom().toFixed(2)}`;
@@ -73,21 +67,24 @@ function setupMapMainPreview() {
 }
 
 function setupPaddingMap() {
+  const padding ={
+    top: 50,
+    bottom: 50,
+    left: 100,
+    right: 100
+  }
+  const mapId = 'map-padding-preview';
+
   const fit = mapFitFeatures(
     sampleData as GeoJSON.FeatureCollection,
-    [600, 300],
+    [document.getElementById(mapId).clientWidth, document.getElementById(mapId).clientHeight],
     {
-      padding: {
-        top: 50,
-        bottom: 50,
-        left: 100,
-        right: 100
-      }
+      padding
     }
   );
 
   const paddingMap = new Map({
-    container: 'map-padding-preview',
+    container: mapId,
     style: 'https://demotiles.maplibre.org/style.json',
     center: fit.center,
     bearing: fit.bearing,
@@ -96,27 +93,11 @@ function setupPaddingMap() {
   });
 
   addSampleDataToMap(paddingMap);
+  setupMapResize(paddingMap, 'map-padding-preview', padding);
 }
 
 function setupBearingMap() {
-  const fit = mapFitFeatures(
-    sampleData as GeoJSON.FeatureCollection,
-    [600, 300],
-    {
-      preferredBearing: 180
-    }
-  );
-
-  const bearingMap = new Map({
-    container: 'map-bearing-preview',
-    style: 'https://demotiles.maplibre.org/style.json',
-    center: fit.center,
-    bearing: fit.bearing,
-    zoom: fit.zoom,
-    interactive: false,
-  });
 
-  addSampleDataToMap(bearingMap);
 }
 
 function setupCodePreview() {
@@ -139,6 +120,28 @@ function setupCodePreview() {
   });
 }
 
+function addMap(mapId, fitOptions) {
+  const fit = mapFitFeatures(
+    sampleData as GeoJSON.FeatureCollection,
+    [document.getElementById(mapId).clientWidth, document.getElementById(mapId).clientHeight],
+    fitOptions
+  );
+
+  const map = new Map({
+    container: mapId,
+    style: 'https://demotiles.maplibre.org/style.json',
+    center: fit.center,
+    bearing: fit.bearing,
+    zoom: fit.zoom,
+    interactive: false,
+  });
+
+  addSampleDataToMap(map);
+  setupMapResize(map, mapId, fitOptions.padding || {});
+
+  return map;
+}
+
 function addSampleDataToMap(map) {
   map.on('load', () => {
     map.addSource('sample-data', {
@@ -160,4 +163,19 @@ function addSampleDataToMap(map) {
   });
 }
 
+function setupMapResize(map, id, padding) {
+  window.addEventListener('resize', () => {
+    if(window.innerWidth < 720) {
+      // Window is small enough to begin impacting the width of the maps. Recalculate the map size to fit the new window size.
+      const fit = mapFitFeatures(
+        sampleData as GeoJSON.FeatureCollection,
+        [document.getElementById(id).clientWidth, document.getElementById(id).clientHeight],
+        {maxZoom: 8, padding});
+
+      map.easeTo(fit);
+    }
+
+  });
+}
+