diff options
| -rw-r--r-- | internal/glightbox/html_renderer.go | 10 | ||||
| -rw-r--r-- | static/input.css | 64 |
2 files changed, 72 insertions, 2 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index 3da98eb..5514b6d 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -86,8 +86,12 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, } } + if len(img.Caption) > 0 { + tagClassList = append(tagClassList, "grid-tooltip") + } + elements = append(elements, fmt.Sprintf(` - <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s" + <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s p-1" data-gallery="gallery-%s" data-title="%s" %s> <picture> <source media="(width < 640px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" /> @@ -97,7 +101,9 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, <source media="(width >= 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" /> <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" /> </picture> - </a>`, 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)) + <span class="grid-tooltip-text">%s</span> + <span class="grid-item-index">%d</span> + </a>`, 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, captionHTML, i+1)) if glightboxDescId != "" { elements = append(elements, fmt.Sprintf(` diff --git a/static/input.css b/static/input.css index 8080d13..cfefa0d 100644 --- a/static/input.css +++ b/static/input.css @@ -327,10 +327,74 @@ a:hover { transform: scale(1.1); } +.grid-tooltip { + position: relative; + display: inline-block; + box-shadow: inset 0rem 0rem 0.5rem var(--main-light-color); + transition: box-shadow 0.5s ease-in-out; +} + +.grid-tooltip:hover { + box-shadow: none; +} + +.grid-tooltip-text { + visibility: hidden; + opacity: 0; + transition: opacity 0.5s; + width: 100%; + top: 100%; + background-color: var(--background-dark-color); + color: var(--main-dark-color); + text-align: center; + padding: 0.25rem 0.25rem; + margin-top: 0.25rem; + border-radius: 0.5rem; + position: absolute; + z-index: 15; +} + +.grid-tooltip:hover .grid-tooltip-text { + visibility: visible; + opacity: 1; +} + +.grid-tooltip-text::after { + content: " "; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -0.25rem; + border-width: 0.25rem; + border-style: solid; + border-color: transparent transparent black transparent; +} + .grid-item, .grid-sizer { + position: relative; + display: inline-block; width: 50%; } +.grid-item-index { + visibility: visible; + opacity: 1; + transition: opacity 0.5s; + top: 0%; + left: 0%; + background-color: var(--main-light-color); + color: var(--background-dark-color); + text-align: center; + padding: 0.25rem 0.25rem; + position: absolute; + z-index: 14; +} + +.grid-item:hover .grid-item-index { + visibility: hidden; + opacity: 0; +} + .grid-item-2x { width: 100%; } |