From ea4886444ad420cc06b794d275d672e152c20c35 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Tue, 19 Aug 2025 22:05:41 +0700 Subject: feat: use custom color markers for global map --- static/input.css | 14 ++++++++++++++ views/pages/global-map.html | 21 +++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/static/input.css b/static/input.css index 8c0069b..4751774 100644 --- a/static/input.css +++ b/static/input.css @@ -283,6 +283,20 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar { border: 0.3vmax outset var(--main-light-color); } +.custom-svg-marker { + background: transparent; + border: none; +} + +.custom-svg-marker svg { + filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3)); + transition: transform 0.2s; +} + +.custom-svg-marker:hover svg { + transform: scale(1.1); +} + .lg-backdrop { background-color: var(--background-light-color); opacity: 0.8 !important; diff --git a/views/pages/global-map.html b/views/pages/global-map.html index 05c39a1..6185076 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -179,6 +179,26 @@ var map; var markers = L.markerClusterGroup(); + function createCustomIcon(color, borderColor = "var(--main-light-color)") { + const svgIcon = ` + + + + `; + + return L.divIcon({ + html: svgIcon, + className: 'custom-svg-marker', + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -32] + }); + } + function initLocationMap() { map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4); @@ -218,6 +238,7 @@ } var marker = L.marker([x, y], { + icon: createCustomIcon(titleColor), title: title, }).bindPopup(`
-- cgit v1.3.1+13 From b815b74d7a943d1f71a0ddcf6b343d3958d2b97a Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Wed, 20 Aug 2025 15:57:28 +0700 Subject: feat: if gallery has only a single item, raise picture height --- static/input.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/input.css b/static/input.css index 4751774..9f834a6 100644 --- a/static/input.css +++ b/static/input.css @@ -341,6 +341,10 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar { bottom: calc(10vmin + 5vmax) !important; } +.lg-outer[class~="lg-single-item"] .lg-content { + bottom: 5vmax !important; +} + .lg-thumb-item { width: 10vmin !important; height: 10vmin !important; -- cgit v1.3.1+13