feat: pagination

packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html

@@ -19,7 +19,7 @@
         </li>
     </f:if>
     <f:for each="{pagination.allPageNumbers}" as="page">
-        <li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'current')}">
+        <li class="{f:if(condition: page == paginator.currentPageNumber, then:'current')}">
             <a href="{f:uri.action(action:actionName, arguments:{currentPage: page},addQueryString:'untrusted')}">{page}</a>
         </li>
     </f:for>

packages/base/Resources/Public/Scss/components/_news.scss

@@ -1,19 +1,3 @@
-// .frame-type-news_newsliststicky {
-//   .header {
-//     display:flex;
-//     margin-bottom: 2.5rem;
-//
-//     .title {
-//       flex: 1;
-//       align-content: center;
-//
-//       h2 {
-//         margin: 0;
-//       }
-//     }
-//   }
-// }
-
 .news-list-view {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
@@ -52,7 +36,49 @@
   }
 
   .f3-widget-paginator {
-      grid-column: span 6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    margin: 2rem 0;
+    padding: 0;
+    grid-column: span 6;
+
+    li {
+      margin: 0 0.5rem;
+
+      &.dots span {
+        background: none;
+        color: $primary-color;
+      }
+
+      &.current a {
+        background: lighten($primary-color, 20%);
+        color: $secondary-color;
+      }
+
+      a {
+        display: inline-block;
+        width: 2.5rem;
+        height: 2.5rem;
+        line-height: 2.5rem;
+        text-align: center;
+        border-radius: 50%;
+        background: $primary-color;
+        color: $secondary-color;
+        font-weight: bold;
+        text-decoration: none;
+        transition: background 0.3s ease-in-out;
+
+        &:hover {
+          background: lighten($primary-color, 10%);
+        }
+      }
+    }
+
+    .previous a, .next a, .first a, .last a {
+      // these are also styled as circles
+    }
   }
 }