<!-- user_page.html --> {% extends "base.html" %} {% block title %}{{ user.artist }}'s User Page{% endblock %} {% load custom_filters %} {% load static %} {% block content %} <div class="row g-4 mt-4"> <h1 class="">Archive of {{ user.artist }}'s Submissions</h1> <div class="gallery-container"> {% for submission in page_obj %} <a class="img-holder" href="{% url 'fa:submission_detail' submission_id=submission.submission_id %}"> <div class="layer"> <h3>{{ submission.title }}</h3> <p>{{ submission.date |date:'Y-m-d H:i' }}</p> <p class="badge bg-secondary text-2xl"> {{ submission.mature_rating.mature }}</p> </div> {% if submission.file %} {% if submission.file.file.url|is_image %} {% if submission.mature_rating.mature == "Adult" or submission.mature_rating.mature == "Mature" %} <img class="blur" src="{{ submission.file.file.url }}" alt="{{ submission.title }}"> {% else %} <img src="{{ submission.file.file.url }}" alt="{{ submission.title }}"> {% endif %} {% else %} <img src="{% static 'img/no-image-dark.webp' %}" alt="No image"> {% endif %} {% else %} <img src="{% static 'img/no-image-dark.webp' %}" alt="No image"> {% endif %} </a> {% endfor %} </div> </div> <div class="row justify-content-center border border-2"> <!-- Display Bootstrap pagination --> <div class="col-6"> <nav aria-label="Page navigation"> <ul class="pagination justify-content-center"> {% if page_obj.has_previous %} <li class="page-item"> <a class="page-link" href="?page=1" aria-label="First"> « </a> </li> <li class="page-item"> <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous"> <span aria-hidden="true">‹</span> </a> </li> {% endif %} <li class="page-item disabled"> <span class="page-link"> Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}. </span> </li> {% if page_obj.has_next %} <li class="page-item"> <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next"> <span aria-hidden="true">›</span> </a> </li> <li class="page-item"> <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last"> » </a> </li> {% endif %} </ul> </nav> </div> <!-- Jump-to field --> <div class="col-3"> <form method="GET" class="row g-3"> <label for="jumpToPage" class="col-auto col-form-label">Jump to:</label> <div class="col-3"> <input type="number" name="page" id="jumpToPage" class="form-control" min="1" max="{{ page_obj.paginator.num_pages }}" value="{{ page_obj.number }}"> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary">Go</button> </div> </form> </div> </div> {% comment %} <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> {% endcomment %} {% endblock %} {% comment %} {% block scripts %} {{ block.super }} <script> // Enable Bootstrap tooltips document.addEventListener("DOMContentLoaded", function () { const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); }); </script> {% endblock %} {% endcomment %}