Added pagination fallback for IE

Signed-off-by: Nistor Cristian <contact@nistorcristian.com>

assets/css/style.css

@@ -348,8 +348,7 @@ blockquote {
     .loop .post .inner {
       padding: 20px;
       display: flex;
-      flex-direction: column;
-      flex: 1; }
+      flex-direction: column; }
       .loop .post .inner p {
         margin-bottom: 50px; }
       .loop .post .inner h2 {
@@ -410,6 +409,14 @@ blockquote {
   align-items: center;
   justify-content: center;
   margin: 70px 0 100px; }
+  .pagination .pagination-links {
+    width: 100%; }
+    .pagination .pagination-links .row {
+      margin: 0; }
+  .pagination #load-posts {
+    display: none; }
+    .pagination #load-posts.active {
+      display: flex; }
   .pagination .end {
     opacity: .3;
     pointer-events: none; }
@@ -508,7 +515,9 @@ blockquote {
     justify-content: flex-start;
     margin: 0 -15px; }
     .sub-header nav ul li:last-child {
-      padding-right: 10px; } }
+      padding-right: 10px; }
+  .pagination .pagination-links .row {
+    margin: 0 -15px; } }
 
 @media screen and (max-width: 575px) {
   iframe[src*="https://www.youtube.com/"] {

assets/js/main.js

@@ -40,6 +40,9 @@ $(document).ready(function ($) {
 
     $('[data-toggle="tooltip"]').tooltip();
 
+    $('#load-posts').addClass('active');
+    $('.pagination-links').addClass('d-none');
+
     $(window).on('load', function(event) {
 
         setGalleryRation();

assets/scss/style.scss

@@ -497,7 +497,6 @@ blockquote{
             padding: 20px;
             display: flex;
             flex-direction: column;
-            flex: 1;
             p{
                 margin-bottom: 50px;
             }
@@ -575,6 +574,18 @@ blockquote{
     align-items: center;
     justify-content: center;
     margin: 70px 0 100px;
+    .pagination-links{
+        width: 100%;
+        .row{
+            margin: 0;
+        }
+    }
+    #load-posts{
+        display: none;
+        &.active{
+            display: flex;
+        }
+    }
     .end{
         opacity: .3;
         pointer-events: none;
@@ -742,6 +753,13 @@ blockquote{
             }
         }
     }
+    .pagination{
+        .pagination-links{
+            .row{
+                margin: 0 -15px;
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 575px) {

partials/pagination.hbs

@@ -1,3 +1,20 @@
 <div class="pagination">
     <button id="load-posts" class="btn" data-end="{{t "No more posts"}}" data-posts_per_page="{{@config.posts_per_page}}"><span>{{t "Load more posts"}}</span></button>
-</div>
+    <div class="pagination-links">
+        <div class="row">
+            <div class="col-4 text-left">
+                {{#if prev}}
+                    <a class="newer-posts btn" href="{{page_url prev}}"><i class="fas fa-angle-left"></i>{{t "Newer Posts"}}</a>
+                {{/if}}
+            </div>
+            <div class="col-4 text-center d-flex align-items-center justify-content-center">
+                <span class="page-number">{{page}} {{t "of"}} {{pages}}</span>
+            </div>
+            <div class="col-4 text-right">
+                {{#if next}}
+                    <a class="older-posts btn" href="{{page_url next}}">{{t "Older Posts"}} <i class="fas fa-angle-right"></i></a>
+                {{/if}}
+            </div>
+        </div>
+    </div>
+</div>