Browse Source
* [feature] Allow user to choose "gallery" style web layout * find a bug and squish it up and all day long you'll have good luck * just a sec * [performance] reindex public timeline + tinker with query a bit * fiddling * should be good now * last bit of finagling, i'm done now i prommy * panic normallypull/3945/head
tobi
12 months ago
committed by
GitHub
82 changed files with 2921 additions and 1171 deletions
|
After Width: | Height: | Size: 947 KiB |
|
After Width: | Height: | Size: 793 KiB |
@ -0,0 +1,85 @@
|
||||
// GoToSocial
|
||||
// Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
package migrations |
||||
|
||||
import ( |
||||
"context" |
||||
|
||||
"github.com/superseriousbusiness/gotosocial/internal/log" |
||||
"github.com/uptrace/bun" |
||||
) |
||||
|
||||
func init() { |
||||
up := func(ctx context.Context, db *bun.DB) error { |
||||
return db.RunInTx(ctx, nil, func(ctx context.Context, tx bun.Tx) error { |
||||
|
||||
// Add new column to settings.
|
||||
if _, err := tx. |
||||
NewAddColumn(). |
||||
Table("account_settings"). |
||||
ColumnExpr( |
||||
"? SMALLINT NOT NULL DEFAULT ?", |
||||
bun.Ident("web_layout"), 1, |
||||
). |
||||
Exec(ctx); err != nil { |
||||
return err |
||||
} |
||||
|
||||
// Drop existing statuses web index as it's out of date.
|
||||
log.Info(ctx, "updating statuses_profile_web_view_idx, this may take a while, please wait!") |
||||
if _, err := tx. |
||||
NewDropIndex(). |
||||
Index("statuses_profile_web_view_idx"). |
||||
IfExists(). |
||||
Exec(ctx); err != nil { |
||||
return err |
||||
} |
||||
|
||||
// Note: "attachments" field is not included in
|
||||
// the index below as SQLite is fussy about using it,
|
||||
// and it prevents this index from being used
|
||||
// properly in non media-only queries.
|
||||
if _, err := tx. |
||||
NewCreateIndex(). |
||||
Table("statuses"). |
||||
Index("statuses_profile_web_view_idx"). |
||||
Column( |
||||
"account_id", |
||||
"visibility", |
||||
"in_reply_to_uri", |
||||
"boost_of_id", |
||||
"federated", |
||||
). |
||||
ColumnExpr("? DESC", bun.Ident("id")). |
||||
IfNotExists(). |
||||
Exec(ctx); err != nil { |
||||
return err |
||||
} |
||||
|
||||
return nil |
||||
}) |
||||
} |
||||
|
||||
down := func(ctx context.Context, db *bun.DB) error { |
||||
return nil |
||||
} |
||||
|
||||
if err := Migrations.Register(up, down); err != nil { |
||||
panic(err) |
||||
} |
||||
} |
||||
Binary file not shown.
|
After Width: | Height: | Size: 324 B |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 636 B |
|
After Width: | Height: | Size: 406 B |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 761 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 396 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 372 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 501 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 358 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
@ -0,0 +1,207 @@
|
||||
/* |
||||
GoToSocial |
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org |
||||
SPDX-License-Identifier: AGPL-3.0-or-later |
||||
|
||||
This program is free software: you can redistribute it and/or modify |
||||
it under the terms of the GNU Affero General Public License as published by |
||||
the Free Software Foundation, either version 3 of the License, or |
||||
(at your option) any later version. |
||||
|
||||
This program is distributed in the hope that it will be useful, |
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
GNU Affero General Public License for more details. |
||||
|
||||
You should have received a copy of the GNU Affero General Public License |
||||
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"; |
||||
|
||||
.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; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pswp__button--open-post-link { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
span > i { |
||||
background: $status-bg; |
||||
color: $fg; |
||||
border-radius: 25%; |
||||
} |
||||
} |
||||
|
||||
.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%; |
||||
} |
||||
} |
||||
@ -0,0 +1,343 @@
|
||||
/* |
||||
GoToSocial |
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org |
||||
SPDX-License-Identifier: AGPL-3.0-or-later |
||||
|
||||
This program is free software: you can redistribute it and/or modify |
||||
it under the terms of the GNU Affero General Public License as published by |
||||
the Free Software Foundation, either version 3 of the License, or |
||||
(at your option) any later version. |
||||
|
||||
This program is distributed in the hope that it will be useful, |
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
GNU Affero General Public License for more details. |
||||
|
||||
You should have received a copy of the GNU Affero General Public License |
||||
along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
*/ |
||||
|
||||
.profile .profile-header { |
||||
background: $profile-bg; |
||||
border-radius: $br; |
||||
overflow: hidden; |
||||
margin-bottom: 1rem; |
||||
|
||||
.moved-to { |
||||
padding: 1rem; |
||||
text-align: center; |
||||
} |
||||
|
||||
.header-image-wrapper { |
||||
position: relative; |
||||
padding-top: 33.33%; /* aspect-ratio 1/3 */ |
||||
|
||||
img { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
/* |
||||
Basic info container has the user's avatar, display- and username, and role |
||||
It's partially overlapped over the header image, by a negative margin-top. |
||||
*/ |
||||
$avatar-size: 8.5rem; |
||||
$name-size: 3rem; |
||||
$username-size: 2rem; |
||||
$overlap: calc($avatar-size - $name-size - $username-size); |
||||
|
||||
.basic-info { |
||||
position: relative; |
||||
display: grid; |
||||
box-sizing: border-box; |
||||
grid-template-columns: $avatar-size auto 1fr; |
||||
grid-template-rows: $overlap $name-size auto; |
||||
grid-template-areas: |
||||
"avatar . ." |
||||
"avatar namerole namerole" |
||||
"avatar namerole namerole"; |
||||
|
||||
margin: 1rem; |
||||
margin-top: calc(-1 * $overlap); |
||||
gap: 0 1rem; |
||||
|
||||
.avatar-image-wrapper { |
||||
grid-area: avatar; |
||||
|
||||
border: 0.2rem solid $avatar-border; |
||||
border-radius: $br; |
||||
|
||||
/* |
||||
Wrapper always same |
||||
size + proportions no |
||||
matter image inside. |
||||
*/ |
||||
height: $avatar-size; |
||||
width: $avatar-size; |
||||
|
||||
.avatar { |
||||
/* |
||||
Fit 100% of the wrapper. |
||||
*/ |
||||
height: 100%; |
||||
width: 100%; |
||||
|
||||
/* |
||||
Normalize non-square images. |
||||
*/ |
||||
object-fit: cover; |
||||
|
||||
/* |
||||
Prevent image extending |
||||
beyond rounded borders. |
||||
*/ |
||||
border-radius: $br-inner; |
||||
} |
||||
} |
||||
|
||||
.namerole { |
||||
grid-area: namerole; |
||||
|
||||
display: grid; |
||||
gap: 0 1rem; |
||||
box-sizing: border-box; |
||||
grid-template-columns: 1fr auto; |
||||
grid-template-rows: $name-size auto; |
||||
grid-template-areas: |
||||
"displayname displayname" |
||||
"username role"; |
||||
|
||||
.displayname { |
||||
grid-area: displayname; |
||||
line-height: $name-size; |
||||
font-size: 1.5rem; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.bot-username-wrapper { |
||||
display: flex; |
||||
gap: 0.5rem; |
||||
grid-area: username; |
||||
align-items: center; |
||||
|
||||
.bot-legend-wrapper { |
||||
display: flex; |
||||
gap: 0.25rem; |
||||
align-items: center; |
||||
|
||||
background: $bg; |
||||
color: $fg; |
||||
|
||||
border-radius: $br; |
||||
padding: 0.1rem 0.4rem 0.2rem 0.4rem; |
||||
|
||||
font-variant: small-caps; |
||||
font-weight: bold; |
||||
|
||||
cursor: default; |
||||
|
||||
.bot-icon { |
||||
/* |
||||
FA icon is weirdly |
||||
aligned so tweak it |
||||
*/ |
||||
margin-top: 0.25rem; |
||||
} |
||||
} |
||||
|
||||
.username { |
||||
min-width: 0; |
||||
line-height: $username-size; |
||||
|
||||
font-size: 1rem; |
||||
font-weight: bold; |
||||
color: $fg-accent; |
||||
user-select: all; |
||||
} |
||||
} |
||||
|
||||
.role { |
||||
background: $bg; |
||||
color: $fg; |
||||
border: 0.13rem solid $bg; |
||||
|
||||
grid-area: role; |
||||
align-self: center; |
||||
justify-self: start; |
||||
border-radius: $br; |
||||
padding: 0.3rem; |
||||
|
||||
line-height: 1.1rem; |
||||
font-size: 0.9rem; |
||||
font-variant: small-caps; |
||||
font-weight: bold; |
||||
|
||||
&.admin { |
||||
color: $role-admin; |
||||
border-color: $role-admin; |
||||
} |
||||
|
||||
&.moderator { |
||||
color: $role-mod; |
||||
border-color: $role-mod; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.profile .about-user { |
||||
flex: 35 14rem; |
||||
border-radius: $br; |
||||
overflow: hidden; |
||||
|
||||
.col-header { |
||||
margin-bottom: -0.25rem; |
||||
} |
||||
|
||||
dt { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.fields { |
||||
background: $profile-bg; |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 0 0.5rem; |
||||
padding-top: 0.25rem; |
||||
|
||||
.field { |
||||
padding: 0.25rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
border-bottom: 0.1rem solid $gray2; |
||||
|
||||
> dt, > dd { |
||||
word-break: break-word; |
||||
} |
||||
|
||||
&:first-child { |
||||
border-top: 0.1rem solid $gray2; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bio { |
||||
background: $profile-bg; |
||||
padding: 1rem 0.75rem; |
||||
padding-bottom: 1.25rem; |
||||
} |
||||
|
||||
.accountstats { |
||||
background: $bg-accent; |
||||
padding: 0.75rem; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 0.25rem; |
||||
|
||||
.stats-item { |
||||
display: flex; |
||||
dt { |
||||
width: 7rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* |
||||
RSS icon isn't really part of the profile header exactly, |
||||
but also it sort of is, and we want it styled the same for |
||||
both microblog and gallery view anyway, so include it here. |
||||
*/ |
||||
.rss-icon { |
||||
display: block; |
||||
margin: -0.25rem 0; |
||||
|
||||
.fa { |
||||
font-size: 2rem; |
||||
object-fit: contain; |
||||
vertical-align: middle; |
||||
color: $orange2; |
||||
/* |
||||
Can't size a single-color background, so we use |
||||
a linear-gradient that's effectively white. |
||||
*/ |
||||
background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center; |
||||
background-size: 1.2rem 1.4rem; |
||||
/* light mode */ |
||||
@media (prefers-color-scheme: light) { |
||||
background: linear-gradient(to right, $white 100%, transparent 0) no-repeat center center; |
||||
background-size: 1.2rem 1.4rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* |
||||
Tablet-ish-kinda size. |
||||
*/ |
||||
@media screen and (max-width: 750px) { |
||||
.profile .profile-header { |
||||
.basic-info { |
||||
grid-template-columns: auto 1fr; |
||||
grid-template-rows: $avatar-size $name-size auto; |
||||
grid-template-areas: |
||||
"avatar avatar" |
||||
"namerole namerole" |
||||
"namerole namerole"; |
||||
|
||||
/* |
||||
Make display name a bit smaller |
||||
so there's more chance of being |
||||
able to read everything. |
||||
*/ |
||||
.namerole { |
||||
.displayname { |
||||
font-size: 1.2rem; |
||||
line-height: 2rem; |
||||
margin-top: 0.5rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* |
||||
Phone-ish-kinda size. |
||||
*/ |
||||
@media screen and (max-width: 500px) { |
||||
.profile |
||||
.profile-header |
||||
.basic-info |
||||
.namerole { |
||||
/* |
||||
Line up in smallest possible |
||||
horizontal space to avoid overflow. |
||||
*/ |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 0.5rem; |
||||
|
||||
/* |
||||
Don't hug the right anymore |
||||
(good life advice in general). |
||||
*/ |
||||
.role { |
||||
align-self: flex-start; |
||||
} |
||||
|
||||
/* |
||||
Allow this to wrap in case |
||||
of a really skinny screen. |
||||
*/ |
||||
.bot-username-wrapper { |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,44 @@
|
||||
/* |
||||
GoToSocial |
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org |
||||
SPDX-License-Identifier: AGPL-3.0-or-later |
||||
|
||||
This program is free software: you can redistribute it and/or modify |
||||
it under the terms of the GNU Affero General Public License as published by |
||||
the Free Software Foundation, either version 3 of the License, or |
||||
(at your option) any later version. |
||||
|
||||
This program is distributed in the hope that it will be useful, |
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
GNU Affero General Public License for more details. |
||||
|
||||
You should have received a copy of the GNU Affero General Public License |
||||
along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
*/ |
||||
|
||||
@import "./_media-wrapper.css"; |
||||
|
||||
.media { |
||||
grid-column: span 3; |
||||
display: grid; |
||||
grid-template-columns: 50% 50%; |
||||
grid-auto-rows: 10rem; |
||||
overflow: hidden; |
||||
|
||||
&.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; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,108 @@
|
||||
/* |
||||
GoToSocial |
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org |
||||
SPDX-License-Identifier: AGPL-3.0-or-later |
||||
|
||||
This program is free software: you can redistribute it and/or modify |
||||
it under the terms of the GNU Affero General Public License as published by |
||||
the Free Software Foundation, either version 3 of the License, or |
||||
(at your option) any later version. |
||||
|
||||
This program is distributed in the hope that it will be useful, |
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
GNU Affero General Public License for more details. |
||||
|
||||
You should have received a copy of the GNU Affero General Public License |
||||
along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
*/ |
||||
|
||||
@import "./_profile-header.css"; |
||||
@import "./_media-wrapper.css"; |
||||
|
||||
.page { |
||||
/* |
||||
Profile gallery can be wider than default. |
||||
*/ |
||||
grid-template-columns: 1fr min(95%, 65rem) 1fr; |
||||
} |
||||
|
||||
.profile { |
||||
.about-user { |
||||
margin-bottom: 1rem; |
||||
|
||||
.accountstats { |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
|
||||
.stats-item { |
||||
gap: 0.5rem; |
||||
width: 25%; |
||||
justify-content: space-around; |
||||
|
||||
dt { |
||||
width: fit-content; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
dd { |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 750px) { |
||||
flex-direction: column; |
||||
.stats-item { |
||||
width: fit-content; |
||||
dt { |
||||
width: 7rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.media-galleries-wrapper { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 1rem; |
||||
min-width: 0%; |
||||
|
||||
.media-gallery { |
||||
margin-top: 0.15rem; |
||||
margin-bottom: 0.15rem; |
||||
|
||||
display: grid; |
||||
gap: 0.15rem; |
||||
|
||||
/* Desktop-ish width, show 3 cols of media */ |
||||
grid-template-columns: repeat(3, 1fr); |
||||
|
||||
@media screen and (max-width: 55rem) { |
||||
/* Tablet-ish width, switch to 2 cols */ |
||||
grid-template-columns: repeat(2, 1fr); |
||||
} |
||||
|
||||
@media screen and (max-width: 36rem) { |
||||
/* Mobile-ish width, switch to 1 col */ |
||||
grid-template-columns: repeat(1, 1fr); |
||||
} |
||||
|
||||
.media-wrapper { |
||||
aspect-ratio: 4/3; |
||||
border: 0; |
||||
border-radius: 0; |
||||
background: $bg; |
||||
} |
||||
} |
||||
|
||||
.backnextlinks { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.next { |
||||
margin-left: auto; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,87 @@
|
||||
{{- /* |
||||
// GoToSocial |
||||
// Copyright (C) GoToSocial Authors admin@gotosocial.org |
||||
// SPDX-License-Identifier: AGPL-3.0-or-later |
||||
// |
||||
// This program is free software: you can redistribute it and/or modify |
||||
// it under the terms of the GNU Affero General Public License as published by |
||||
// the Free Software Foundation, either version 3 of the License, or |
||||
// (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU Affero General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU Affero General Public License |
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
*/ -}} |
||||
|
||||
{{- with . }} |
||||
<main class="profile h-card"> |
||||
{{- with . }} |
||||
{{- include "profile_header.tmpl" . | indent 1 }} |
||||
{{- end }} |
||||
{{- with . }} |
||||
{{- include "profile_about_user.tmpl" . | indent 1 }} |
||||
{{- end }} |
||||
<div |
||||
class="media-galleries-wrapper" |
||||
role="region" |
||||
aria-label="Media by {{ .account.Username -}}" |
||||
> |
||||
{{- if .pinned_statuses }} |
||||
<section class="pinned h-feed" aria-labelledby="pinned"> |
||||
<div class="col-header"> |
||||
<h3 class="p-name" id="pinned">Pinned media</h3> |
||||
<a href="#recent">jump to recent</a> |
||||
</div> |
||||
<div |
||||
class="media-gallery photoswipe-gallery" |
||||
role="group" |
||||
> |
||||
{{- range $index, $attachment := .pinnedGalleryItems }} |
||||
{{- includeIndex "status_attachment.tmpl" $attachment $index | indent 4 }} |
||||
{{- end }} |
||||
</div> |
||||
</section> |
||||
{{- end }} |
||||
<section class="recent h-feed" aria-labelledby="recent"> |
||||
<div class="col-header"> |
||||
<h3 id="recent p-name" tabindex="-1">Recent media</h3> |
||||
{{- if .rssFeed }} |
||||
<a href="{{- .rssFeed -}}" class="rss-icon" aria-label="RSS feed"> |
||||
<i class="fa fa-rss-square" aria-hidden="true"></i> |
||||
</a> |
||||
{{- end }} |
||||
</div> |
||||
{{- if not .galleryItems }} |
||||
<div data-nosnippet class="nothinghere"> |
||||
{{- if .show_back_to_top }} |
||||
Reached the end of visible media! |
||||
{{- else }} |
||||
Nothing to see here! {{ .account.Username }} has either not posted any public media yet, or has opted not to make posts visible via the World Wide Web. |
||||
{{- end }} |
||||
</div> |
||||
{{- else }} |
||||
<div |
||||
class="media-gallery photoswipe-gallery" |
||||
role="group" |
||||
> |
||||
{{- range $index, $attachment := .galleryItems }} |
||||
{{- includeIndex "status_attachment.tmpl" $attachment $index | indent 4 }} |
||||
{{- end }} |
||||
</div> |
||||
{{- end }} |
||||
<nav class="backnextlinks"> |
||||
{{- if .show_back_to_top }} |
||||
<a href="/@{{- .account.Username -}}">Back to top</a> |
||||
{{- end }} |
||||
{{- if .statuses_next }} |
||||
<a href="{{- .statuses_next -}}" class="next">Show older</a> |
||||
{{- end }} |
||||
</nav> |
||||
</section> |
||||
</div> |
||||
</main> |
||||
{{- end }} |
||||
@ -0,0 +1,56 @@
|
||||
{{- /* |
||||
// GoToSocial |
||||
// Copyright (C) GoToSocial Authors admin@gotosocial.org |
||||
// SPDX-License-Identifier: AGPL-3.0-or-later |
||||
// |
||||
// This program is free software: you can redistribute it and/or modify |
||||
// it under the terms of the GNU Affero General Public License as published by |
||||
// the Free Software Foundation, either version 3 of the License, or |
||||
// (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU Affero General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU Affero General Public License |
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
*/ -}} |
||||
|
||||
{{- with . }} |
||||
<section class="about-user" role="region" aria-labelledby="about-header"> |
||||
<div class="col-header"> |
||||
<h3 id="about-header">About<span class="sr-only"> {{- .account.Username -}}</span></h3> |
||||
</div> |
||||
{{- if .account.Fields }} |
||||
{{- include "profile_fields.tmpl" . | indent 1 }} |
||||
{{- end }} |
||||
<h4 class="sr-only">Bio</h4> |
||||
<div class="bio p-note"> |
||||
{{- if .account.Note }} |
||||
{{ emojify .account.Emojis (noescape .account.Note) }} |
||||
{{- else }} |
||||
<p>This GoToSocial user hasn't written a bio yet!</p> |
||||
{{- end }} |
||||
</div> |
||||
<h4 class="sr-only">Stats</h4> |
||||
<dl class="accountstats"> |
||||
<div class="stats-item"> |
||||
<dt class="joineddt text-cutoff">Joined</dt> |
||||
<dd class="joineddd text-cutoff"><time datetime="{{- .account.CreatedAt -}}">{{- .account.CreatedAt | timestampVague -}}</time></dd> |
||||
</div> |
||||
<div class="stats-item"> |
||||
<dt class="postsdt text-cutoff">Posts</dt> |
||||
<dd class="postsdd text-cutoff">{{- .account.StatusesCount -}}</dd> |
||||
</div> |
||||
<div class="stats-item"> |
||||
<dt class="followeddt text-cutoff">Followed by</dt> |
||||
<dd class="followeddd text-cutoff">{{- if .account.HideCollections -}}<i>hidden</i>{{- else -}}{{- .account.FollowersCount -}}{{- end -}}</dd> |
||||
</div> |
||||
<div class="stats-item"> |
||||
<dt class="followingdt text-cutoff">Following</dt> |
||||
<dd class="followingdd text-cutoff">{{- if .account.HideCollections -}}<i>hidden</i>{{- else -}}{{- .account.FollowingCount -}}{{- end -}}</dd> |
||||
</div> |
||||
</dl> |
||||
</section> |
||||
{{- end }} |
||||
@ -0,0 +1,179 @@
|
||||
{{- /* |
||||
// GoToSocial |
||||
// Copyright (C) GoToSocial Authors admin@gotosocial.org |
||||
// SPDX-License-Identifier: AGPL-3.0-or-later |
||||
// |
||||
// This program is free software: you can redistribute it and/or modify |
||||
// it under the terms of the GNU Affero General Public License as published by |
||||
// the Free Software Foundation, either version 3 of the License, or |
||||
// (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU Affero General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU Affero General Public License |
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
*/ -}} |
||||
|
||||
{{- define "imagePreview" }} |
||||
<img |
||||
src="{{- .PreviewURL -}}" |
||||
loading="lazy" |
||||
{{- if .Description }} |
||||
alt="{{- .Description -}}" |
||||
title="{{- .Description -}}" |
||||
{{- end }} |
||||
width="{{- .Meta.Original.Width -}}" |
||||
height="{{- .Meta.Original.Height -}}" |
||||
/> |
||||
{{- end }} |
||||
|
||||
{{- define "videoPreview" }} |
||||
<img |
||||
src="{{- .PreviewURL -}}" |
||||
loading="lazy" |
||||
{{- if .Description }} |
||||
alt="{{- .Description -}}" |
||||
title="{{- .Description -}}" |
||||
{{- end }} |
||||
width="{{- .Meta.Small.Width -}}" |
||||
height="{{- .Meta.Small.Height -}}" |
||||
/> |
||||
{{- end }} |
||||
|
||||
{{- define "audioPreview" }} |
||||
{{- if and .PreviewURL .Meta.Small.Width }} |
||||
<img |
||||
src="{{- .PreviewURL -}}" |
||||
loading="lazy" |
||||
{{- if .Description }} |
||||
alt="{{- .Description -}}" |
||||
title="{{- .Description -}}" |
||||
{{- end }} |
||||
width="{{- .Meta.Small.Width -}}" |
||||
height="{{- .Meta.Small.Height -}}" |
||||
/> |
||||
{{- else }} |
||||
<img |
||||
src="/assets/logo.webp" |
||||
loading="lazy" |
||||
{{- if .Description }} |
||||
alt="{{- .Description -}}" |
||||
title="{{- .Description -}}" |
||||
{{- end }} |
||||
width="518" |
||||
height="460" |
||||
/> |
||||
{{- end }} |
||||
{{- end }} |
||||
|
||||
{{- with . }} |
||||
<div class="media-wrapper"> |
||||
<details class="{{- .Item.Type -}}-spoiler media-spoiler" {{- if not .Item.Sensitive }} open{{- end -}}> |
||||
<summary> |
||||
<div class="show sensitive button" aria-hidden="true">Show sensitive</div> |
||||
<span class="eye button" role="button" tabindex="0" aria-label="Toggle media"> |
||||
<i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i> |
||||
<i class="show fa fa-fw fa-eye" aria-hidden="true"></i> |
||||
</span> |
||||
{{- if or (eq .Item.Type "video") (eq .Item.Type "gifv") }} |
||||
{{- include "videoPreview" .Item | indent 3 }} |
||||
{{- else if eq .Item.Type "image" }} |
||||
{{- include "imagePreview" .Item | indent 3 }} |
||||
{{- else if eq .Item.Type "audio" }} |
||||
{{- include "audioPreview" .Item | indent 3 }} |
||||
{{- end }} |
||||
</summary> |
||||
{{- if or (eq .Item.Type "video") (eq .Item.Type "gifv") }} |
||||
<video |
||||
{{- if eq .Item.Type "video" }} |
||||
preload="none" |
||||
{{- else }} |
||||
preload="auto" |
||||
muted |
||||
{{- end }} |
||||
class="plyr-video photoswipe-slide{{- if eq .Item.Type "gifv" }} gifv{{ end }}" |
||||
controls |
||||
playsinline |
||||
data-pswp-index="{{- .Index -}}" |
||||
data-pswp-parent-status="{{- .Item.ParentStatusLink -}}" |
||||
data-pswp-attachment-id="{{- .Item.ID -}}" |
||||
poster="{{- .Item.PreviewURL -}}" |
||||
data-pswp-width="{{- .Item.Meta.Original.Width -}}px" |
||||
data-pswp-height="{{- .Item.Meta.Original.Height -}}px" |
||||
{{- if .Item.Description }} |
||||
alt="{{- .Item.Description -}}" |
||||
title="{{- .Item.Description -}}" |
||||
{{- end }} |
||||
> |
||||
<source type="{{- .Item.MIMEType -}}" src="{{- .Item.URL -}}"/> |
||||
</video> |
||||
{{- else if eq .Item.Type "audio" }} |
||||
<video |
||||
preload="none" |
||||
class="plyr-video photoswipe-slide" |
||||
controls |
||||
playsinline |
||||
data-pswp-index="{{- .Index -}}" |
||||
data-pswp-parent-status="{{- .Item.ParentStatusLink -}}" |
||||
data-pswp-attachment-id="{{- .Item.ID -}}" |
||||
{{- if and .Item.PreviewURL .Item.Meta.Small.Width }} |
||||
poster="{{- .Item.PreviewURL -}}" |
||||
data-pswp-width="{{- .Item.Meta.Small.Width -}}px" |
||||
data-pswp-height="{{- .Item.Meta.Small.Height -}}px" |
||||
{{- else }} |
||||
poster="/assets/logo.webp" |
||||
width="518px" |
||||
height="460px" |
||||
{{- end }} |
||||
{{- if .Item.Description }} |
||||
alt="{{- .Item.Description -}}" |
||||
title="{{- .Item.Description -}}" |
||||
{{- end }} |
||||
> |
||||
<source type="{{- .Item.MIMEType -}}" src="{{- .Item.URL -}}"/> |
||||
</video> |
||||
{{- else if eq .Item.Type "image" }} |
||||
<a |
||||
class="photoswipe-slide" |
||||
data-pswp-index="{{- .Index -}}" |
||||
data-pswp-parent-status="{{- .Item.ParentStatusLink -}}" |
||||
data-pswp-attachment-id="{{- .Item.ID -}}" |
||||
href="{{- .Item.URL -}}" |
||||
target="_blank" |
||||
data-pswp-width="{{- .Item.Meta.Original.Width -}}px" |
||||
data-pswp-height="{{- .Item.Meta.Original.Height -}}px" |
||||
data-cropped="true" |
||||
{{- if .Item.Description }} |
||||
alt="{{- .Item.Description -}}" |
||||
title="{{- .Item.Description -}}" |
||||
{{- end }} |
||||
> |
||||
{{- with .Item }} |
||||
{{- include "imagePreview" . | indent 3 }} |
||||
{{- end }} |
||||
</a> |
||||
{{- else }} |
||||
<a |
||||
class="unknown-attachment" |
||||
href="{{- .Item.RemoteURL -}}" |
||||
rel="nofollow noreferrer noopener" |
||||
target="_blank" |
||||
{{- if .Item.Description }} |
||||
title="Open external media: {{ .Item.Description -}} {{- .Item.RemoteURL -}}" |
||||
{{- else }} |
||||
title="Open external media. {{- .Item.RemoteURL -}}" |
||||
{{- end }} |
||||
> |
||||
<div class="placeholder" aria-hidden="true"> |
||||
<i class="placeholder-external-link fa fa-external-link"></i> |
||||
<i class="placeholder-icon fa fa-file-text"></i> |
||||
<div class="placeholder-link-to">External media</div> |
||||
</div> |
||||
</a> |
||||
{{- end }} |
||||
</details> |
||||
</div> |
||||
{{- end }} |
||||
@ -1,195 +0,0 @@
|
||||
{{- /* |
||||
// GoToSocial |
||||
// Copyright (C) GoToSocial Authors admin@gotosocial.org |
||||
// SPDX-License-Identifier: AGPL-3.0-or-later |
||||
// |
||||
// This program is free software: you can redistribute it and/or modify |
||||
// it under the terms of the GNU Affero General Public License as published by |
||||
// the Free Software Foundation, either version 3 of the License, or |
||||
// (at your option) any later version. |
||||
// |
||||
// This program is distributed in the hope that it will be useful, |
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
// GNU Affero General Public License for more details. |
||||
// |
||||
// You should have received a copy of the GNU Affero General Public License |
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
*/ -}} |
||||
|
||||
{{- /* |
||||
Template for rendering a gallery of status media attachments. |
||||
To use this template, pass a web view status into it. |
||||
*/ -}} |
||||
|
||||
{{- define "imagePreview" }} |
||||
<img |
||||
src="{{- .PreviewURL -}}" |
||||
loading="lazy" |
||||
{{- if .Description }} |
||||
alt="{{- .Description -}}" |
||||
title="{{- .Description -}}" |
||||
{{- end }} |
||||
width="{{- .Meta.Original.Width -}}" |
||||
height="{{- .Meta.Original.Height -}}" |
||||
/> |
||||
{{- end }} |
||||
|
||||
{{- define "videoPreview" }} |
||||
<img |
||||
src="{{- .PreviewURL -}}" |
||||
loading="lazy" |
||||
{{- if .Description }} |
||||
alt="{{- .Description -}}" |
||||
title="{{- .Description -}}" |
||||
{{- end }} |
||||
width="{{- .Meta.Small.Width -}}" |
||||
height="{{- .Meta.Small.Height -}}" |
||||
/> |
||||
{{- end }} |
||||
|
||||
{{- define "audioPreview" }} |
||||
{{- if and .PreviewURL .Meta.Small.Width }} |
||||
<img |
||||
src="{{- .PreviewURL -}}" |
||||
loading="lazy" |
||||
{{- if .Description }} |
||||
alt="{{- .Description -}}" |
||||
title="{{- .Description -}}" |
||||
{{- end }} |
||||
width="{{- .Meta.Small.Width -}}" |
||||
height="{{- .Meta.Small.Height -}}" |
||||
/> |
||||
{{- else }} |
||||
<img |
||||
src="/assets/logo.webp" |
||||
loading="lazy" |
||||
{{- if .Description }} |
||||
alt="{{- .Description -}}" |
||||
title="{{- .Description -}}" |
||||
{{- end }} |
||||
width="518" |
||||
height="460" |
||||
/> |
||||
{{- end }} |
||||
{{- end }} |
||||
|
||||
{{- /* Produces something like "1 attachment", "2 attachments", etc */ -}} |
||||
{{- define "attachmentsLength" -}} |
||||
{{- (len .) }}{{- if eq (len .) 1 }} attachment{{- else }} attachments{{- end -}} |
||||
{{- end -}} |
||||
|
||||
{{- /* Produces something like "media photoswipe-gallery odd single" */ -}} |
||||
{{- define "galleryClass" -}} |
||||
media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{ else if eq (len .) 2 }}double{{ end }} |
||||
{{- end -}} |
||||
|
||||
{{- with .MediaAttachments }} |
||||
<div |
||||
class="{{- template "galleryClass" . -}}" |
||||
role="group" |
||||
aria-label="{{- template "attachmentsLength" . -}}" |
||||
> |
||||
{{- range $index, $media := . }} |
||||
<div class="media-wrapper"> |
||||
<details class="{{- $media.Type -}}-spoiler media-spoiler" {{- if not $media.Sensitive }} open{{- end -}}> |
||||
<summary> |
||||
<div class="show sensitive button" aria-hidden="true">Show sensitive media</div> |
||||
<span class="eye button" role="button" tabindex="0" aria-label="Toggle media"> |
||||
<i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i> |
||||
<i class="show fa fa-fw fa-eye" aria-hidden="true"></i> |
||||
</span> |
||||
{{- if or (eq .Type "video") (eq .Type "gifv") }} |
||||
{{- include "videoPreview" $media | indent 4 }} |
||||
{{- else if eq .Type "image" }} |
||||
{{- include "imagePreview" $media | indent 4 }} |
||||
{{- else if eq .Type "audio" }} |
||||
{{- include "audioPreview" $media | indent 4 }} |
||||
{{- end }} |
||||
</summary> |
||||
{{- if or (eq .Type "video") (eq .Type "gifv") }} |
||||
<video |
||||
{{- if eq .Type "video" }} |
||||
preload="none" |
||||
{{- else }} |
||||
preload="auto" |
||||
muted |
||||
{{- end }} |
||||
class="plyr-video photoswipe-slide{{- if eq .Type "gifv" }} gifv{{ end }}" |
||||
controls |
||||
playsinline |
||||
data-pswp-index="{{- $index -}}" |
||||
poster="{{- .PreviewURL -}}" |
||||
data-pswp-width="{{- $media.Meta.Small.Width -}}px" |
||||
data-pswp-height="{{- $media.Meta.Small.Height -}}px" |
||||
{{- if .Description }} |
||||
alt="{{- $media.Description -}}" |
||||
title="{{- $media.Description -}}" |
||||
{{- end }} |
||||
> |
||||
<source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}"/> |
||||
</video> |
||||
{{- else if eq .Type "audio" }} |
||||
<video |
||||
preload="none" |
||||
class="plyr-video photoswipe-slide" |
||||
controls |
||||
playsinline |
||||
data-pswp-index="{{- $index -}}" |
||||
{{- if and $media.PreviewURL $media.Meta.Small.Width }} |
||||
poster="{{- .PreviewURL -}}" |
||||
data-pswp-width="{{- $media.Meta.Small.Width -}}px" |
||||
data-pswp-height="{{- $media.Meta.Small.Height -}}px" |
||||
{{- else }} |
||||
poster="/assets/logo.webp" |
||||
width="518px" |
||||
height="460px" |
||||
{{- end }} |
||||
{{- if .Description }} |
||||
alt="{{- $media.Description -}}" |
||||
title="{{- $media.Description -}}" |
||||
{{- end }} |
||||
> |
||||
<source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}"/> |
||||
</video> |
||||
{{- else if eq .Type "image" }} |
||||
<a |
||||
class="photoswipe-slide" |
||||
href="{{- $media.URL -}}" |
||||
target="_blank" |
||||
data-pswp-width="{{- $media.Meta.Original.Width -}}px" |
||||
data-pswp-height="{{- $media.Meta.Original.Height -}}px" |
||||
data-cropped="true" |
||||
{{- if .Description }} |
||||
alt="{{- $media.Description -}}" |
||||
title="{{- $media.Description -}}" |
||||
{{- end }} |
||||
> |
||||
{{- with $media }} |
||||
{{- include "imagePreview" . | indent 4 }} |
||||
{{- end }} |
||||
</a> |
||||
{{- else }} |
||||
<a |
||||
class="unknown-attachment" |
||||
href="{{- $media.RemoteURL -}}" |
||||
rel="nofollow noreferrer noopener" |
||||
target="_blank" |
||||
{{- if .Description }} |
||||
title="Open external media: {{ $media.Description -}} {{- $media.RemoteURL -}}" |
||||
{{- else }} |
||||
title="Open external media. {{- $media.RemoteURL -}}" |
||||
{{- end }} |
||||
> |
||||
<div class="placeholder" aria-hidden="true"> |
||||
<i class="placeholder-external-link fa fa-external-link"></i> |
||||
<i class="placeholder-icon fa fa-file-text"></i> |
||||
<div class="placeholder-link-to">External media</div> |
||||
</div> |
||||
</a> |
||||
{{- end }} |
||||
</details> |
||||
</div> |
||||
{{- end }} |
||||
</div> |
||||
{{- end }} |
||||
Loading…
Reference in new issue