Merge pull request #278 from nossas/feature/add-pagination

Feature/add pagination
nossas · Aug 30, 2024 · ef68013 · ef68013
2 parents 453cedb + 54e028e
commit ef68013
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 4 deletions.
diff --git a/app/org_eleicoes/votepeloclima/candidature/static/scss/candidaturesearch.scss b/app/org_eleicoes/votepeloclima/candidature/static/scss/candidaturesearch.scss
@@ -117,6 +117,25 @@ legend.form-label {
             color: var(--bs-secondary);
         }
     }
+
+    .state-city {
+        font-size: 12px;
+    }
+}
+
+.pagination {
+    --bs-pagination-bg: var(--bs-tertiary-bg);
+    --bs-pagination-color: var(--bs-secondary);
+    --bs-pagination-hover-color: var(--bs-secondary);
+
+    --bs-pagination-active-color: var(--bs-tertiary-bg);
+    --bs-pagination-active-bg: var(--bs-secondary);
+    --bs-pagination-active-border-color: var(--bs-secondary);
+    --bs-pagination-focus-color: var(--bs-secondary);
+
+    .page-link:focus {
+        box-shadow: none;
+    }
 }
 
 // Hide Inputs

diff --git a/app/org_eleicoes/votepeloclima/candidature/templates/candidature/candidature_search.html b/app/org_eleicoes/votepeloclima/candidature/templates/candidature/candidature_search.html
@@ -45,7 +45,7 @@ <h6 class="text-uppercase fw-bold"><i class="ds-sidebar-bars"></i> Filtrar resul
                     <a class="card" href="{% url 'candidate_profile' candidature.slug %}">
                         <img src="{{ candidature.photo.url }}" class="card-img-top" alt="Foto de {{ candidature.legal_name }}">
                         <div class="card-body px-2 py-1">
-                            <p class="mb-1 fs-6 text-black-50">{{ candidature.get_state_display }} - {{ candidature.get_city_display }}</p>
+                            <p class="state-city mb-1 text-black-50">{{ candidature.get_state_display }} - {{ candidature.get_city_display }}</p>
                             <div class="card-title">
                                 <h5 class="fw-bold">{{ candidature.ballot_name }}</h5>
                             </div>
@@ -55,9 +55,6 @@ <h6>{{ candidature.get_intended_position_display }} | {{ candidature.get_politic
                                 <p class="text-muted form-text">
                                     {{ candidature.get_proposes_display|join:" / "|escape }}
                                 </p>
-                                {% if candidature.is_collective_mandate %}
-                                <strong class="fs-6">Candidatura Coletiva</strong>
-                                {% endif %}
                             </div>
                         </div>
                         <div class="card-footer">
@@ -77,6 +74,30 @@ <h5 class="text-uppercase fw-bold text-center">Infelizmente nenhuma candidatura
                 </div>
                 {% endfor %}
             </div>
+            <ul class="pagination justify-content-end mt-3">
+                <li class="page-item{% if not page_obj.has_previous %} disabled{% endif %}">
+                    <a class="page-link"{% if page_obj.has_previous %} href="?page={{ page_obj.previous_page_number }}"{% endif %}>
+                        <i class="ds-paginator-previous"></i>
+                    </a>
+                </li>
+
+                <!-- <span class="current">
+                    Page {{ page_obj.number }} of {{ page_obj.paginator.page_range }}.
+                </span> -->
+                {% for page_number in page_obj.paginator.page_range %}
+                <li class="page-item{% if page_number == page_obj.number %} active{% endif %}">
+                    <a class="page-link"{% if page_number != page_obj.number %} href="?page={{ page_number }}"{% endif %}>
+                        {{ page_number }}
+                    </a>
+                </li>
+                {% endfor %}
+
+                <li class="page-item{% if not page_obj.has_next %} disabled{% endif %}">
+                    <a class="page-link"{% if page_obj.has_next %} href="?page={{ page_obj.next_page_number }}"{% endif %}>
+                        <i class="ds-paginator-next"></i>
+                    </a>
+                </li>
+            </ul>
         </div>
     </div>
 </main>

diff --git a/app/org_eleicoes/votepeloclima/candidature/views/filters.py b/app/org_eleicoes/votepeloclima/candidature/views/filters.py
@@ -9,6 +9,7 @@ class CandidatureSearchView(ListView):
     model = Candidature
     template_name = "candidature/candidature_search.html"
     context_object_name = "candidatures"
+    paginate_by = 12
 
     search_filter_fields = [
         "legal_name",

diff --git a/app/org_eleicoes/votepeloclima/static/scss/icons.scss b/app/org_eleicoes/votepeloclima/static/scss/icons.scss
@@ -329,4 +329,22 @@
     background-repeat: no-repeat;
     display: inline-block;
 	background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.64567 4.68205C1.69212 4.63549 1.74729 4.59854 1.80804 4.57334C1.86878 4.54813 1.93391 4.53516 1.99967 4.53516C2.06544 4.53516 2.13056 4.54813 2.19131 4.57334C2.25205 4.59854 2.30723 4.63549 2.35367 4.68205L7.99967 10.3291L13.6457 4.68205C13.6922 4.63556 13.7473 4.59869 13.8081 4.57353C13.8688 4.54837 13.9339 4.53542 13.9997 4.53542C14.0654 4.53542 14.1305 4.54837 14.1913 4.57353C14.252 4.59869 14.3072 4.63556 14.3537 4.68205C14.4002 4.72854 14.437 4.78373 14.4622 4.84447C14.4874 4.90521 14.5003 4.97031 14.5003 5.03605C14.5003 5.10179 14.4874 5.16689 14.4622 5.22763C14.437 5.28837 14.4002 5.34356 14.3537 5.39005L8.35367 11.39C8.30723 11.4366 8.25205 11.4736 8.19131 11.4988C8.13056 11.524 8.06544 11.5369 7.99967 11.5369C7.93391 11.5369 7.86878 11.524 7.80804 11.4988C7.74729 11.4736 7.69212 11.4366 7.64567 11.39L1.64567 5.39005C1.59911 5.3436 1.56217 5.28843 1.53696 5.22768C1.51175 5.16694 1.49878 5.10182 1.49878 5.03605C1.49878 4.97028 1.51175 4.90516 1.53696 4.84442C1.56217 4.78367 1.59911 4.7285 1.64567 4.68205Z" fill="%23C15303"/></svg>');
+}
+
+.ds-paginator-previous {
+    width: 12px;
+    height: 13px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+	background-image: url('data:image/svg+xml,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3576_30196)"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.51519 1.77033C8.55012 1.80516 8.57782 1.84654 8.59673 1.8921C8.61563 1.93766 8.62536 1.9865 8.62536 2.03583C8.62536 2.08515 8.61563 2.13399 8.59673 2.17955C8.57782 2.22511 8.55012 2.26649 8.51519 2.30133L4.27994 6.53583L8.51519 10.7703C8.58561 10.8407 8.62517 10.9362 8.62517 11.0358C8.62517 11.1354 8.58561 11.2309 8.51519 11.3013C8.44478 11.3717 8.34928 11.4113 8.24969 11.4113C8.15011 11.4113 8.05461 11.3717 7.98419 11.3013L3.48419 6.80133C3.44927 6.76649 3.42156 6.72511 3.40266 6.67955C3.38375 6.63399 3.37402 6.58515 3.37402 6.53583C3.37402 6.4865 3.38375 6.43766 3.40266 6.3921C3.42156 6.34654 3.44927 6.30516 3.48419 6.27033L7.98419 1.77033C8.01903 1.7354 8.06041 1.7077 8.10597 1.68879C8.15153 1.66989 8.20037 1.66016 8.24969 1.66016C8.29902 1.66016 8.34786 1.66989 8.39342 1.68879C8.43898 1.7077 8.48036 1.7354 8.51519 1.77033Z" fill="%231C7820"/></g><defs><clipPath id="clip0_3576_30196"><rect width="12" height="12" fill="white" transform="translate(0 0.535156)"/></clipPath></defs></svg>');
+}
+
+.ds-paginator-next {
+    width: 12px;
+    height: 13px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+	background-image: url('data:image/svg+xml,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3576_44683)"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.48419 1.77033C3.51903 1.7354 3.56041 1.7077 3.60597 1.68879C3.65153 1.66989 3.70037 1.66016 3.74969 1.66016C3.79902 1.66016 3.84786 1.66989 3.89342 1.68879C3.93898 1.7077 3.98036 1.7354 4.01519 1.77033L8.51519 6.27033C8.55012 6.30516 8.57782 6.34654 8.59673 6.3921C8.61563 6.43766 8.62536 6.4865 8.62536 6.53583C8.62536 6.58515 8.61563 6.63399 8.59673 6.67955C8.57782 6.72511 8.55012 6.76649 8.51519 6.80133L4.01519 11.3013C3.94478 11.3717 3.84928 11.4113 3.74969 11.4113C3.65011 11.4113 3.55461 11.3717 3.48419 11.3013C3.41378 11.2309 3.37422 11.1354 3.37422 11.0358C3.37422 10.9362 3.41378 10.8407 3.48419 10.7703L7.71944 6.53583L3.48419 2.30133C3.44927 2.26649 3.42156 2.22511 3.40266 2.17955C3.38375 2.13399 3.37402 2.08515 3.37402 2.03583C3.37402 1.9865 3.38375 1.93766 3.40266 1.8921C3.42156 1.84654 3.44927 1.80516 3.48419 1.77033Z" fill="%231C7820"/></g><defs><clipPath id="clip0_3576_44683"><rect width="12" height="12" fill="white" transform="translate(0 0.535156)"/></clipPath></defs></svg>');
 }