add skweet image/video support

This commit is contained in:
cel 🌸 2023-02-16 13:08:17 +00:00
parent b8bbceb00b
commit 059cf500e7
Signed by: cel
GPG Key ID: 48E29AF13B5F1349
2 changed files with 11 additions and 5 deletions

View File

@ -51,7 +51,7 @@ a.active {
color: #311f20; color: #311f20;
} }
img { img, video {
max-width: 100%; max-width: 100%;
border: 4px solid #311f20; border: 4px solid #311f20;
} }
@ -292,7 +292,8 @@ iframe {
gap: 1em; gap: 1em;
} }
.skweet-gallery img { .skweet-gallery img,
.skweet-gallery video {
border: 4px solid #bf42a0; border: 4px solid #bf42a0;
flex: 1 1 auto; flex: 1 1 auto;
width: 10px; width: 10px;
@ -387,4 +388,4 @@ iframe {
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
transform: scaleX(-1); transform: scaleX(-1);
z-index: 4; z-index: 4;
} }

View File

@ -5,12 +5,16 @@
<div class="skweet"> <div class="skweet">
<img src="{{ skweet.account.avatar }}" class="profile"> <img src="{{ skweet.account.avatar }}" class="profile">
<div class="skweet-content"> <div class="skweet-content">
<div class="skweet-info"><h4>{{ skweet.account.username }}</h4><a href="skweet.url"><h5>{{ skweet.created_at | date(format="%Y-%m-%d %H:%M") }}UTC</h5></a></div> <div class="skweet-info"><h4>{{ skweet.account.username }}</h4><a href="{{ skweet.url }}" target="_blank" rel="noopener noreferrer"><h5>{{ skweet.created_at | date(format="%Y-%m-%d %H:%M") }}UTC</h5></a></div>
<div class="skweet-text">{{ skweet.content }}</div> <div class="skweet-text">{{ skweet.content }}</div>
{% if skweet.media_attachments[0] %} {% if skweet.media_attachments[0] %}
<div class="skweet-gallery"> <div class="skweet-gallery">
{% for media_attachment in skweet.media_attachments %} {% for media_attachment in skweet.media_attachments %}
{% if media_attachment.type == "image" %}
<img src="{{ media_attachment.url }}"> <img src="{{ media_attachment.url }}">
{% elif media_attachment.type == "video" %}
<video controls src="{{ media_attachment.url }}"></video>
{% endif %}
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
@ -18,4 +22,5 @@
</div> </div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>