summaryrefslogtreecommitdiff
diff options
from:
to:
context:
space:
mode:
authorGravatar SayaAndy <saya.andy@posteo.com> 2025-10-20 02:24:44 +0700
committerGravatar SayaAndy <saya.andy@posteo.com> 2025-10-20 02:24:44 +0700
commit2cbbaaa40019e452b41c98720af8c23759351200 (patch)
tree265308e5b015c98dbf8ce2c932bac0b01792b46a
parentac438d2b005c8d023a275343ec500aaede347756 (diff)
downloadweb-2cbbaaa40019e452b41c98720af8c23759351200.tar.gz
web-2cbbaaa40019e452b41c98720af8c23759351200.zip
feat: shorten toolbar in global map, paint map on the whole screen
fix: have toolbar buttons' href updated with language change
Diffstat
-rw-r--r--views/layouts/general-page.html33
-rw-r--r--views/pages/global-map.html29
2 files changed, 39 insertions, 23 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index cc66a2c..49c0fae 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -193,21 +193,32 @@
<div class="theme-pin"></div>
</div>
<script>
- function hideButtonsOnRoot() {
+ sidebarHomeButton = document.getElementById("sidebar-home-button");
+ sidebarMapButton = document.getElementById("sidebar-map-button");
+ sidebarBlogButton = document.getElementById("sidebar-blog-button");
+ sidebarBackButton = document.getElementById("sidebar-back-button");
+
+ function updateSidebar() {
if (location.pathname == "" || location.pathname == "/") {
- document.getElementById("sidebar-home-button").classList.add('hidden');
- document.getElementById("sidebar-map-button").classList.add('hidden');
- document.getElementById("sidebar-blog-button").classList.add('hidden');
- document.getElementById("sidebar-back-button").classList.add('hidden');
+ sidebarHomeButton.classList.add('hidden');
+ sidebarMapButton.classList.add('hidden');
+ sidebarBlogButton.classList.add('hidden');
+ sidebarBackButton.classList.add('hidden');
} else {
- document.getElementById("sidebar-home-button").classList.remove('hidden');
- document.getElementById("sidebar-map-button").classList.remove('hidden');
- document.getElementById("sidebar-blog-button").classList.remove('hidden');
- document.getElementById("sidebar-back-button").classList.remove('hidden');
+ sidebarHomeButton.classList.remove('hidden');
+ sidebarMapButton.classList.remove('hidden');
+ sidebarBlogButton.classList.remove('hidden');
+ sidebarBackButton.classList.remove('hidden');
+ lang = location.pathname.split("/")[1];
+ sidebarHomeButton.setAttribute('href', `/${lang}`);
+ sidebarHomeButton.firstElementChild.setAttribute('onclick', `return changeUrl('/${lang}', false);`);
+ sidebarMapButton.setAttribute('href', `/${lang}/map`);
+ sidebarBlogButton.setAttribute('href', `/${lang}/blog`);
+ sidebarBlogButton.firstElementChild.setAttribute('onclick', `return changeUrl('/${lang}/blog', false);`);
}
}
- window.addEventListener("popstate", hideButtonsOnRoot)
- window.addEventListener("load", hideButtonsOnRoot, {once: true});
+ window.addEventListener("popstate", updateSidebar);
+ window.addEventListener("load", updateSidebar, {once: true});
</script>
</div>
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 4b17d16..cd3c2d5 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -12,7 +12,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-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-row ar-lt-0.8:flex-col">
+<body data-theme="ram" class="font-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-[100dvh]">
<script>
function switchTheme(theme) {
@@ -41,21 +41,21 @@
}
</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 class="logo-custom ar-lt-0.8:hidden text-sidebar font-andika 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]">
+ <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-[5rem] h-auto">
+ <div class="text-[3rem] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col gap-0 relative z-1001">
+ <a href="/{{ .Lang }}" class="w-[5rem] h-[5rem]">
<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]">
+ <a href="/{{ .Lang }}/blog" class="w-[5rem] h-[5rem]">
<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]">
+ <a href="/{{ .Lang }}/map" class="w-[5rem] h-[5rem]">
<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>
+ <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] h-[5rem] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i>
+ <a href="./" class="w-[5rem] h-[5rem]">
+ <i class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i>
+ </a>
</div>
<div class="theme-wheel" id="theme-wheel">
<div class="theme-icon" data-theme="olive"></div>
@@ -66,7 +66,7 @@
</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-full h-full"></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>
@@ -225,7 +225,12 @@
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
- attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+ attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+ zoomControl: false
+ }).addTo(map);
+
+ L.control.zoom({
+ position: 'topright'
}).addTo(map);
map.addLayer(markers);
generated by cgitext v1.3.1+13 (git 2.54.0) at 2026-08-20 15:18:04 +0000