pagination/issue: fixes #4510

revert mobile version

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 === '…'}
           />
         ))}
 

meinberlin/apps/budgeting/assets/PaginationButton.jsx

@@ -9,7 +9,7 @@ export const PaginationButton = (props) => {
     ? '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>
   )
 }

meinberlin/apps/budgeting/assets/hooks/useWindowDimensions.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react'
+
+function getWindowDimensions () {
+  const { innerWidth: width, innerHeight: height } = window
+  return {
+    width,
+    height
+  }
+}
+
+export function useWindowDimensions () {
+  const [windowDimensions, setWindowDimensions] =
+    useState(getWindowDimensions())
+
+  useEffect(() => {
+    function handleResize () {
+      setWindowDimensions(getWindowDimensions())
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return windowDimensions
+}

meinberlin/apps/contrib/templates/meinberlin_contrib/includes/pagination.html

@@ -16,10 +16,16 @@
       </li>
 
       {% for page_number in paginated_page_range %}
+        {% 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">

meinberlin/assets/scss/_variables.scss

@@ -55,6 +55,7 @@ $font-size-sm: 0.9rem !default;
 $font-size-xs: 0.8rem !default;
 
 // use for min-width media-queries
+$breakpoint-xxs: 23.75rem !default;
 $breakpoint-xs: 32rem !default;
 $breakpoint: 50rem !default;  // sm 800px
 $breakpoint-md: 65rem !default; // 1040px

meinberlin/assets/scss/components/_pagination.scss

@@ -12,25 +12,29 @@
     border: 1px solid $border-color;
 
     a,
-    button {
+    button,
+    div {
         display: inline-block;
         margin-right: -1px;
         padding: 0.5 * $spacer 0.87 * $spacer;
         text-align: center;
         text-decoration: none;
 
-        &:hover {
-            background-color: $bg-secondary;
-            color: $primary;
-        }
-
         &.disabled {
             cursor: not-allowed;
             pointer-events: none;
             color: $border-color;
         }
     }
 
+    a,
+    button {
+        &:hover {
+            background-color: $bg-secondary;
+            color: $primary;
+        }
+    }
+
     &.active {
         background-color: $link-color;
         color: $text-color-inverted;
@@ -44,9 +48,29 @@
         }
 
         & a:hover,
-        & a:focus,
         & button:hover {
             color: $primary;
         }
     }
 }
+
+@media (max-width: $breakpoint-xxs) {
+    .pagination-item {
+        a,
+        button,
+        div {
+            display: inline-block;
+            margin-right: -1px;
+            padding: 0.4 * $spacer 0.6 * $spacer;
+            text-align: center;
+            text-decoration: none;
+            font-size: $font-size-xs;
+
+            &.disabled {
+                cursor: not-allowed;
+                pointer-events: none;
+                color: $border-color;
+            }
+        }
+    }
+}