Commit 68f5c1d9 authored by Rachel TORCHET's avatar Rachel TORCHET
Browse files

Compounds - Update pagination aspect

parent 642a1961
Pipeline #18500 passed with stages
in 11 minutes and 21 seconds
......@@ -907,6 +907,22 @@ div.hidden {
margin-bottom: 50px;
}
/* PAGINATION */
.fit_pagination {
width: 1154px;
margin: 0 auto;
padding: 10px;
}
.prev_button {
border-top-left-radius: 80px 80px !important;
border-bottom-left-radius: 80px 80px !important;
}
.next_button {
border-top-right-radius: 80px 80px;
border-bottom-right-radius: 80px 80px;
}
/* PARAGRAPH */
.paragraph {
......
......@@ -184,21 +184,7 @@
<span class="open_filters_btn">
<span onclick="openNav()" ><a><i class="fas fa-filter"></i> Open filters</a></span>
</span>
<span class="open_filters_btn dropdown">
<a class="btn btn-sm btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Compounds per page
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" onclick="queryUrl.unPage(); queryUrl.modify('page_size','15');">15</a>
<a class="dropdown-item" href="#" onclick="queryUrl.unPage(); queryUrl.modify('page_size','30');">30</a>
<a class="dropdown-item" href="#" onclick="queryUrl.unPage(); queryUrl.modify('page_size','90');">90</a>
</div>
</span>
<span class="open_filters_btn dropdown">
<a class="btn btn-sm btn-secondary" href="?{% url_replace request 'format' 'csv' %}" target="_blank" role="button" id="downloadCsvLink">
<i class="fas fa-file-csv" title="Download query as CSV"></i>
</a>
</span>
<div class="m-2 d-flex justify-content-between">
<span style="font-family:BrandonGrotesqueBlk; text-transform: uppercase; font-size: 30px;">{{ paginator.count }} compounds found</span>
......@@ -207,6 +193,16 @@
<div class="m-1 ml-auto">
</div>
<div class="btn-group btn-group-sm ml-1">
<span class="open_filters_btn dropdown" style="margin-top: 5px; margin-right: 5px; border: none;">
<a class="btn btn-sm btn-secondary dropdown-toggle compounds_sort_btn" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-top: 5px; margin-right: 5px; border: none;">
Compounds per page
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#" onclick="queryUrl.unPage(); queryUrl.modify('page_size','15');">15</a>
<a class="dropdown-item" href="#" onclick="queryUrl.unPage(); queryUrl.modify('page_size','30');">30</a>
<a class="dropdown-item" href="#" onclick="queryUrl.unPage(); queryUrl.modify('page_size','90');">90</a>
</div>
</span>
<button class="btn btn-secondary dropdown-toggle compounds_sort_btn" type="button" id="sortMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span> Sort by </span>
</button>
......
{% load customtags %}
<nav class="d-flex">
<nav class="d-flex fit_pagination">
<span style="background-color: #2d96fa; padding: 5px; border-radius: 5px;">
<a href="?{% url_replace request 'format' 'csv' %}" target="_blank" role="button" id="downloadCsvLink" style="color:#fff;">
<i class="fas fa-arrow-circle-down" title="Download query as CSV"></i>
<span style="vertical-align: middle;">Download query as CSV</span>
</a>
</span>
<ul class="pagination pagination-sm ml-auto mb-0">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?{% url_replace request 'page' page_obj.previous_page_number %}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<a class="page-link prev_button" href="?{% url_replace request 'page' page_obj.previous_page_number %}" aria-label="Previous">
<span aria-hidden="true"><i class="fas fa-chevron-left"></i></span>
<span class="sr-only">Previous</span>
</a>
</li>
{% endif %}
<li class="page-item disabled">
<span class="page-link">Page {{ page_obj.number }} of {{ paginator.num_pages }}.</span>
<li class="page-item disabled" style="width: 100px;
text-align: center;">
<span class="page-link">{{ page_obj.number }} of {{ paginator.num_pages }}</span>
</li>
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?{% url_replace request 'page' page_obj.next_page_number %}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<a class="page-link next_button" href="?{% url_replace request 'page' page_obj.next_page_number %}" aria-label="Next">
<span aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
<span class="sr-only">Next</span>
</a>
</li>
{% endif %}
<li class="page-item ml-3">
<div class="input-group input-group-sm">
<input id="pageNumber" type="number" min="1" max="{{ paginator.num_pages }}" step="1" placeholder="page #" style="width: 4em;" aria-label="Page number">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" onclick="queryUrl.modify('page',$('#pageNumber').val())">Go</button>
<span style="color: #6b757d; padding: 5px;">Go to page</span>
<input id="pageNumber" type="number" min="1" max="{{ paginator.num_pages }}" step="1" placeholder="#" style="border: solid 1px #dee2e6;border-radius: 5px; width: 3em;
text-align: center;" aria-label="Page number">
<div class="input-group-append" style="margin-left: 5px;">
<button class="btn btn-outline-primary" style="border-radius: 80px 80px;" type="button" onclick="queryUrl.modify('page',$('#pageNumber').val())">Go</button>
</div>
</div>
</li>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment