From 8de6a218f584ccd1356105b843c3bbc5820ffaf3 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Sun, 20 Dec 2020 14:45:04 +0000
Subject: [PATCH] Responsive improvements

---
 src/components/Sidebar.vue                | 27 +++++++++++++++
 src/leaflet/control/DynmapLayerControl.ts | 11 +++++-
 src/scss/leaflet/_controls.scss           | 41 +++++++++++++++++++++++
 src/scss/style.scss                       |  5 +++
 4 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 1ccc9b8..adeb0ce 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -112,6 +112,20 @@ export default defineComponent({
 				margin-left: 1rem;
 			}
 		}
+
+		@media (max-width: 30rem) {
+			flex-direction: column;
+			align-items: flex-end;
+			margin: 0;
+			position: absolute;
+			right: 0.5rem;
+			top: 0.5rem;
+
+			button + button {
+				margin-left: 0;
+				margin-top: 1rem;
+			}
+		}
 	}
 
 	.sidebar__section {
@@ -137,5 +151,18 @@ export default defineComponent({
 			will-change: transform;
 		}
 	}
+
+	@media (max-width: 30rem), (max-height: 30rem) {
+		padding: 0.5rem;
+	}
+
+	@media (max-width: 30rem) {
+		padding-right: 6.5rem;
+	}
+
+	@media (max-width: 20rem) {
+		box-sizing: border-box;
+		width: 100%;
+	}
 }
 </style>
\ No newline at end of file
diff --git a/src/leaflet/control/DynmapLayerControl.ts b/src/leaflet/control/DynmapLayerControl.ts
index c080b84..6b1f006 100644
--- a/src/leaflet/control/DynmapLayerControl.ts
+++ b/src/leaflet/control/DynmapLayerControl.ts
@@ -17,7 +17,7 @@
  *    limitations under the License.
  */
 
-import {Util, Control, DomEvent, LeafletEvent, Map, Layer} from 'leaflet';
+import {Util, Control, DomEvent, LeafletEvent, Map, Layer, DomUtil} from 'leaflet';
 import layers from '@/assets/icons/layers.svg';
 import LayersObject = Control.LayersObject;
 import LayersOptions = Control.LayersOptions;
@@ -53,6 +53,15 @@ export class DynmapLayerControl extends Control.Layers {
 		return !!super._getLayer(Util.stamp(layer));
 	}
 
+	expand() {
+		// @ts-ignore
+		DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+
+		// @ts-ignore
+		super._checkDisabledLayers();
+		return this;
+	}
+
 	_addItem(obj: any) {
 		const container = obj.overlay ? this._overlaysList : this._baseLayersList,
 			item = document.createElement('label'),
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 1870a87..15fba0b 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -102,6 +102,18 @@
 			margin-left: 2rem;
 		}
 	}
+
+	@media (max-width: 37.5rem) {
+		.region {
+			display: none;
+		}
+	}
+
+	@media (max-width: 24rem) {
+		.chunk {
+			display: none;
+		}
+	}
 }
 
 .leaflet-control-layers {
@@ -115,6 +127,9 @@
 
 	.leaflet-control-layers-list {
 		padding: 0.7rem 1.5rem;
+		height: 100%;
+    	box-sizing: border-box;
+		overflow: auto;
 
 		.layer {
 			cursor: pointer;
@@ -126,6 +141,7 @@
 .leaflet-control-logo {
 	width: 5rem;
 	height: 5rem;
+	flex-shrink: 0;
 
 	a {
 		height: 100%;
@@ -147,6 +163,10 @@
 	.leaflet-control {
 		margin: 0;
 	}
+
+	@media (max-width: 25rem), (max-height: 30rem) {
+		padding-left: 0.5rem;
+	}
 }
 
 .leaflet-top {
@@ -190,6 +210,23 @@
 		margin-top: auto;
 		order: 1000;
 	}
+
+	.leaflet-control-zoom {
+		flex-shrink: 0;
+
+		@media (max-width: 30rem) and (pointer: coarse), (max-height: 30rem) and (pointer: coarse), (max-height: 25rem) {
+			display: none;
+
+			& + .leaflet-control {
+				margin-top: 0;
+			}
+		}
+	}
+
+	@media (max-width: 25rem), (max-height: 30rem) {
+		padding-top: 0.5rem;
+		bottom: 6.5rem;
+	}
 }
 
 .leaflet-bottom {
@@ -199,6 +236,10 @@
 	&.leaflet-left .leaflet-control + .leaflet-control {
 		margin-left: 1rem;
 	}
+
+	@media (max-width: 25rem), (max-height: 30rem) {
+		padding-bottom: 0.5rem;
+	}
 }
 
 .leaflet-center {
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 209a747..cdc0f8e 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -276,6 +276,11 @@ button {
 			font-size: 3rem;
 		}
 	}
+
+	@media (max-width: 30rem), (max-height: 30rem) {
+		transform: scale(calc((1/6)*5));
+    	transform-origin: top center
+	}
 }
 
 /*******************