Plankton_Detector/PlanktonDetector/templates/post_details.html
2024-03-14 23:20:12 +01:00

82 lines
4.0 KiB
HTML

{%extends 'base.html'%}
{%load static%}
{%block extracss%}
<link rel="stylesheet" href="{% static 'Community/css/post_details.css' %}">
{%endblock extracss%}
{%block content%}
<div class="page-container">
<div id="title">{{object.title}}
<div class='icons'>
{% if user == object.author %}
<a href="{% url 'edit_post' pk=object.id %}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/>
</svg></a>
<a href="{% url 'delete_post' pk=object.id %}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
</svg></a>
{% endif %}
</div>
</div>
<div id="container" class="rounded">
<div class="post">
<div class="title-content">
<p id="content">{{object.content|safe}}</p>
</div>
<div class="author">
<p id="author">{{object.author}}</p>
</div>
</div>
{%if user.is_authenticated%}
<div id="add_comment">
<form method="POST" id="comment_form">
{%csrf_token%}
{{form}}
<input type="submit" class='btn btn-primary' id="submit" value="Add comment">
</form>
</div>
{%endif%}
<div class="comments">
{%for comment in object.sorted_comments%}
<div class="single-comment">
<p id="comment-content">{{comment.content}}</p>
<div class="date_author">
<p id="comment-date">{{comment.date_added}}</p>
<p id="comment-author">{{comment.author}}</p>
<p>
{% if user == comment.author %}
<a href="{% url 'delete_comment' pk=comment.id%}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
</svg></a>
{%endif%}
</p>
</div>
</div>
{%endfor%}
</div>
</div>
</div>
<script>
window.addEventListener('resize', function() {
var CommentElement = document.getElementById('comment_form');
var windowWidth = window.innerWidth;
if (windowWidth <= 550) {
CommentElement.style.flexWrap = "wrap";
CommentElement.style.justifyContent = 'center';
}
else{
CommentElement.style.flexWrap = "nowrap";
CommentElement.style.justifyContent = 'space-between';
}
})
var textarea = document.getElementById("id_content")
textarea.classList.add("rounded")
textarea.placeholder ="Add comment"
</script>
{%endblock content%}
{# DODAC PRZYCISKI DO EDITA I DELETE #}