feat: anchor links for specific post

This commit is contained in:
Ayo Ayco 2024-04-27 13:21:41 +02:00
parent 8383cec7f9
commit db98115e79

View file

@ -68,6 +68,7 @@
} }
.card_content { .card_content {
& .invisible { & .invisible {
display: none; display: none;
} }
@ -112,6 +113,21 @@
} }
} }
& .heading {
&:hover .anchor {
display: block;
}
display: grid;
grid-template-columns: 80% auto;
gap: 5px;
& .anchor {
text-align: right;
display: none;
}
& .author a { & .author a {
display: block; display: block;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -124,6 +140,8 @@
} }
}
& .meta { & .meta {
margin-bottom: 5px; margin-bottom: 5px;
@ -183,7 +201,7 @@
<li class="card"> <li class="card">
<div class="card_avatar"> <div class="card_avatar">
{% if thread.account.avatar is defined %} {% if thread.account.avatar is defined %}
<a href="{{ thread.account.url }}"> <a href="{{ thread.account.avatar }}">
<img class="avatar" src="{{ thread.account.avatar }}" <img class="avatar" src="{{ thread.account.avatar }}"
alt="avatar of {{ thread.account.display_name }}" alt="avatar of {{ thread.account.display_name }}"
title="avatar of {{ thread.account.display_name }}" /> title="avatar of {{ thread.account.display_name }}" />
@ -192,12 +210,18 @@
</div> </div>
<div class="card_content" id="{{ thread.id }}"> <div class="card_content" id="{{ thread.id }}">
<div class="heading">
<h3 class="author"> <h3 class="author">
<a rel="author" href="{{thread.account.url}}" <a rel="author" href="{{thread.account.url}}"
>{{thread.account.display_name | safe}}</a >{{thread.account.display_name | safe}}</a
> >
</h3> </h3>
<div class="anchor">
<a href="{{ url_for('threads.thread', id=thread['id']) }}">anchor</a>
</div>
</div>
<div class="body"> <div class="body">
{{thread.content | safe}} {% if thread.descendants is defined %} {{thread.content | safe}} {% if thread.descendants is defined %}
{% for media in thread.media_attachments %} {% if media.type == {% for media in thread.media_attachments %} {% if media.type ==
@ -238,7 +262,7 @@
<li class="card descendant"> <li class="card descendant">
<div class="card_avatar"> <div class="card_avatar">
{% if descendant.account.avatar is defined %} {% if descendant.account.avatar is defined %}
<a href="{{ descendant.account.url }}"> <a href="{{ descendant.account.avatar }}">
<img class="avatar" src="{{ descendant.account.avatar }}" <img class="avatar" src="{{ descendant.account.avatar }}"
alt="avatar of {{ descendant.account.display_name }}" alt="avatar of {{ descendant.account.display_name }}"
title="avatar of {{ descendant.account.display_name }}" /> title="avatar of {{ descendant.account.display_name }}" />
@ -247,11 +271,18 @@
</div> </div>
<div class="card_content" id="{{ descendant.id }}"> <div class="card_content" id="{{ descendant.id }}">
<div class="heading">
<h3 class="author"> <h3 class="author">
<a rel="author" href="{{descendant.account.url}}" <a rel="author" href="{{descendant.account.url}}"
>{{descendant.account.display_name | safe}}</a >{{descendant.account.display_name | safe}}</a
> >
</h3> </h3>
<div class="anchor">
<a href="{{ url_for('threads.thread', id=thread['id']) + '#' + descendant['id'] }}">anchor</a>
</div>
</div>
<div class="body"> <div class="body">
{{ descendant.content | safe }} {{ descendant.content | safe }}
{% for media in descendant.media_attachments%} {% for media in descendant.media_attachments%}