Improve pagination style and paginate more lists

inventory/templates/inventory/category_list.html

@@ -3,8 +3,12 @@
 {% block "content" %}
   <h1>Liste des catégories</h1>
 
-  <p>Il y a {{ category_list|length }} catégorie{{ category_list|pluralize }} de jeux&nbsp;:</p>
+  <p>Il y a {{ paginator.count }} catégorie{{ paginator.count|pluralize }} de jeux&nbsp;:</p>
+  {% include "partials/pagination.html" %}
+
   {% for category in category_list %}
   {% include "./partials/category_item.html" %}
   {% endfor %}
+
+  {% include "partials/pagination.html" %}
 {% endblock %}

inventory/templates/inventory/game_list.html

@@ -3,8 +3,12 @@
 {% block "content" %}
   <h1>Liste des jeux</h1>
 
-  <p>Il y a {{ game_list|length }} jeu{{ game_list|pluralize:"x" }} en salle jeux&nbsp;:</p>
+  <p>Il y a {{ paginator.count }} jeu{{ paginator.count|pluralize:"x" }} en salle jeux&nbsp;:</p>
+  {% include "partials/pagination.html" %}
+
   {% for game in game_list %}
   {% include "./partials/game_item.html" %}
   {% endfor %}
+
+  {% include "partials/pagination.html" %}
 {% endblock %}

inventory/templates/inventory/partials/pagination.html

@@ -1,8 +0,0 @@
-{% if page_obj.has_other_pages %}
-<div id="pagination">
-  {% if page_obj.has_previous %}<a href="?q={{ query }}&amp;page={{ page_obj.previous_page_number }}">{% endif %}<i class="fa fa-arrow-left" aria-hidden="true"></i> Précédent{% if page_obj.has_previous %}</a>{% endif %}
-  | Page {{ page_obj.number }} sur {{ paginator.num_pages }} |
-  {% if page_obj.has_next %}<a href="?q={{ query }}&amp;page={{ page_obj.next_page_number }}">{% endif %}Suivant <i class="fa fa-arrow-right" aria-hidden="true"></i>{% if page_obj.has_next %}</a>{% endif %}
-</div>
-{% endif %}
-

inventory/templates/inventory/search.html

@@ -22,6 +22,6 @@
       Aucun résultat trouvé
     {% endfor %}
 
-    {% include "./partials/pagination.html" %}
+    {% include "partials/pagination.html" %}
   {% endif %}
 {% endblock %}

inventory/templates/inventory/tag_list.html

@@ -3,8 +3,12 @@
 {% block "content" %}
   <h1>Liste des tags</h1>
 
-  <p>Il y a {{ tag_list|length }} tag{{ tag_list|pluralize }} dans la ludothèque&nbsp;:</p>
+  <p>Il y a {{ paginator.count }} tag{{ paginator.count|pluralize }} dans la ludothèque&nbsp;:</p>
+  {% include "partials/pagination.html" %}
+
   {% for tag in tag_list %}
   {% include "./partials/tag_item.html" %}
   {% endfor %}
+
+  {% include "partials/pagination.html" %}
 {% endblock %}

inventory/views.py

@@ -13,6 +13,7 @@ class InventoryView(TemplateView):
 class CategoryListView(ListView):
     model = Category
     template_name = "inventory/category_list.html"
+    paginate_by = 20
 
 
 class CategoryView(DetailView):
@@ -23,6 +24,7 @@ class CategoryView(DetailView):
 class TagListView(ListView):
     model = Tag
     template_name = "inventory/tag_list.html"
+    paginate_by = 20
 
 
 class TagView(DetailView):
@@ -33,6 +35,7 @@ class TagView(DetailView):
 class GameListView(ListView):
     model = Game
     template_name = "inventory/game_list.html"
+    paginate_by = 20
 
 
 class GameView(DetailView):
@@ -43,6 +46,7 @@ class GameView(DetailView):
 class InventorySearchView(SearchView):
     form_class = SearchForm
     template_name = "inventory/search.html"
+    paginate_by = 20
 
     def get_queryset(self):
         return SearchQuerySet().models(Category, Tag, Game)

website/scss/forms.scss

@@ -148,7 +148,7 @@ form.search {
     flex-direction: row;
 
     input[type="search"] {
-        border-radius: 5px 0 0 5px;
+        border-radius: 10px 0 0 10px;
         border-right: 0;
     }
     button {

website/scss/params.scss

@@ -20,7 +20,6 @@ $footer_bg_color: $header_bg_color;
 
 $indexbar_bg_color_1: rgba($header_bg_color, 0.75);
 $indexbar_bg_color_2: rgba($header_bg_color, 0.6);
-$indexbar_text_color: darken($page_link_color, 15);
 
 $info_box_color: #e0dfff;
 $info_box_border_color: darken($info_box_color, 20%);

website/scss/style.scss

@@ -71,13 +71,18 @@ h3 {
 }
 
 a {
-    text-decoration: underline lighten($header_border_color, 40%);
     color: $page_link_color;
     border-radius: 3px;
+    text-decoration: underline lighten($header_border_color, 40%);
 
     &:hover {
         text-decoration-color: $page_link_color;
     }
+
+    &:not([href]) {
+        color: lighten($page_link_color, 20%);
+        text-decoration: none;
+    }
 }
 
 :focus {
@@ -156,32 +161,20 @@ iframe {
     border: 2px solid $header_border_color;
 }
 
-/*.indexbar {
+.pagination {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: stretch;
 
-    a {
+    a, div {
+        display: block;
         text-align: center;
         flex: 1 1 0;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: stretch;
-
-        color: $indexbar_text_color;
-        text-decoration: none;
-
         border-radius: 0;
 
-        span {
-            margin: auto 5px;
-        }
-
         &:first-child {
-            border-radius: 1ex 0 0 1ex;
+            border-radius: 10px 0 0 10px;
         }
         &:nth-child(odd) {
             background-color: $indexbar_bg_color_1;
@@ -190,10 +183,10 @@ iframe {
             background-color: $indexbar_bg_color_2;
         }
         &:last-child {
-            border-radius: 0 1ex 1ex 0;
+            border-radius: 0 10px 10px 0;
         }
     }
-}*/
+}
 
 #game_infos {
     display: flex;

website/static/css/style.css

@@ -231,7 +231,7 @@ select {
 form.search {
   flex-direction: row; }
   form.search input[type="search"] {
-    border-radius: 5px 0 0 5px;
+    border-radius: 10px 0 0 10px;
     border-right: 0; }
   form.search button {
     margin: 0;
@@ -310,11 +310,14 @@ h3 {
   font-weight: bold; }
 
 a {
-  text-decoration: underline #c9dbe0;
   color: #1e464c;
-  border-radius: 3px; }
+  border-radius: 3px;
+  text-decoration: underline #c9dbe0; }
   a:hover {
     text-decoration-color: #1e464c; }
+  a:not([href]) {
+    color: #3b8995;
+    text-decoration: none; }
 
 :focus {
   outline: none;
@@ -406,44 +409,25 @@ iframe {
   height: 400px;
   border: 2px solid #51808c; }
 
-/*.indexbar {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: stretch;
+.pagination {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: stretch; }
+  .pagination a, .pagination div {
+    display: block;
+    text-align: center;
+    flex: 1 1 0;
+    border-radius: 0; }
+    .pagination a:first-child, .pagination div:first-child {
+      border-radius: 10px 0 0 10px; }
+    .pagination a:nth-child(odd), .pagination div:nth-child(odd) {
+      background-color: rgba(107, 184, 196, 0.75); }
+    .pagination a:nth-child(even), .pagination div:nth-child(even) {
+      background-color: rgba(107, 184, 196, 0.6); }
+    .pagination a:last-child, .pagination div:last-child {
+      border-radius: 0 10px 10px 0; }
 
-    a {
-        text-align: center;
-        flex: 1 1 0;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: stretch;
-
-        color: $indexbar_text_color;
-        text-decoration: none;
-
-        border-radius: 0;
-
-        span {
-            margin: auto 5px;
-        }
-
-        &:first-child {
-            border-radius: 1ex 0 0 1ex;
-        }
-        &:nth-child(odd) {
-            background-color: $indexbar_bg_color_1;
-        }
-        &:nth-child(even) {
-            background-color: $indexbar_bg_color_2;
-        }
-        &:last-child {
-            border-radius: 0 1ex 1ex 0;
-        }
-    }
-}*/
 #game_infos {
   display: flex;
   align-items: center;

website/templates/partials/pagination.html

@@ -0,0 +1,15 @@
+{% if page_obj.has_other_pages %}
+{% load url_params %}
+<div class="pagination">
+  <a{% if page_obj.has_previous %} href="?{% replace_url_param request page=page_obj.previous_page_number %}"{% endif %}>
+    <i class="fa fa-arrow-left" aria-hidden="true"></i> Précédent
+  </a>
+  <div>
+    Page {{ page_obj.number }} sur {{ paginator.num_pages }}
+  </div>
+  <a{% if page_obj.has_next %} href="?{% replace_url_param request page=page_obj.next_page_number %}"{% endif %}>
+      Suivant <i class="fa fa-arrow-right" aria-hidden="true"></i>
+  </a>
+</div>
+{% endif %}
+

website/templatetags/url_params.py

@@ -0,0 +1,14 @@
+from django import template
+
+register = template.Library()
+
+
+@register.simple_tag()
+def replace_url_param(request, **kwargs):
+    url_params = request.GET.copy()
+    for k, v in kwargs.items():
+        if v is not None:
+            url_params[k] = v
+        else:
+            del url_params[k]
+    return url_params.urlencode()