ayo/threads
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: show link_card on home; apply balance text wrap

Browse source
This commit is contained in:
Ayo Ayco 2024-05-01 22:16:33 +02:00
parent be359915d7
commit bbe2f41c5e
1 changed files with 68 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
templates/threads.html
View file

@ -80,6 +80,10 @@
display: inline; display: inline;
} }
& a:has(.link_card) {
text-decoration: none
}
& .media, & .link_card { & .media, & .link_card {
border: 1px solid rgba(34, 34, 34, 0.15); border: 1px solid rgba(34, 34, 34, 0.15);
border-radius: 5px; border-radius: 5px;
@ -87,6 +91,8 @@
max-width: 100%; max-width: 100%;
margin: 15px 0 1em; margin: 15px 0 1em;
object-fit: cover; object-fit: cover;
text-decoration: none;
text-wrap: balance;
} }
& .media:hover, & .link_card:hover { & .media:hover, & .link_card:hover {
@ -113,11 +119,12 @@
text-align: right; text-align: right;
color: #888; color: #888;
& a:hover{
color: blue
}
& a{ & a{
color: #888; color: #888;
&:hover {
color: blue;
}
} }
} }
@ -182,14 +189,16 @@
} }
main a { main a {
color: orange; color: orange;
} }
.card_content { .card_content {
& .action { & .action {
color: orange; color: orange;
} }
& .heading .author a { & .heading .author a {
color: #f8f9fa; color: #f8f9fa;
}
& .heading .right_menu a:hover {
color: orange;
} }
& .body { & .body {
code { code {
@ -250,31 +259,47 @@
</div> </div>
<div class="body"> <div class="body">
{{thread.content | safe}} {% if thread.descendants is defined %} {{thread.content | safe}}
{% for media in thread.media_attachments %} {% if media.type == {% if thread.descendants is defined %}
'image'%} {% for media in thread.media_attachments %}
<a href="{{ media.url }}"> {% if media.type == 'image'%}
<img <a href="{{ media.url }}">
class="media" <img
src="{{media.preview_url}}" class="media"
alt="{{ media.description or 'media attachment' }}" src="{{media.preview_url}}"
title="{{ media.description or 'media attachment' }}" alt="{{ media.description or 'media attachment' }}"
/> title="{{ media.description or 'media attachment' }}"
</a> />
{% elif media.type == 'gifv' %} </a>
<video {% elif media.type == 'gifv' %}
class="media" <video
controls class="media"
autoplay="autoplay" controls
muted autoplay="autoplay"
loop muted
alt="{{ media.description or 'media attachment' }}" loop
title="{{ media.description or 'media attachment' }}" alt="{{ media.description or 'media attachment' }}"
> title="{{ media.description or 'media attachment' }}"
<source src="{{media.url}}" type="video/mp4" /> >
Your browser does not support the video tag. <source src="{{media.url}}" type="video/mp4" />
</video> Your browser does not support the video tag.
{% endif %} {% endfor %} {% endif %} </video>
{% endif %}
{% endfor %}
{% endif %}
{% if thread.media_attachments|length <= 0 and thread.card %}
<a href="{{ thread.card.url }}">
<div class="link_card">
<small>
{{ thread.card.provider_name or
thread.card.provider_url }}
</small>
<strong>{{ thread.card.title }}</strong>
<small>{{thread.card.description}}</small>
</div>
</a>
{% endif %}
</div> </div>
{% if thread.descendants is defined %} {% if thread.descendants is defined %}
@ -307,7 +332,7 @@
<div class="body"> <div class="body">
{{ descendant.content | safe }} {{ descendant.content | safe }}
{% for media in descendant.media_attachments%} {% for media in descendant.media_attachments %}
{% if media.type == 'image'%} {% if media.type == 'image'%}
<a href="{{ media.url }}"> <a href="{{ media.url }}">
<img <img
@ -332,17 +357,17 @@
</video> </video>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% if descendant.card %} {% if descendant.media_attachments|length <= 0 and descendant.card %}
<a href="{{ descendant.card.url }}"> <a href="{{ descendant.card.url }}">
<div class="link_card"> <div class="link_card">
<small> <small>
{{ descendant.card.provider_name or {{ descendant.card.provider_name or
descendant.card.provider_url }} descendant.card.provider_url }}
</small> </small>
<strong>{{ descendant.card.title }}</strong> <strong>{{ descendant.card.title }}</strong>
<small>{{descendant.card.description}}</small> <small>{{descendant.card.description}}</small>
</div> </div>
</a> </a>
{% endif %} {% endif %}
</div> </div>
</div> </div>