Diffstat (limited to 'views/pages/global-map.html')
| -rw-r--r-- | views/pages/global-map.html | 88 |
1 files changed, 32 insertions, 56 deletions
diff --git a/views/pages/global-map.html b/views/pages/global-map.html index 686b46b..569166f 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>{{ .L.GlobalMap.Header }} // SAYA TODAY</title> + <title>SAYA TODAY // {{ .L.GlobalMap.Header }}</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> @@ -15,7 +15,7 @@ <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"> </head> -<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-row ar-lt-0.8:flex-col"> +<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col"> <script> function switchTheme(theme) { @@ -38,38 +38,27 @@ <script> const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; - - function convertRemToPixels(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); - } </script> - <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5rem] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]"> + <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5vw] ar-lt-0.8:w-screen h-screen ar-lt-0.8:h-[8vh]"> <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20"> saya.today </div> - <div class="text-[3rem] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20"> - <a href="/{{ .Lang }}" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> - <i class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> - </a> - <a href="/{{ .Lang }}/blog" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> - <i class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> - </a> - <a href="/{{ .Lang }}/map" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> - <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> - </a> - <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> + <div class="text-[3vw] ar-lt-0.8:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20"> + <i onclick="location.href='/';" class="fas fa-home w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> + <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> + <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> + <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> </div> <div class="theme-wheel" id="theme-wheel"> <div class="theme-icon" data-theme="olive"></div> <div class="theme-icon" data-theme="lettuce"></div> <div class="theme-icon" data-theme="night"></div> <div class="theme-icon" data-theme="ram"></div> - <div class="theme-pin"></div> </div> </div> - <div id="map-container" class="bg-background-dark flex z-10 w-[calc(100dvw-5rem)] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[92dvh]"></div> + <div id="map-container" class="bg-background-dark flex z-10 w-[95vw] ar-lt-0.8:w-screen h-screen ar-lt-0.8:h-[92vh]"></div> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script> @@ -79,7 +68,6 @@ const themeWheel = document.getElementById('theme-wheel'); const themeButton = document.getElementById('theme-button'); const themeIcons = document.querySelectorAll('.theme-icon'); - const themeWheelRadius = convertRemToPixels(6); themeIcons.forEach(icon => { if (icon.getAttribute('data-theme') == savedTheme) { @@ -99,36 +87,23 @@ } function positionThemeIcons() { - const sliceAngle = 360 / themeIcons.length; - - themeIcons.forEach((icon, index) => { - const startAngle = index * sliceAngle; - const endAngle = (index + 1) * sliceAngle; - - const clipPath = createSliceClipPath(startAngle, endAngle, themeWheelRadius); - icon.style.clipPath = clipPath; - }); - } - - function createSliceClipPath(startAngle, endAngle, radius) { - const centerX = radius; - const centerY = radius; + const icons = themeWheel.querySelectorAll('.theme-icon'); + const iconCount = icons.length; + const vmax = calculateVmax(1); + const wheelRadius = 7.5*vmax; // Radius of the wheel + const iconRadius = 4*vmax; // Distance from center to place icons + const iconSize = 3*vmax; // Half of icon size for centering - let points = `${centerX}px ${centerY}px`; + icons.forEach((icon, index) => { + const angle = (index * 360 / iconCount) - 90; + const angleRad = (angle * Math.PI) / 180; - const segments = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) / 5)); - const angleStep = (endAngle - startAngle) / segments; + const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize; + const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize; - for (let i = 0; i <= segments; i++) { - const angle = ((startAngle + angleStep * i - 90) * Math.PI) / 180; - const x = centerX + Math.cos(angle) * radius; - const y = centerY + Math.sin(angle) * radius; - points += `, ${x}px ${y}px`; - } - - points += `, ${centerX}px ${centerY}px`; - - return `polygon(${points})`; + icon.style.left = x + 'px'; + icon.style.top = y + 'px'; + }); } function positionThemeWheel() { @@ -136,24 +111,25 @@ const buttonCenterX = buttonRect.left + buttonRect.width / 2; const buttonCenterY = buttonRect.top + buttonRect.height / 2; - const margin = 0; + const wheelRadius = calculateVmax(7.5); + const margin = calculateVmax(1); - let wheelX = buttonCenterX - themeWheelRadius; - let wheelY = buttonCenterY - themeWheelRadius; + let wheelX = buttonCenterX - wheelRadius; + let wheelY = buttonCenterY - wheelRadius; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; if (wheelX < margin) { wheelX = margin; - } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) { - wheelX = viewportWidth - (themeWheelRadius * 2) - margin; + } else if (wheelX + (wheelRadius * 2) > viewportWidth - margin) { + wheelX = viewportWidth - (wheelRadius * 2) - margin; } if (wheelY < margin) { wheelY = margin; - } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) { - wheelY = viewportHeight - (themeWheelRadius * 2) - margin; + } else if (wheelY + (wheelRadius * 2) > viewportHeight - margin) { + wheelY = viewportHeight - (wheelRadius * 2) - margin; } themeWheel.style.left = wheelX + 'px'; @@ -266,7 +242,7 @@ title: title, }).bindPopup(` <div class="flex flex-row justify-center justify-items-center"> - <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/${thumbnail}.webp"> + <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[3vmax] h-[3vmax] mr-[0.5vmax]" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/${thumbnail}.webp"> <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span> </div>`); |