diff --git a/meinberlin/apps/budgeting/assets/Pagination.jsx b/meinberlin/apps/budgeting/assets/Pagination.jsx index b8d4c138cb..e9e21678af 100644 --- a/meinberlin/apps/budgeting/assets/Pagination.jsx +++ b/meinberlin/apps/budgeting/assets/Pagination.jsx @@ -38,7 +38,7 @@ export const Pagination = (props) => { isActive={num === currentPage} pageIndex={num} onClick={onPaginate} - isDisabled={num === '…'} + isNoButton={num === '…'} /> ))} diff --git a/meinberlin/apps/budgeting/assets/PaginationButton.jsx b/meinberlin/apps/budgeting/assets/PaginationButton.jsx index 28e92a3a48..b8acff5a6a 100644 --- a/meinberlin/apps/budgeting/assets/PaginationButton.jsx +++ b/meinberlin/apps/budgeting/assets/PaginationButton.jsx @@ -6,10 +6,10 @@ export const PaginationButton = (props) => { : undefined const itemClass = props.isActive - ? 'pagination-item active' - : 'pagination-item' + ? 'pagination__item active' + : 'pagination__item' - const buttonLabel = () => { + const getLabel = () => { if (props.type === 'num') { return props.pageIndex } else if (props.type === 'prev') { @@ -23,13 +23,21 @@ export const PaginationButton = (props) => { <li className={itemClass} > - <button - className={disabledClass} - onClick={() => props.onClick(props.pageIndex)} - aria-label={props.ariaLabel} - > - {buttonLabel()} - </button> + {props.isNoButton + ? ( + <div> + {getLabel()} + </div> + ) + : ( + <button + className={disabledClass} + onClick={() => props.onClick(props.pageIndex)} + aria-label={props.ariaLabel} + > + {getLabel()} + </button> + )} </li> ) } diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html index c41a24922b..eb867024b5 100644 --- a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html +++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html @@ -1747,7 +1747,7 @@ <h2 id="cl-pagination">Pagination</h2> <div class="cl-example"> <nav aria-label="Page navigation"> <ul class="pagination"> - <li class="pagination-item{% ifequal page_number page_obj.number %} active{% endifequal %}"> + <li class="pagination__item{% ifequal page_number page_obj.number %} active{% endifequal %}"> <a href="#">Page number link</a> </li> </ul> diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/pagination.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/pagination.html index 26fbfef2ef..b36dd9def1 100644 --- a/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/pagination.html +++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/includes/pagination.html @@ -5,7 +5,7 @@ <ul class="pagination btn-group"> {% get_proper_elided_page_range paginator page_obj.number as paginated_page_range %} - <li class="pagination-item"> + <li class="pagination__item"> {% if page_obj.has_previous %} {% combined_url_parameter request.GET page=page_obj.previous_page_number as url_prev %} {% endif %} @@ -16,13 +16,19 @@ </li> {% for page_number in paginated_page_range %} - <li class="pagination-item{% ifequal page_number page_obj.number %} active{% endifequal %}"> + {% if page_number >= 0 %} + <li class="pagination__item{% ifequal page_number page_obj.number %} active{% endifequal %}"> {% combined_url_parameter request.GET page=page_number as url_par %} - <a href="{{ url_par }}" class="{% if not page_number >= 0 %}disabled{% endif %}">{{ page_number }}</a> + <a href="{{ url_par }}">{{ page_number }}</a> </li> + {% else %} + <li class="pagination__item"> + <div>{{ page_number }}</div> + </li> + {% endif %} {% endfor %} - <li class="pagination-item"> + <li class="pagination__item"> {% if page_obj.has_next %} {% combined_url_parameter request.GET page=page_obj.next_page_number as url_next %} {% endif %} diff --git a/meinberlin/assets/scss/components/_pagination.scss b/meinberlin/assets/scss/components/_pagination.scss index 09ed9c1dd0..2bc17468a9 100644 --- a/meinberlin/assets/scss/components/_pagination.scss +++ b/meinberlin/assets/scss/components/_pagination.scss @@ -6,24 +6,20 @@ background-color: $body-bg; } -.pagination-item { +.pagination__item { float: left; display: inline-block; border: 1px solid $border-color; a, - button { + button, + div { display: inline-block; margin-right: -1px; - padding: 0.5 * $spacer 0.87 * $spacer; + padding: 0.4 * $spacer 0.75 * $spacer; text-align: center; text-decoration: none; - &:hover { - background-color: $bg-secondary; - color: $primary; - } - &.disabled { cursor: not-allowed; pointer-events: none; @@ -31,6 +27,14 @@ } } + a, + button { + &:hover { + background-color: $bg-secondary; + color: $primary; + } + } + &.active { background-color: $link-color; color: $text-color-inverted; @@ -44,9 +48,18 @@ } & a:hover, - & a:focus, & button:hover { color: $primary; } } } + +@media (min-width: $breakpoint-xs) { + .pagination__item { + a, + button, + div { + padding: 0.5 * $spacer 0.87 * $spacer; + } + } +}