mirror of
https://github.com/jointakahe/takahe.git
synced 2024-12-23 14:00:28 +00:00
1349144e37
* Filter outbound and inbound follows by active state * Change pill appearance to distinguish it from buttons * Signal destructive action when hovering unfollow buttons * Add hover style to the top "tabs"/"filters" * Make filters icon have the same width so selecting them doesn't change the options total width, which is mildly unnerving
64 lines
2.5 KiB
HTML
64 lines
2.5 KiB
HTML
{% extends "base.html" %}
|
|
{% load activity_tags %}
|
|
|
|
{% block subtitle %}Follows{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="view-options">
|
|
{% if inbound %}
|
|
<a href=".">Your Follows ({{ num_outbound }})</a>
|
|
<a href="." class="selected">Follows You ({{ num_inbound }})</a>
|
|
{% else %}
|
|
<a href=".?inbound=true" class="selected">Your Follows ({{ num_outbound }})</a>
|
|
<a href=".?inbound=true">Follows You ({{ num_inbound }})</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<section class="icon-menu">
|
|
{% for identity in page_obj %}
|
|
<a class="option" href="{{ identity.urls.view }}">
|
|
<img src="{{ identity.local_icon_url.relative }}" loading="lazy">
|
|
<span class="handle">
|
|
{{ identity.html_name_or_handle }}
|
|
<small>@{{ identity.handle }}</small>
|
|
</span>
|
|
|
|
{% if identity.id in outbound_ids %}
|
|
<span class="pill">Following</span>
|
|
{% endif %}
|
|
{% if identity.id in inbound_ids %}
|
|
<span class="pill">Follows You</span>
|
|
{% endif %}
|
|
|
|
<div class="right">
|
|
{% if inbound %}
|
|
<form action="{{ identity.urls.action }}" method="POST" class="follow">
|
|
{% csrf_token %}
|
|
{% if identity.id in outbound_ids %}
|
|
<input type="hidden" name="action" value="unfollow">
|
|
<button class="destructive">Unfollow</button>
|
|
{% else %}
|
|
<input type="hidden" name="action" value="follow">
|
|
<button>Follow</button>
|
|
{% endif %}
|
|
</form>
|
|
{% endif %}
|
|
|
|
<time>{{ identity.follow_date | timedeltashort }} ago</time>
|
|
</div>
|
|
</a>
|
|
{% empty %}
|
|
<p class="option empty">You have no follows.</p>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<div class="pagination">
|
|
{% if page_obj.has_previous %}
|
|
<a class="button" href=".?page={{ page_obj.previous_page_number }}{% if inbound %}&inbound=true{% endif %}">Previous Page</a>
|
|
{% endif %}
|
|
|
|
{% if page_obj.has_next %}
|
|
<a class="button" href=".?page={{ page_obj.next_page_number }}{% if inbound %}&inbound=true{% endif %}">Next Page</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|