~crocmagnon/blog

23985a3263ac83aab2f72e90ec98bfea4632a7fc — Gabriel Augendre 5 months ago 1fa73b9
Highlight targeted comment & add permalink
M articles/static/style.css => articles/static/style.css +8 -0
@@ 229,6 229,14 @@ textarea, input {
    color: var(--main3);
}

.comment:target {
    background-color: var(--warning-background);
}

.permalink {
    font-size: 80%;
}

/* MESSAGES */
.messages p {
    background-color: var(--background2);

M articles/templates/articles/article_detail.html => articles/templates/articles/article_detail.html +1 -31
@@ 11,35 11,5 @@
            {{ article.get_formatted_content|safe }}
        </div>
    </article>
    <section class="comments">
        <h2>Comments</h2>
        {% for comment in comments %}
            <article id="{{ comment.id }}" class="comment">
                <p class="metadata">
                    <span class="username">{{ comment.username }}</span> |
                    <time datetime="{{ comment.created_at|date:'c' }}">
                        {{ comment.created_at|date:"DATETIME_FORMAT" }}
                    </time>
                    {% include "articles/admin_link_snippet.html" with article=comment %}
                </p>
                <p class="content">
                    {{ comment.content|linebreaksbr }}
                </p>
            </article>
        {% empty %}
            No reaction yet, write your own!
        {% endfor %}
        <form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
            {% csrf_token %}
            <table>
                {{ form.as_table }}
            </table>
            <button type="submit">Submit</button>
            <p class="helptext">
                Your comment may not be approved if it's not respectful, on topic or spammy.
                If you feel I've made a mistake with your comment, please
                <a href="/about-me/">send me a message</a>!
            </p>
        </form>
    </section>
    {% include 'articles/comment_snippet.html' %}
{% endblock %}

A articles/templates/articles/comment_snippet.html => articles/templates/articles/comment_snippet.html +32 -0
@@ 0,0 1,32 @@
<section class="comments">
    <h2>Comments</h2>
    {% for comment in comments %}
        <article id="{{ comment.id }}" class="comment">
            <p class="metadata">
                <a class="permalink" title="Permalink" href="#{{ comment.id }}">🔗</a>
                <span class="username">{{ comment.username }}</span> |
                <time datetime="{{ comment.created_at|date:'c' }}">
                    {{ comment.created_at|date:"DATETIME_FORMAT" }}
                </time>
                {% include "articles/admin_link_snippet.html" with article=comment %}
            </p>
            <p class="content">
                {{ comment.content|linebreaksbr }}
            </p>
        </article>
    {% empty %}
        No reaction yet, write your own!
    {% endfor %}
    <form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
        {% csrf_token %}
        <table>
            {{ form.as_table }}
        </table>
        <button type="submit">Submit</button>
        <p class="helptext">
            Your comment may not be approved if it's not respectful, on topic or spammy.
            If you feel I've made a mistake with your comment, please
            <a href="/about-me/">send me a message</a>!
        </p>
    </form>
</section>