From 5216fe419f15bab38add61084e46d052ad117aa2 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sat, 18 Oct 2025 22:15:04 +0700 Subject: fix: disable horizontal order for masonry feat: raise width levels for columns count in gallery feat: raise width levels for thumbnails resolution --- internal/glightbox/html_renderer.go | 15 +++++++-------- static/input.css | 4 ++-- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index 44fbd4c..9077cc4 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -113,12 +113,12 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, - - - - - - + + + + + +

%s

 %d @@ -152,8 +152,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, var msnry_%s = new Masonry('.masonry-grid-%s', { itemSelector: '.grid-item-%s', columnWidth: '.grid-sizer-%s', - percentPosition: true, - horizontalOrder: true + percentPosition: true }); var imgLoad_%s_timer; diff --git a/static/input.css b/static/input.css index dc902a4..91c1e05 100644 --- a/static/input.css +++ b/static/input.css @@ -435,7 +435,7 @@ a:hover, .linklike:hover { } } -@container main (width >= 48rem) { +@container main (width >= 56rem) { .grid-item, .grid-sizer { width: 25%; } @@ -445,7 +445,7 @@ a:hover, .linklike:hover { } } -@container main (width >= 64rem) { +@container main (width >= 96rem) { .grid-item, .grid-sizer { width: 20%; } -- cgit v1.3.1+13 From 7275a7813d6ecaba344e25ddb5b24083e4861a76 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sat, 18 Oct 2025 22:17:09 +0700 Subject: fix: show tooltips over leaflet map controls --- static/input.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/input.css b/static/input.css index 91c1e05..49a5890 100644 --- a/static/input.css +++ b/static/input.css @@ -377,7 +377,7 @@ a:hover, .linklike:hover { margin-top: 0.25rem; border-radius: 0.5rem; position: absolute; - z-index: 401; + z-index: 801; } .grid-tooltip:hover .grid-tooltip-text { -- cgit v1.3.1+13 From 7a65150afeb67ab83ac2eb34194601033e3d647d Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sat, 18 Oct 2025 22:44:19 +0700 Subject: feat: uninterruptable lightbox fix: image description taking up all the height in glightbox --- internal/glightbox/html_renderer.go | 13 ++++--------- static/input.css | 3 ++- views/pages/blog-page.html | 5 +++++ 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index 9077cc4..aad7984 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -110,8 +110,8 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, anchorlessCaptionHTML := r.anchorMatchRe.ReplaceAll(captionHTML, []byte("$4")) elements = append(elements, fmt.Sprintf(` - + @@ -122,7 +122,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,

%s

 %d - `, img.URL, galleryID, strings.Join(tagClassList, " "), galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, anchorlessCaptionHTML, i+1)) + `, img.URL, strings.Join(tagClassList, " "), galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, anchorlessCaptionHTML, i+1)) if glightboxDescId != "" { elements = append(elements, fmt.Sprintf(` @@ -144,11 +144,6 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, w.WriteString(fmt.Sprintf(` `, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID)) +`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID)) } return ast.WalkContinue, nil diff --git a/static/input.css b/static/input.css index 49a5890..c308796 100644 --- a/static/input.css +++ b/static/input.css @@ -377,7 +377,7 @@ a:hover, .linklike:hover { margin-top: 0.25rem; border-radius: 0.5rem; position: absolute; - z-index: 801; + z-index: 1001; } .grid-tooltip:hover .grid-tooltip-text { @@ -495,6 +495,7 @@ a:hover, .linklike:hover { .gslide-description { flex-grow: 0; flex-shrink: 1; + flex-basis: 0; } .map-container .leaflet-container { diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html index c9c9e91..77164fa 100644 --- a/views/pages/blog-page.html +++ b/views/pages/blog-page.html @@ -46,6 +46,11 @@ {{ .MapLocationY }}, {{ .MapLocationAreaMeters }} ), 1000); + + var lightbox = GLightbox({ + selector: '.glightbox', + moreLength: 0 + }); {{- end }} -- cgit v1.3.1+13 From f87c9ca31061b232e7e3d71b8cb3c5895c9f77dc Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sat, 18 Oct 2025 22:48:00 +0700 Subject: fix: display theme wheel correctly in map page --- views/pages/global-map.html | 66 ++++++++++++++++++++++++++++----------------- 1 file changed, 42 insertions(+), 24 deletions(-) diff --git a/views/pages/global-map.html b/views/pages/global-map.html index 83078c9..e9236e4 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -38,6 +38,10 @@ @@ -74,6 +79,7 @@ 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) { @@ -93,49 +99,61 @@ } function positionThemeIcons() { - 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 - - icons.forEach((icon, index) => { - const angle = (index * 360 / iconCount) - 90; - const angleRad = (angle * Math.PI) / 180; - - const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize; - const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize; - - icon.style.left = x + 'px'; - icon.style.top = y + 'px'; + 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; + + let points = `${centerX}px ${centerY}px`; + + const segments = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) / 5)); + const angleStep = (endAngle - startAngle) / segments; + + 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})`; + } + function positionThemeWheel() { const buttonRect = themeButton.getBoundingClientRect(); const buttonCenterX = buttonRect.left + buttonRect.width / 2; const buttonCenterY = buttonRect.top + buttonRect.height / 2; - const wheelRadius = calculateVmax(7.5); - const margin = calculateVmax(1); + const margin = 0; - let wheelX = buttonCenterX - wheelRadius; - let wheelY = buttonCenterY - wheelRadius; + let wheelX = buttonCenterX - themeWheelRadius; + let wheelY = buttonCenterY - themeWheelRadius; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; if (wheelX < margin) { wheelX = margin; - } else if (wheelX + (wheelRadius * 2) > viewportWidth - margin) { - wheelX = viewportWidth - (wheelRadius * 2) - margin; + } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) { + wheelX = viewportWidth - (themeWheelRadius * 2) - margin; } if (wheelY < margin) { wheelY = margin; - } else if (wheelY + (wheelRadius * 2) > viewportHeight - margin) { - wheelY = viewportHeight - (wheelRadius * 2) - margin; + } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) { + wheelY = viewportHeight - (themeWheelRadius * 2) - margin; } themeWheel.style.left = wheelX + 'px'; -- cgit v1.3.1+13 From 0aeed432c4fbce4a87b56e4dcb14b25065438300 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sat, 18 Oct 2025 22:49:34 +0700 Subject: fix: stretch map to feel empty space on the right --- views/pages/global-map.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/pages/global-map.html b/views/pages/global-map.html index e9236e4..686b46b 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -69,7 +69,7 @@ -
+
-- cgit v1.3.1+13