bitPickups/friendica_stable_2026.01
1
0
Fork 0
forked from friendica/friendica
Code Issues 1 Pull requests Activity

Fix photo album hover caption CSS specificity for justified gallery

Browse source
This commit is contained in:
“Raroun” 2025-12-23 12:56:13 +01:00
commit 6a4dcb0d36
3 changed files with 41 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

49
view/theme/frio/css/style.css
View file

@ -1671,29 +1671,52 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
display: inline-block;
}
.photo-top-image-wrapper .jg-caption {
/* ALT badge for photos with descriptions in justified gallery */
.photo-top-image-wrapper:has(img.has-alt-description)::after {
background: rgba(0, 0, 0, 0.69);
border-radius: 4px;
color: #eee;
content: "ALT";
font-size: 12px;
font-weight: bold;
padding: 4px 5px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 8px 12px;
font-size: 14px;
text-align: center;
bottom: 8px;
right: 8px;
z-index: 1;
pointer-events: none;
}
.photo-top-image-wrapper .jg-caption,
#photo-album-contents .photo-top-image-wrapper .jg-caption,
.justified-gallery > .photo-top-image-wrapper > .jg-caption,
#photo-album-contents.justified-gallery > .photo-top-image-wrapper > .jg-caption {
display: block !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background-color: rgba(0, 0, 0, 0.7) !important;
color: #fff !important;
padding: 8px 12px !important;
font-size: 14px !important;
text-align: center !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}
.photo-top-image-wrapper:hover .jg-caption {
opacity: 1;
visibility: visible;
.photo-top-image-wrapper:hover .jg-caption,
#photo-album-contents .photo-top-image-wrapper:hover .jg-caption,
.justified-gallery > .photo-top-image-wrapper:hover > .jg-caption,
#photo-album-contents.justified-gallery > .photo-top-image-wrapper:hover > .jg-caption {
opacity: 1 !important;
visibility: visible !important;
}
.photo-top-image-wrapper .jg-caption a {
color: #fff;
color: #fff !important;
text-decoration: none;
}
.fbrowser .profile-rotator-wrapper {

1
view/theme/frio/js/theme.js
View file

@ -510,6 +510,7 @@ function justifyPhotos() {
.justifiedGallery({
margins: 3,
border: 0,
captions: false,
sizeRangeSuffixes: {
lt48: "-6",
lt80: "-5",

6
view/theme/frio/templates/photo_top.tpl
View file

@ -5,8 +5,10 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*}}
<div class="photo-top-image-wrapper" id="photo-top-image-wrapper-{{$photo.id}}">
<a href="{{$photo.link}}" id="photo-top-photo-link-{{$photo.id}}" title="{{$photo.title}}">
<img src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.title}}" id="photo-top-photo-{{$photo.id}}" />
<a href="{{$photo.link}}" id="photo-top-photo-link-{{$photo.id}}" title="{{$photo.title}}{{if $photo.desc}}: {{$photo.desc}}{{/if}}">
<img src="{{$photo.src}}" alt="{{if $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" id="photo-top-photo-{{$photo.id}}" {{if $photo.desc}}class="has-alt-description"{{else}}class="empty-description"{{/if}} />
</a>
{{if $photo.album.name}}
<div class="jg-caption"><a href="{{$photo.album.link}}" class="photo-top-album-link" title="{{$photo.album.alt}}">{{$photo.album.name}}</a></div>
{{/if}}
</div>