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

[feature] Allow user to choose "gallery" style web layout

Browse source
This commit is contained in:
tobi 2025-03-17 14:01:41 +01:00
commit 7e689edbe3
82 changed files with 2840 additions and 1154 deletions
Download patch file Download diff file Expand all files Collapse all files

210
web/source/css/status.css
View file

@ -17,14 +17,7 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@import "photoswipe/dist/photoswipe.css";
@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
@import "plyr/dist/plyr.css";
main {
background: transparent;
grid-auto-rows: auto;
}
@import "./_status-media.css";
.status {
background: $status-bg;
@ -257,172 +250,6 @@ main {
}
}
.media {
grid-column: span 3;
display: grid;
grid-template-columns: 50% 50%;
grid-auto-rows: 10rem;
overflow: hidden;
.media-wrapper {
height: 100%;
width: 100%;
box-sizing: border-box;
border: 0.15rem solid $gray1;
border-radius: $br;
position: relative;
overflow: hidden;
z-index: 2;
details {
position: absolute;
height: 100%;
width: 100%;
&[open] summary {
height: auto;
width: auto;
margin: 1rem;
padding: 0;
.show, video, img {
display: none;
}
.eye.button .hide {
display: inline-block;
grid-column: 1 / span 3;
grid-row: 1 / span 2;
}
}
summary {
position: absolute;
height: 100%;
width: 100%;
z-index: 3;
overflow: hidden;
display: grid;
padding: 1rem;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"eye sensitive ."
". sensitive .";
&::-webkit-details-marker {
display: none; /* Safari */
}
.eye.button {
grid-area: eye;
align-self: start;
justify-self: start;
margin: 0;
padding: 0.4rem;
.fa-fw {
line-height: $fa-fw;
}
.hide {
display: none;
}
}
.show.sensitive {
grid-area: sensitive;
align-self: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.button {
cursor: pointer;
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;
background: $gray1;
}
.unknown-attachment {
.placeholder {
width: 100%;
height: 100%;
padding: 0.8rem;
border: 0.2rem dashed $white2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
color: $white2;
.placeholder-external-link {
align-self: end;
font-size: 2.5rem;
}
.placeholder-icon {
width: 100%;
font-size: 3.5rem;
text-align: center;
margin-top: auto;
}
.placeholder-link-to {
width: 100%;
text-align: center;
margin-bottom: auto;
}
}
}
}
}
&.single .media-wrapper {
grid-column: span 2;
}
&.odd .media-wrapper:first-child,
&.double .media-wrapper {
grid-row: span 2;
}
@media screen and (max-width: 42rem) {
.media-wrapper {
grid-column: span 2;
grid-row: span 2;
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.status-info {
background: $status-info-bg;
color: $fg-reduced;
@ -448,10 +275,6 @@ main {
gap: 0.4rem;
}
.stats-item.published-at {
text-decoration: underline;
}
.stats-item:not(.published-at):not(.edited-at) {
z-index: 1;
user-select: none;
@ -497,34 +320,3 @@ main {
}
}
}
.plyr--video {
flex-direction: column-reverse;
.plyr__video-wrapper {
position: relative;
}
.plyr__controls {
align-self: stretch;
position: initial;
padding: 0.1rem;
padding-top: 0.2rem;
}
.plyr__control {
box-shadow: none;
}
.plyr__control--overlaid {
top: calc(50% - 18px);
}
}
.pswp__content {
padding: 2rem;
.plyr {
max-height: 100%;
}
}