pagination/issue: fixes #4510

revert mobile version pagination: fix issues after review
liqd · Sep 29, 2022 · 5278342 · 5278342
1 parent 359e5a3
commit 5278342
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -6,31 +6,35 @@
     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;
             color: $border-color;
         }
     }
 
+    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;
+        }
+    }
+}