ui: (pf4) Update pagination and toolbar

This commit is contained in:
Jens Langhammer 2020-06-09 13:40:03 +02:00
parent 62fe4d617b
commit 2a3166bf7e
16 changed files with 212 additions and 182 deletions

View file

@ -16,12 +16,14 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:application-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> <a href="{% url 'passbook_admin:application-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -15,9 +15,11 @@
</section> </section>
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -16,12 +16,14 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:certificatekeypair-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> <a href="{% url 'passbook_admin:certificatekeypair-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -16,12 +16,14 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:flow-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> <a href="{% url 'passbook_admin:flow-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -17,13 +17,15 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:group-create' %}?back={{ request.get_full_path }}" <a href="{% url 'passbook_admin:group-create' %}?back={{ request.get_full_path }}"
class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -16,7 +16,8 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<div class="pf-c-dropdown"> <div class="pf-c-dropdown">
<button class="pf-m-primary pf-c-dropdown__toggle" type="button"> <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
@ -39,6 +40,7 @@
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -16,13 +16,15 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:policy-binding-create' %}?back={{ request.get_full_path }}" <a href="{% url 'passbook_admin:policy-binding-create' %}?back={{ request.get_full_path }}"
class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -17,7 +17,8 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<div class="pf-c-dropdown"> <div class="pf-c-dropdown">
<button class="pf-m-primary pf-c-dropdown__toggle" type="button"> <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
@ -41,6 +42,7 @@
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -18,7 +18,8 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<div class="pf-c-dropdown"> <div class="pf-c-dropdown">
<button class="pf-m-primary pf-c-dropdown__toggle" type="button"> <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
@ -41,6 +42,7 @@
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -18,7 +18,8 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<div class="pf-c-dropdown"> <div class="pf-c-dropdown">
<button class="pf-m-primary pf-c-dropdown__toggle" type="button"> <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
@ -41,6 +42,7 @@
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -18,7 +18,8 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<div class="pf-c-dropdown"> <div class="pf-c-dropdown">
<button class="pf-m-primary pf-c-dropdown__toggle" type="button"> <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
@ -41,6 +42,7 @@
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -16,13 +16,15 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:stage-binding-create' %}?back={{ request.get_full_path }}" <a href="{% url 'passbook_admin:stage-binding-create' %}?back={{ request.get_full_path }}"
class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -17,13 +17,15 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:stage-invitation-create' %}?back={{ request.get_full_path }}" <a href="{% url 'passbook_admin:stage-invitation-create' %}?back={{ request.get_full_path }}"
class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -17,12 +17,14 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:stage-prompt-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> <a href="{% url 'passbook_admin:stage-prompt-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -15,12 +15,14 @@
<section class="pf-c-page__main-section pf-m-no-padding-mobile"> <section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card"> <div class="pf-c-card">
{% if object_list %} {% if object_list %}
<div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top"> <div class="pf-c-toolbar">
<div class="pf-c-toolbar__content">
<div class="pf-c-toolbar__bulk-select"> <div class="pf-c-toolbar__bulk-select">
<a href="{% url 'passbook_admin:user-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a> <a href="{% url 'passbook_admin:user-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
</div> </div>
{% include 'partials/pagination.html' %} {% include 'partials/pagination.html' %}
</div> </div>
</div>
<table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid"> <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">

View file

@ -1,14 +1,14 @@
{% load i18n %} {% load i18n %}
<div class="pf-c-pagination"> <div class="pf-c-toolbar__item pf-m-pagination">
<div class="pf-c-pagination">
<div class="pf-c-pagination__total-items"> <div class="pf-c-pagination__total-items">
<b>{{ page_obj.start_index }} - {{ page_obj.end_index }}</b>of <b>{{ page_obj.start_index }} - {{ page_obj.end_index }}</b>of
<b>{{ page_obj.count }}</b> <b>{{ page_obj.count }}</b>
</div> </div>
{% with param=get_param|default:'page' %} {% with param=get_param|default:'page' %}
<nav class="pf-c-pagination__nav" aria-label="Pagination"> <nav class="pf-c-pagination__nav" aria-label="Pagination">
<a class="pf-c-button pf-m-plain" type="button" aria-label="Go to first page" <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to first page" href="?{{ param }}=1">
href="?{{ param }}=1">
<i class="fas fa-angle-double-left" aria-hidden="true"></i> <i class="fas fa-angle-double-left" aria-hidden="true"></i>
</a> </a>
<a class="pf-c-button pf-m-plain" type="button" aria-label="Go to previous page" <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to previous page"
@ -34,10 +34,10 @@
{% endif %}> {% endif %}>
<i class="fas fa-angle-right" aria-hidden="true"></i> <i class="fas fa-angle-right" aria-hidden="true"></i>
</a> </a>
<a class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page" <a class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page" href="?{{ param }}={{ page_obj.num_pages }}">
href="?{{ param }}={{ page_obj.num_pages }}">
<i class="fas fa-angle-double-right" aria-hidden="true"></i> <i class="fas fa-angle-double-right" aria-hidden="true"></i>
</a> </a>
</nav> </nav>
{% endwith %} {% endwith %}
</div>
</div> </div>