| -rw-r--r-- | internal/glightbox/html_renderer.go | 11 | ||||
| -rw-r--r-- | internal/router/router.go | 5 | ||||
| -rw-r--r-- | static/input.css | 16 | ||||
| -rw-r--r-- | views/layouts/general-page.html | 36 |
4 files changed, 19 insertions, 49 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index b7b256a..7022793 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -133,9 +133,9 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, } w.WriteString(fmt.Sprintf(` -<div class="items-center flex flex-col"> +<div class="justify-content-center display-block"> <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%%] ml-auto mr-auto"> - <div class="grid masonry-grid-%s"> + <div class="grid masonry-grid-%s mx-auto"> <div class="grid-sizer grid-sizer-%s"></div> %s </div> @@ -144,10 +144,11 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, w.WriteString(fmt.Sprintf(` <script> - var pckry_%s = new Packery('.masonry-grid-%s', { + var msnry_%s = new Masonry('.masonry-grid-%s', { itemSelector: '.grid-item-%s', columnWidth: '.grid-sizer-%s', - percentPosition: false + percentPosition: false, + fitWidth: true }); var imgLoad_%s_timer; @@ -155,7 +156,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, function initMasonryLayout_%s(tm) { clearTimeout(imgLoad_%s_timer); - imgLoad_%s_timer = setTimeout(() => pckry_%s.layout(), 100); + imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 100); } imgLoad_%s.on('progress', initMasonryLayout_%s); diff --git a/internal/router/router.go b/internal/router/router.go index c0556f0..ef3f063 100644 --- a/internal/router/router.go +++ b/internal/router/router.go @@ -340,23 +340,18 @@ func (r *Router) Listen(endpoint string) error { func (r *Router) Close() (err error) { allErrors := make([]error, 0) - slog.Debug("shutting down blog trigger scheduler") if err = r.supplements.BlogTrigger.Close(); err != nil { allErrors = append(allErrors, fmt.Errorf("fail to shutdown blog trigger scheduler: %w", err)) } - slog.Debug("shutting down fiber server") if err = r.app.Shutdown(); err != nil { allErrors = append(allErrors, fmt.Errorf("fail to shutdown fiber server: %w", err)) } - slog.Debug("dumping cache") if err = r.supplements.ClientCache.Close(); err != nil { allErrors = append(allErrors, fmt.Errorf("fail to dump cache: %w", err)) } - slog.Debug("closing db connection") if err = r.supplements.DB.Close(); err != nil { allErrors = append(allErrors, fmt.Errorf("fail to close db connection: %w", err)) } - slog.Debug("closing page cache") r.supplements.PageCache.Close() return errors.Join(allErrors...) } diff --git a/static/input.css b/static/input.css index 8b69162..739caa3 100644 --- a/static/input.css +++ b/static/input.css @@ -468,11 +468,15 @@ form.crossable.htmx-request input { } .grid-item { + position: relative; + display: inline-block; width: 10rem; } .grid-sizer { - width: 10.5rem; + position: relative; + display: inline-block; + width: 10.1rem; } .grid-item-index { @@ -504,7 +508,7 @@ form.crossable.htmx-request input { } .grid-sizer { - width: 12.5rem; + width: 12.1rem; } .grid-item-2x { @@ -513,10 +517,14 @@ form.crossable.htmx-request input { } @container main (width >= 76rem) { - .grid-item, .grid-sizer { + .grid-item { width: 18rem; } + .grid-sizer { + width: 18.1rem; + } + .grid-item-2x { width: 36rem; } @@ -528,7 +536,7 @@ form.crossable.htmx-request input { } .grid-sizer { - width: 24.5rem; + width: 24.1rem; } .grid-item-2x { diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 5c1867a..62360ad 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -137,7 +137,6 @@ document.body.append(frame); } break; - case "lilac": break; } } @@ -268,40 +267,7 @@ <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> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script> - <script src="https://f003.backblazeb2.com/file/sayana-static/libs/packery/3.0.0/dist/packery.pkgd.js"></script> - - <script> - // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz - var __resetLayout = Packery.prototype._resetLayout; - Packery.prototype._resetLayout = function() { - __resetLayout.call( this ); - var parentSize = getSize( this.element.parentNode ); - var colW = this.columnWidth + this.gutter; - this.fitWidth = Math.floor( ( ( parentSize.innerWidth + this.gutter ) / colW ) * 1.01 ) * colW; - this.packer.width = this.fitWidth; - this.packer.height = Number.POSITIVE_INFINITY; - this.packer.reset(); - }; - - Packery.prototype._getContainerSize = function() { - var emptyWidth = 0; - for ( var i=0, len = this.packer.spaces.length; i < len; i++ ) { - var space = this.packer.spaces[i]; - if ( space.y === 0 && space.height === Number.POSITIVE_INFINITY ) { - emptyWidth += space.width; - } - } - - return { - width: this.fitWidth - this.gutter - emptyWidth, - height: this.maxY - this.gutter - }; - }; - - Packery.prototype.needsResizeLayout = function() { - return true; - }; - </script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/masonry-layout/4.2.2/masonry.pkgd.min.js"></script> <div id="general-page-bottom-embeds" class="flex" hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML"> |