oldkid/friendica
1
0
Fork 0
mirror of https://git.sekbaer.de/Friendica/friendica.git synced 2025-06-16 20:05:14 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add new horizontal masonry and image height allocation

Browse source 
- Move image templates to content/image sub-folder
This commit is contained in:
Hypolite Petovan 2023-09-29 03:28:22 -04:00
parent e01040a2e8
commit 163a85c78f
13 changed files with 410 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

33
view/global.css
View file

@ -706,6 +706,39 @@ audio {
* Image grid settings END
**/
/* This helps allocating space for image before they are loaded, preventing content shifting once they are.
* Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
* Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
* This ratio is never known in advance so no value is set in the stylesheet.
*/
figure.img-allocated-height {
position: relative;
background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
margin: 0;
}
figure.img-allocated-height img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
/**
* Horizontal masonry settings START
**/
.masonry-row {
display: -ms-flexbox; /* IE10 */
display: flex;
/* Both the following values should be the same to ensure consistent margins between images in the grid */
column-gap: 5px;
margin-top: 5px;
}
/**
* Horizontal masonry settings AND
**/
#contactblock .icon {
width: 48px;
height: 48px;