71 lines
2.3 KiB
HTML
71 lines
2.3 KiB
HTML
{%extends 'base.html'%}
|
|
{%load static%}
|
|
{%block extracss%}
|
|
<link rel="stylesheet" href="{% static 'DetectionApp/css/history.css' %}">
|
|
{%endblock extracss%}
|
|
{%block content%}
|
|
<div class="history_list">
|
|
<h2>History</h2>
|
|
<div id="container" class="rounded">
|
|
{% if page_obj%}
|
|
{% for detection in page_obj %}
|
|
<div class="history_details">
|
|
<a href="{%url 'detection-details' pk=detection.id %}">
|
|
<div class="history_details" id="histroy_det">
|
|
<img src="{{detection.images.first.image.url}}" alt="upload_image" style="width:125px; height:125px;">
|
|
<div class="date_author" id="date_auth">
|
|
<p class="date">{{detection.date_predicted}}</p>
|
|
<p class="author">{{detection.owner}}</p>
|
|
<p class="num_images">Images uploaded: {{detection.images.all.count}}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
{%else%}
|
|
<p class="none_info">Nothing here yet ...</p>
|
|
{%endif%}
|
|
</div>
|
|
<div class="pagination">
|
|
<span class="step-links">
|
|
{% if page_obj.has_previous %}
|
|
<a href="?page=1">« first</a>
|
|
<a href="?page={{ page_obj.previous_page_number }}">previous</a>
|
|
{% endif %}
|
|
|
|
<span class="current">
|
|
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
|
|
</span>
|
|
|
|
{% if page_obj.has_next %}
|
|
<a href="?page={{ page_obj.next_page_number }}">next</a>
|
|
<a href="?page={{ page_obj.paginator.num_pages }}">last »</a>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
window.addEventListener('resize', function() {
|
|
var historyElement = document.querySelectorAll('.history_details');
|
|
var date = document.querySelectorAll('.date_author')
|
|
var windowWidth = window.innerWidth;
|
|
|
|
if (windowWidth <= 700) {
|
|
historyElement.forEach(history =>{
|
|
history.style.cssText = 'flex-wrap: wrap !important';
|
|
})
|
|
date.forEach(date_spec =>{
|
|
date_spec.style.cssText = 'align-items: center !important';
|
|
})
|
|
}
|
|
else{
|
|
historyElement.forEach(history =>{
|
|
history.style.cssText = 'flex-wrap: nowrap !important';
|
|
})
|
|
date.forEach(date_spec =>{
|
|
date_spec.style.cssText = 'align-items: flex-end !important';
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
{%endblock content%} |