brutaldon-interfaccia-web-minimale/brutaldon/templates/main/toot_partial.html

{% load humanize %}
{% load sanitizer %}

<article class="media">
    <figure class="media-left">
        <p class="image is-64x64">
            <img src="{{ toot.account.avatar }}"
                 alt="">
        </p>
        {% if reblog %}
            <p class="image is-32x32 reblog-icon" >
                <img src ="{{ reblog_icon }}" alt="">
            </p>
        {% endif %}
    </figure>
    <div class="media-content">
        <div class="content">
            <p>
                <strong>{{ toot.account.display_name }}</strong>
                <small>@{{ toot.account.acct }}</small>
                <a href="{{ toot.url }}">
                    <small>{{ toot.created_at |naturaltime  }}</small>
                </a>
                {% if reblog %}
                    <br>
                    Boosted by @{{ reblog_by }}
                {% endif %}
            </p>
            {% if toot.spoiler_text %}
                <p>
                    <strong>{{ toot.spoiler_text }} </strong>
                </p>
            {% endif %}
            <div class="toot">
                {{ toot.content | strip_html | safe }}
            </div>

            {% if toot.media_attachments %}
                <br>
                <div class="level">
                    <div class="level-left">
                        {% for media in toot.media_attachments %}
                            <a class="level-item" href="{{ media.url }}">
                                <img src="{{ media.preview_url }}"
                                     alt="{% if media.description  %}
                                          {{ media.description }}
                                     {% elif media.text_url %}
                                          {{ media.text_url }}
                                     {% else %}
                                          {{ media.url  }}
                                     {% endif %}"
                                     {% if media.description %}
                                     title="{{ media.description }}"
                                     {% endif %}
                                     class="image is-128x128">
                            </a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            <br>
        </div>
        <p class="is-hidden"></p>
        <nav class="level is-mobile">
            <div class="level-left">
                <a class="level-item" href="{% url "reply" toot.id %}">
                    <span class="icon is-small"><i class="fa fa-reply">
                        <span class="is-invisible">Reply</span>
                    </i></span>
                </a>
                <a class="level-item" href="{% url "boost" toot.id %}">
                    <span class="icon is-small">
                    {% if toot.reblogged %}
                        <i class="fa fa-retweet has-text-warning">
                    {% else %}
                        <i class="fa fa-retweet" >
                    {% endif %}
                        <span class="is-invisible" >Boost</span>
                    </i>
                    </span>
                </a>
                <a class="level-item" href="{% url "fav" toot.id %}">
                    <span class="icon is-small">
                        {% if toot.favourited %}
                            <i class="fa fa-heart has-text-warning">
                        {% else %}
                            <i class="fa fa-heart">
                        {% endif %}
                            <span class="is-invisible" >Favorite</span>
                        </i>
                    </span>
                </a>
            </div>
            <div class="level-right">
                <span class="level-item">
                    {{ toot.visibility }}
                </span>
                <a class="level-item" href="{% url "thread" toot.id %}">
                    thread
                </a>
            </div>
        </nav>
    </div>
    <div class="media-right">
    </div>
</article>