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

feat: show avatar; adjust layout

Browse source
This commit is contained in:
Ayo Ayco 2024-04-24 13:46:16 +02:00
parent f218e205e7
commit f27ea9278f
1 changed files with 61 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
templates/threads.html
View file

@ -10,14 +10,13 @@
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
max-width: 570px;
margin: 0 auto;
padding: 1em;
}
header {
header, footer {
background: linear-gradient(45deg, #3054bf, #416fff);
color: white;
width: 100%;
padding: 1em;
border-radius: 5px;
margin: 1em 0;
}
summary {
cursor: pointer;
@ -27,30 +26,43 @@
list-style: none;
}
.card {
display:block;
margin-left: -40px;
margin-top: 1em;
border: 1px solid rgba(34, 34, 34, 0.15);
border: 1px solid rgba(34, 34, 34, 0.35);
border-radius: 5px;
padding:1em;
background-color: #fff;
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
}
.card_meta {
font-size: small; color: #888;
display: grid;
grid-template-columns: 55px auto;
gap: 5px;
}
.card_content {
width
& * {
margin-top: 1em;
}
& img, & video {
border-radius: 5px;
max-width: 100%;
height: 300px;
object-fit: cover;
}
& .meta {
font-size: small; color: #888;
}
}
.card_avatar img {
border: 1px solid rgba(34, 34, 34, 0.35);
border-radius: 50%;
display: inline;
width: 50px;
}
</style>
</head>
<body>
@ -62,10 +74,18 @@
<ul>
{% for thread in threads %}
<li class="card">
<div class="card_meta">
<span>{{ thread.created_at }}</span> &#8729; <a href="{{thread.url}}" target="_blank">&nearr;</a>
<div class="card_avatar">
{% if thread.account.avatar is defined %}
<img class="avatar" src="{{thread.account.avatar}}" />
{% endif %}
</div>
<div class="card_content">
<div class="meta">
<span>{{ thread.created_at }}</span> &#8729; <a href="{{thread.url}}" target="_blank">&nearr;</a>
</div>
{{thread.content | safe}}
{% for media in thread.media_attachments %}
@ -78,35 +98,40 @@
</video>
{% endif %}
{% endfor %}
<details>
<summary>See more</summary>
<ul>
{% for descendant in thread.descendants %}
<li class="card">
<div class="card_meta">
<span>{{ descendant.created_at }}</span> &bullet; <a href="{{descendant.url}}" target="_blank">&nearr;</a>
</div>
<div class="card_content">
{{ descendant.content | safe }}
{% for media in descendant.media_attachments%}
{% if media.type == 'image'%}
<img src="{{media.url}}" />
{% elif media.type == 'gifv' %}
<video autoplay loop>
<source src="{{media.url}}" type="video/mp4">
Your browser does not support the video tag.
</video>
{% endif %}
{% endfor %}
</div>
<li>
{% endfor %}
</ul>
</details>
</div>
<details>
<summary>See more</summary>
<ul>
{% for descendant in thread.descendants %}
<li class="card">
<div class="card_meta">
<span>{{ descendant.created_at }}</span> &bullet; <a href="{{descendant.url}}" target="_blank">&nearr;</a>
</div>
<div class="card_content">
{{ descendant.content | safe }}
{% for media in descendant.media_attachments%}
{% if media.type == 'image'%}
<img src="{{media.url}}" />
{% elif media.type == 'gifv' %}
<video autoplay loop>
<source src="{{media.url}}" type="video/mp4">
Your browser does not support the video tag.
</video>
{% endif %}
{% endfor %}
</div>
<li>
{% endfor %}
</ul>
</details>
</li>
{% endfor %}
</ul>
</main>
<footer>
&copy; 2024 Ayo Ayco
</footer>
</body>
</html>