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

style: show line connecting avatars in a tread

Browse source
This commit is contained in:
Ayo Ayco 2024-05-18 08:19:25 +02:00
parent cad6c6e1cc
commit 9123638181
1 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
templates/threads.html
View file

@ -40,19 +40,33 @@
} }
main.home { main.home {
& .back { & .back, & .hashtag {
display: none display: none
} }
} }
main.thread {
& li:not(:last-of-type) .card_avatar::after {
content: " ";
display: block;
height: 100%;
border-right: 2px solid rgba(197, 209, 222, 0.15);
width: 26px;
margin-top: -8px;
}
}
.card_avatar img {
border: 2px solid rgba(197, 209, 222, 0.15);
border-radius: 50%;
display: inline;
width: 50px;
}
ul { ul {
list-style: none; list-style: none;
} }
.card.descendant {
/* TODO: damn, fix the markup maybe */
margin-left: calc(-80px - 1em - 5px);
}
.card { .card {
margin-left: -40px; margin-left: -40px;
display: grid; display: grid;
@ -182,11 +196,6 @@
} }
} }
.card_avatar img {
border-radius: 50%;
display: inline;
width: 50px;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html, body { html, body {
@ -310,7 +319,7 @@
</div> </div>
{% if thread.descendants is defined %} {% if thread.descendants is defined %}
<ul> </li>
{% for descendant in thread.descendants %} {% for descendant in thread.descendants %}
<li class="card descendant"> <li class="card descendant">
<div class="card_avatar"> <div class="card_avatar">
@ -382,8 +391,7 @@
</div> </div>
</li> </li>
<li>{% endfor %}</li> {% endfor %}
</ul>
{% else %} {% else %}
<a <a
@ -391,6 +399,7 @@
href="{{ url_for('threads.thread', id=thread.id) }}" href="{{ url_for('threads.thread', id=thread.id) }}"
>Read full thread</a >Read full thread</a
> >
</li>
{% endif %} {% endif %}
</div> </div>
</li> </li>