luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add support for browsers that dont support the aspect-ratio css-property

Browse source
This commit is contained in:
heikomat 2022-06-19 14:02:53 +02:00 committed by Michael Mayer
parent 5abbfeb534
commit 93a4ece5e3
1 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/css/results.css
View file

@ -479,3 +479,31 @@ body.chrome #photoprism .search-results .result {
#photoprism .face-results .is-marker.is-invalid { #photoprism .face-results .is-marker.is-invalid {
opacity: 0.5; opacity: 0.5;
} }
/* old browser support */
@supports not (aspect-ratio: 1) {
#photoprism .search-results .image-container {
height: 0;
padding-bottom: 100%;
}
#photoprism .cards-view .result .image,
#photoprism .list-view .result .image,
#photoprism .mosaic-view .result.image
{
height: 0;
/*
8px is required because this aspect-ratio-fallback doesn't take
margins into consideration
*/
padding-bottom: calc(100% - 8px)
}
#photoprism .mosaic-view .result.is-selected {
/*
if it is selected then it has no more margin, so DON't subtract them
in that case
*/
padding-bottom: 100%
}
}