mirrors/takahe
1
1
Fork 0
mirror of https://github.com/jointakahe/takahe.git synced 2024-10-02 07:01:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

Ux gallery tweaks (#252)

Browse source 
Tweaks to attachment CSS to show a better looking gallery view, video support
This commit is contained in:
Tyler Kennedy 2022-12-24 00:54:03 -05:00 committed by GitHub
parent ff32b521ae
commit b5be9b576d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
activities/models/post_attachment.py
View file

@ -72,6 +72,9 @@ class PostAttachment(StatorModel):
"image/webp", "image/webp",
] ]
def is_video(self):
return self.mimetype in ["video/webm"]
def thumbnail_url(self) -> RelativeAbsoluteUrl: def thumbnail_url(self) -> RelativeAbsoluteUrl:
if self.thumbnail: if self.thumbnail:
return RelativeAbsoluteUrl(self.thumbnail.url) return RelativeAbsoluteUrl(self.thumbnail.url)

25
static/css/style.css
View file

@ -1127,18 +1127,24 @@ form .post {
.post .attachments { .post .attachments {
padding-top: 4px; padding-top: 4px;
display: grid;
grid-template-columns: repeat(2, auto);
grid-column-gap: 4px;
grid-row-gap: 4px;
} }
.post .attachments a.image { .post .attachments a {
display: inline-block; display: block;
border: 3px solid var(--color-bg-menu); width: 100%;
border-radius: 3px;
} }
.post .attachments a.image img { .post .attachments a.image img {
display: block; display: block;
max-width: 200px; max-width: 100%;
max-height: 200px; }
.post .attachments video {
max-width: 100%;
} }
.post .actions { .post .actions {
@ -1327,7 +1333,11 @@ form .post {
position: fixed; position: fixed;
height: 100%; height: 100%;
right: 0; right: 0;
top: 50px; top: var(--md-header-height);
}
.right-column nav {
padding: 0;
} }
body:not(.no-sidebar) header { body:not(.no-sidebar) header {
@ -1396,6 +1406,7 @@ form .post {
.right-column { .right-column {
width: var(--sm-sidebar-width); width: var(--sm-sidebar-width);
top: var(--sm-header-height);
} }
.right-column nav { .right-column nav {

6
templates/activities/_post.html
View file

@ -45,6 +45,12 @@
<a href="{{ attachment.full_url.relative }}" class="image"> <a href="{{ attachment.full_url.relative }}" class="image">
<img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name }}" loading="lazy" /> <img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name }}" loading="lazy" />
</a> </a>
{% elif attachment.is_video %}
<a href="{{ attachment.full_url.relative }}" class="video">
<video muted controls loop>
<source src="{{ attachment.full_url.relative }}">
</video>
</a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>