From a086ee600faf5adcb01af00f90e6cdc471468029 Mon Sep 17 00:00:00 2001 From: Guillaume Bertholon Date: Tue, 5 Jan 2021 22:10:21 +0100 Subject: [PATCH] Improve pagination style and paginate more lists --- .../templates/inventory/category_list.html | 6 +- inventory/templates/inventory/game_list.html | 6 +- .../inventory/partials/pagination.html | 8 --- inventory/templates/inventory/search.html | 2 +- inventory/templates/inventory/tag_list.html | 6 +- inventory/views.py | 4 ++ website/scss/forms.scss | 2 +- website/scss/params.scss | 1 - website/scss/style.scss | 31 ++++----- website/static/css/style.css | 64 +++++++------------ website/templates/partials/pagination.html | 15 +++++ website/templatetags/__init__.py | 0 website/templatetags/url_params.py | 14 ++++ 13 files changed, 86 insertions(+), 73 deletions(-) delete mode 100644 inventory/templates/inventory/partials/pagination.html create mode 100644 website/templates/partials/pagination.html create mode 100644 website/templatetags/__init__.py create mode 100644 website/templatetags/url_params.py diff --git a/inventory/templates/inventory/category_list.html b/inventory/templates/inventory/category_list.html index 427ba04..0176595 100644 --- a/inventory/templates/inventory/category_list.html +++ b/inventory/templates/inventory/category_list.html @@ -3,8 +3,12 @@ {% block "content" %}

Liste des catégories

-

Il y a {{ category_list|length }} catégorie{{ category_list|pluralize }} de jeux :

+

Il y a {{ paginator.count }} catégorie{{ paginator.count|pluralize }} de jeux :

+ {% include "partials/pagination.html" %} + {% for category in category_list %} {% include "./partials/category_item.html" %} {% endfor %} + + {% include "partials/pagination.html" %} {% endblock %} diff --git a/inventory/templates/inventory/game_list.html b/inventory/templates/inventory/game_list.html index 7f2e2ca..b9b8f9c 100644 --- a/inventory/templates/inventory/game_list.html +++ b/inventory/templates/inventory/game_list.html @@ -3,8 +3,12 @@ {% block "content" %}

Liste des jeux

-

Il y a {{ game_list|length }} jeu{{ game_list|pluralize:"x" }} en salle jeux :

+

Il y a {{ paginator.count }} jeu{{ paginator.count|pluralize:"x" }} en salle jeux :

+ {% include "partials/pagination.html" %} + {% for game in game_list %} {% include "./partials/game_item.html" %} {% endfor %} + + {% include "partials/pagination.html" %} {% endblock %} diff --git a/inventory/templates/inventory/partials/pagination.html b/inventory/templates/inventory/partials/pagination.html deleted file mode 100644 index a00b606..0000000 --- a/inventory/templates/inventory/partials/pagination.html +++ /dev/null @@ -1,8 +0,0 @@ -{% if page_obj.has_other_pages %} - -{% endif %} - diff --git a/inventory/templates/inventory/search.html b/inventory/templates/inventory/search.html index 5ef8d3d..f53d594 100644 --- a/inventory/templates/inventory/search.html +++ b/inventory/templates/inventory/search.html @@ -22,6 +22,6 @@ Aucun résultat trouvé {% endfor %} - {% include "./partials/pagination.html" %} + {% include "partials/pagination.html" %} {% endif %} {% endblock %} diff --git a/inventory/templates/inventory/tag_list.html b/inventory/templates/inventory/tag_list.html index df0c05a..301005a 100644 --- a/inventory/templates/inventory/tag_list.html +++ b/inventory/templates/inventory/tag_list.html @@ -3,8 +3,12 @@ {% block "content" %}

Liste des tags

-

Il y a {{ tag_list|length }} tag{{ tag_list|pluralize }} dans la ludothèque :

+

Il y a {{ paginator.count }} tag{{ paginator.count|pluralize }} dans la ludothèque :

+ {% include "partials/pagination.html" %} + {% for tag in tag_list %} {% include "./partials/tag_item.html" %} {% endfor %} + + {% include "partials/pagination.html" %} {% endblock %} diff --git a/inventory/views.py b/inventory/views.py index fa1b1e8..a6c693a 100644 --- a/inventory/views.py +++ b/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) diff --git a/website/scss/forms.scss b/website/scss/forms.scss index a941b37..a190fa8 100644 --- a/website/scss/forms.scss +++ b/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 { diff --git a/website/scss/params.scss b/website/scss/params.scss index 7739ca3..9a03bf1 100644 --- a/website/scss/params.scss +++ b/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%); diff --git a/website/scss/style.scss b/website/scss/style.scss index 5ae4aec..e9be175 100644 --- a/website/scss/style.scss +++ b/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; diff --git a/website/static/css/style.css b/website/static/css/style.css index ac99256..551630d 100644 --- a/website/static/css/style.css +++ b/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; diff --git a/website/templates/partials/pagination.html b/website/templates/partials/pagination.html new file mode 100644 index 0000000..5226203 --- /dev/null +++ b/website/templates/partials/pagination.html @@ -0,0 +1,15 @@ +{% if page_obj.has_other_pages %} +{% load url_params %} + +{% endif %} + diff --git a/website/templatetags/__init__.py b/website/templatetags/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/website/templatetags/url_params.py b/website/templatetags/url_params.py new file mode 100644 index 0000000..33358de --- /dev/null +++ b/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()