mobile responsive map fields

Author: merelacato

build/blocks/owc-openkaarten/streetmap/client.js

@@ -1,5 +1,5 @@
 {
-    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=21f222bad8813ba2e5e0951c3ae7e810",
-    "/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=0c70cc29722d11466724176fc03cdd58",
+    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=5576cdeb90dc2fb8e0165683c207501b",
+    "/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=b3188898fe0cdd30cad5c03ec8995bf6",
     "/blocks/owc-openkaarten/streetmap/editor.css": "/blocks/owc-openkaarten/streetmap/editor.css?id=f4316f0723fb86e3b028a9b448b1f3ae"
 }

build/blocks/owc-openkaarten/streetmap/client.js.map

@@ -234,7 +234,9 @@ onMounted(() => {
 
 .owc-openkaarten-streetmap-container {
   margin-inline: auto;
-  width: min(calc(100% - 32px), 1440px);
+  @media only screen and (min-width: 768px) {
+    width: min(calc(100% - 32px), 1440px);
+  }
 }
 
 .owc-openkaarten-streetmap *:focus-visible {

build/blocks/owc-openkaarten/streetmap/style.css

@@ -103,7 +103,12 @@ const searchStatus = computed(() => {
 .search-container {
   display: block;
   flex-grow: 1;
+  width: 100%;
   margin-inline-end: 1.5rem;
+  @media only screen and (min-width: 768px) {
+    width: auto;
+    margin-inline-end: 1.5rem;
+  }
 }
 
 .search-form {
@@ -120,10 +125,17 @@ const searchStatus = computed(() => {
 .search-input {
   width: 100%;
   padding: 0.75rem 1rem;
-  padding-inline-end: 5rem; // Space for both buttons
+  padding-inline-end: 4.5rem; // Space for both buttons
   border: 1px solid #7a7a7a;
   border-radius: 4px;
   font-size: 1rem;
+  &::placeholder {
+    overflow: visible;
+    font-size: 14px;
+    @media only screen and (min-width: 768px) {
+      font-size: 16px;
+    }
+  }
 
   &:focus {
     outline: 2px solid var(--search-primary-color);

build/blocks/owc-openkaarten/streetmap/style.css.map

@@ -76,7 +76,7 @@ const toggleView = () => {
 };
 
 const filterButtonHTML = computed(() => makeFilterButtonHTML('Filter', props.primaryColor));
-const mapButtonHTML = computed(() => makeMapButtonHTML('Kaart weergave', props.primaryColor));
+const mapButtonHTML = computed(() => makeMapButtonHTML('Kaart', props.primaryColor));
 
 const handleDatasetChange = (id, checked) => {
   emits('datasetChange', id, checked);
@@ -217,10 +217,12 @@ const handleSearch = (query) => {
 
   &__controls {
     display: flex;
-    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 0.5rem;
     margin-block-end: 0.5rem;
-
+    @media only screen and (min-width: 768px) {
+      justify-content: flex-end;
+    }
     button:not([class*="search"]) {
       align-items: center;
       border: 1px solid #328725;

build/mix-manifest.json

@@ -251,9 +251,9 @@ const initializeMap = (datasets) => {
 					emit('toggleView');
 				});
 
-			const title = 'Lijst weergave';
+			const title = 'Lijst';
 			btn.title = title;
-			btn.innerHTML = makeListViewButtonHTML('Lijst weergave', props.primaryColor);
+			btn.innerHTML = makeListViewButtonHTML('Lijst', props.primaryColor);
 
 			return btn;
 		},
@@ -428,8 +428,12 @@ const handleSearch = async (query) => {
 	}
 
 	&__map {
+    padding-top: 80px;
 		position: relative;
 		overflow: hidden;
+    @media only screen and (min-width: 768px) {
+      padding-top: 0;
+    }
 		.leaflet-marker-icon {
 			&:focus-visible {
 				border-radius: 50%;
@@ -491,12 +495,18 @@ const handleSearch = async (query) => {
 	&__controls {
 		position: absolute;
 		inset-block-start: 20px;
-		inset-inline-start: 20px;
+		inset-inline-start: 10px;
 		z-index: 1000;
 		display: flex;
 		gap: 0.5rem;
-		max-width: min(450px, calc(100% - 2rem));
 		width: 100%;
+    @media only screen and (min-width: 768px) {
+      inset-inline-start: 20px;
+      max-width: min(340px, calc(100% - 2rem));
+    }
+    @media only screen and (min-width: 900px) {
+      max-width: min(450px, calc(100% - 2rem));
+    }
 	}
 }
 </style>

src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/App.vue

@@ -12,9 +12,10 @@
 .leaflet-top {
 	align-items: center;
 	display: flex;
-	justify-content: flex-end;
 	width: 100%;
-
+	@media only screen and (min-width: 768px) {
+		justify-content: flex-end;
+	}
 	> .leaflet-control {
 		margin-top: 10px !important;
 	}