mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-18 18:07:29 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[feature] Use blurhashes in frontend, tidy up gallery view a bit

Browse source
This commit is contained in:
tobi 2025-03-28 22:51:31 +01:00
commit df425ac08a
16 changed files with 421 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

177
web/source/css/_media-wrapper.css
View file

@ -42,13 +42,27 @@
height: 100%;
width: 100%;
div.blurhash-container {
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
canvas {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
}
}
&[open] summary {
height: auto;
width: auto;
margin: 1rem;
padding: 0;
.show, video, img {
.show {
display: none;
}
@ -57,6 +71,10 @@
grid-column: 1 / span 3;
grid-row: 1 / span 2;
}
div.blurhash-container > canvas {
display: none;
}
}
summary {
@ -65,7 +83,7 @@
width: 100%;
z-index: 3;
overflow: hidden;
display: grid;
padding: 1rem;
grid-template-columns: 1fr auto 1fr;
@ -107,24 +125,15 @@
align-self: center;
}
}
video, img {
z-index: -1;
position: absolute;
height: calc(100% + 1.2rem);
width: calc(100% + 1.2rem);
top: -0.6rem;
left: -0.6rem;
filter: blur(1.2rem);
}
}
video.plyr-video, .plyr {
position: absolute;
height: 100%;
width: 100%;
object-fit: contain;
object-fit: cover;
background: $gray1;
min-width: 100%;
}
.unknown-attachment {
@ -161,6 +170,86 @@
}
}
}
@media screen and (max-width: 55rem) {
/*
Tablet-ish width, make "show sensitive"
and "eye" buttons smaller + more compact.
*/
& > details {
& > summary {
padding: 0.5rem;
> div.show.sensitive.button {
font-size: smaller;
padding: 0.2rem;
line-height: 1.4rem;
}
> span.eye.button {
font-size: smaller;
padding: 0 0.2rem 0 0.2rem;
> .fa-fw {
line-height: 1.4rem;
}
}
}
&[open] > summary {
margin: 0.5rem;
}
}
}
@media screen and (max-width: 36rem) {
/*
Mobile-ish width, even more compact.
*/
& > details {
& > summary {
> div.show.sensitive.button {
font-size: small;
padding: 0.1rem;
line-height: 1.2rem;
}
> span.eye.button {
font-size: small;
padding: 0 0.1rem 0 0.1rem;
> .fa-fw {
line-height: 1.2rem;
}
}
}
}
}
@media screen and (max-width: 27rem) {
/*
Really really tiny, make the text
on show/hide sensitive even smaller.
*/
& > details > summary > div.show.sensitive.button {
font-size: x-small;
}
}
}
@media (scripting: none) {
.media-wrapper {
canvas.blurhash {
display: none
}
& > details:not([open]) {
background: linear-gradient(
var(--bg-accent),
var(--bg)
);
}
}
}
.pswp__button--open-post-link {
@ -187,21 +276,75 @@
position: initial;
padding: 0.1rem;
padding-top: 0.2rem;
gap: 0.15rem;
.plyr__controls__item {
/*
Override margins from plyr as
we're displaying in flex with a gap.
*/
margin-left: 0;
margin-right: 0;
&:first-child {
margin-right: 0;
}
/*
Try to split controls in at
least a somewhat sensible way.
*/
&.plyr__volume {
margin-left: auto;
}
&[data-plyr="restart"] {
margin-right: auto;
}
}
/*
Override the rule from plyr that
hides the total duration on thinner
screens, we have enough room.
*/
.plyr__time + .plyr__time {
display: initial;
}
}
.plyr__control {
box-shadow: none;
}
.plyr__control--overlaid {
top: calc(50% - 18px);
.plyr__poster {
background-size: cover;
}
/*
Hide plry controls when it's not inside
a lightbox, but use cursor pointer to
show the whole thing can be clicked.
*/
&.plyr--stopped, &.plyr--paused {
.plyr__controls {
display: none;
}
cursor: pointer;
}
}
.pswp__content {
padding: 2rem;
.plyr {
max-height: 100%;
/*
Render plyr controls as normal
when it's inside a lightbox.
*/
.plyr__control--overlaid {
top: calc(50% - 18px);
}
> .plyr--stopped .plyr__controls,
> .plyr--paused .plyr__controls {
display: flex;
}
}