Skip to content

Commit 894d895

Browse files
p3t3r67x0p3t3r67x0
committed
refactor mobile and desktop layer for details
1 parent 6cc32c1 commit 894d895

File tree

3 files changed

+56
-21
lines changed

3 files changed

+56
-21
lines changed

‎pnpm-lock.yaml‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.html‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,24 @@
2121
<meta content="width=device-width, initial-scale=1.0" name="viewport">
2222
</head>
2323

24-
<body class="relative flex justify-center flex-col h-dvh w-full">
25-
<div class="relative sm:flex sm:flex-row w-full h-dvh overflow-hidden">
26-
<div class="h-dvh flex flex-col w-full xs:w-5/12 sm:w-6/12 md:w-7/12 lg:w-8/12 xl:w-9/12">
27-
<div id="map" class="h-[95dvh] w-full"></div>
24+
<body class="min-h-screen w-full bg-white text-gray-900">
25+
<div class="relative flex h-dvh w-full flex-col overflow-hidden md:flex-row">
26+
<div id="mapContainer"
27+
class="order-2 flex min-h-[45dvh] w-full flex-1 flex-col md:order-1 md:h-full md:min-h-0 md:flex-1">
28+
<div id="map" class="relative h-full w-full"></div>
2829
<footer
29-
class="grow w-full bg-gray-200 border-t md:border-t border-gray-300 text-sm flex justify-center items-center">
30+
class="flex w-full items-center justify-center border-t border-gray-300 bg-gray-200 px-4 py-3 text-sm md:border-none">
3031
<a class="inline-block text-gray-700 hover:text-blue-800 focus:text-blue-800"
31-
href="./impressum.html">Impressum</a> <span class="inline-block text-gray-700 px-3">|</span> <a
32+
href="./impressum.html">Impressum</a> <span class="inline-block px-3 text-gray-700">|</span> <a
3233
class="inline-block text-gray-700 hover:text-blue-800 focus:text-blue-800"
3334
href="./impressum.html#privacypolicy">Datenschutzerklärung</a> <span
34-
class="inline-block text-gray-700 px-3">|</span> <a
35+
class="inline-block px-3 text-gray-700">|</span> <a
3536
class="inline-block text-gray-700 hover:text-blue-800 focus:text-blue-800" href="./lizenz.html">Lizenz</a>
3637
</footer>
3738
</div>
3839

3940
<div id="sidebar"
40-
class="absolute left-0 bottom-0 max-h-[45dvh] sm:max-h-dvh sm:block sm:relative w-full xs:w-7/12 sm:w-6/12 md:w-5/12 lg:w-4/12 xl:w-3/12 overflow-scroll bg-gray-100 z-1200">
41+
class="order-1 relative bottom-0 left-0 right-0 z-50 flex max-h-[55dvh] flex-col overflow-y-auto border-b border-gray-300 bg-gray-100/95 px-3 pb-6 pt-4 shadow-lg transition-transform duration-300 ease-in-out md:order-2 md:relative md:bottom-auto md:left-auto md:right-auto md:top-auto md:h-full md:max-h-full md:w-96 md:border-b-0 md:border-l md:bg-gray-100 md:px-6 md:py-8 md:shadow-none lg:w-[28rem]">
4142
<div id="sidebarCloseWrapper" class="absolute right-3 top-3 z-1300 sm:hidden">
4243
<a id="sidebarCloseButton"
4344
class="flex justify-center items-center relative inline-block shadow-md bg-gray-200 text-sky-900 hover:bg-gray-300 focus:bg-gray-300 active:bg-gray-300 rounded-full w-8 h-8 cursor-pointer font-bold"
@@ -50,16 +51,16 @@
5051
</a>
5152
</div>
5253

53-
<div id="sidebarHeader" class="py-2 px-3 mb-4 lg:mb-8">
54-
<h1 class="tracking-normal leading-normal font-bold text-2xl md:text-3xl lg:text-4xl mb-1">Digitale Denkmalkarte
54+
<div id="sidebarHeader" class="mb-4 lg:mb-8">
55+
<h1 class="mb-1 text-2xl font-bold leading-normal tracking-normal md:text-3xl lg:text-4xl">Digitale Denkmalkarte
5556
</h1>
56-
<h2><a href="/" class="text-xl md:text-2xl text-gray-700 hover:text-blue-700 focus:text-blue-800"
57-
title="Stadtplan Schleswig-Holstein">Open Data Schleswig-Holstein</a></h2>
57+
<h2><a href="/" class="text-xl text-gray-700 hover:text-blue-700 focus:text-blue-800 md:text-2xl"
58+
title="Stadtplan Schleswig-Holstein">Open Data für Schleswig-Holstein</a></h2>
5859
</div>
5960

60-
<div class="mt-3 md:mt-6 py-2 px-3" id="about">
61+
<div class="mt-3 md:mt-6" id="about">
6162
<form id="geoLocation" enctype="application/x-www-form-urlencoded">
62-
<div class="mx-3 mb-8">
63+
<div class="mb-8">
6364
<label class="relative inline-flex items-center cursor-pointer">
6465
<input type="checkbox" name="myLocation" value="true" class="sr-only peer">
6566
<div
@@ -97,7 +98,7 @@ <h3 class="font-bold text-xl md:text-2xl mb-1">Open Source und frei nutzbar</h3>
9798
</div>
9899

99100
<div id="sidebarContent"
100-
class="relative bg-white border border-slate-300 leading-normal lg:text-lg m-3 rounded text-black text-md hidden">
101+
class="relative m-0 hidden rounded border border-slate-300 bg-white text-md leading-normal lg:text-lg md:m-0 md:mt-4">
101102
<style>
102103
#detailImage {
103104
display: none;
@@ -116,4 +117,4 @@ <h3 class="font-bold text-xl md:text-2xl mb-1">Open Source und frei nutzbar</h3>
116117
<script type="module" src="./main.js"></script>
117118
</body>
118119

119-
</html>
120+
</html>

‎src/main.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const markerClusterGroup = L.markerClusterGroup({
2323
disableClusteringAtZoom: 19
2424
})
2525
let zoomControl = L.control.zoom({ position: 'bottomright' }).addTo(map)
26+
const mapContainer = document.querySelector('#mapContainer')
2627

2728
// Marker icons
2829
const defaultIcon = L.icon({
@@ -45,6 +46,28 @@ let isBoundsSet = false
4546
let previousSelectedMarker = null
4647
let currentLayer = null
4748

49+
function resetSelectedMarker() {
50+
if (!previousSelectedMarker || typeof previousSelectedMarker.setIcon !== 'function') {
51+
previousSelectedMarker = null
52+
return
53+
}
54+
previousSelectedMarker.setIcon(defaultIcon)
55+
previousSelectedMarker = null
56+
}
57+
58+
function refreshMapSize(delay = 0) {
59+
if (!mapContainer) {
60+
return
61+
}
62+
const invalidate = () => map.invalidateSize()
63+
if (delay > 0) {
64+
setTimeout(invalidate, delay)
65+
}
66+
else {
67+
requestAnimationFrame(invalidate)
68+
}
69+
}
70+
4871
// Utility functions
4972
function capitalizeEachWord(str) {
5073
return str.replace(/-/g, ' ').replace(/\w\S*/g, (txt) =>
@@ -290,6 +313,11 @@ function renderMonumentMeta(data) {
290313
document.querySelector('#sidebar').classList.add('absolute')
291314
document.querySelector('#sidebar').classList.remove('hidden')
292315
document.querySelector('#sidebarContent').classList.remove('hidden')
316+
if (mapContainer) {
317+
mapContainer.classList.remove('h-full')
318+
mapContainer.classList.add('min-h-[45dvh]')
319+
}
320+
refreshMapSize(100)
293321
}
294322

295323
function cleanMonumentMeta() {
@@ -299,6 +327,12 @@ function cleanMonumentMeta() {
299327
document.querySelector('#sidebar').classList.remove('absolute')
300328
document.querySelector('#about').classList.remove('hidden')
301329
document.querySelector('#sidebarContent').classList.add('hidden')
330+
resetSelectedMarker()
331+
if (mapContainer) {
332+
mapContainer.classList.add('h-full')
333+
mapContainer.classList.remove('min-h-[45dvh]')
334+
}
335+
refreshMapSize(100)
302336
}
303337

304338
function navigateTo(screen, updateHistory = true) {
@@ -387,4 +421,4 @@ window.addEventListener('popstate', (event) => {
387421
})
388422

389423
window.addEventListener('resize', handleWindowSize)
390-
handleWindowSize()
424+
handleWindowSize()

0 commit comments

Comments
 (0)