fixing pagination

Author: farzindev

Blogifier.Web/Views/Blogifier/Admin/Posts/Index.cshtml

@@ -145,24 +145,24 @@
 <!-- Empty -->
 @if (Model.BlogPosts.Count() == 0)
 {
-    <div class="bf-posts-empty">
+    <div class="bf-list-empty">
         No posts found!
     </div>
 }
 <!--/Empty -->
 <!-- Pagination -->
 @if (pgr.ShowNewer || pgr.ShowOlder)
 {
-    <ul class="bf-posts-pagination d-flex">
+    <ul class="bf-pagination d-flex">
         @if (pgr.ShowOlder)
         {
-            <li class="item"><a class="item-link" href="~/@olderPage"><i class="fa fa-chevron-left"></i></a></li>
+            <li class="bf-pagination-item"><a class="bf-pagination-link" href="~/@olderPage"><i class="bf-pagination-icon fa fa-chevron-left"></i></a></li>
         }
         @if (pgr.ShowNewer)
                 {
-            <li class="item"><a class="item-link" href="~/@newerPage"><i class="fa fa-chevron-right"></i></a></li>
+            <li class="bf-pagination-item"><a class="bf-pagination-link" href="~/@newerPage"><i class="bf-pagination-icon fa fa-chevron-right"></i></a></li>
         }
-        <li class="item"><span class="item-count">@cntFrom-@cntTo out of @pgr.Total</span></li>
+        <li class="bf-pagination-item"><span class="bf-pagination-count">@cntFrom-@cntTo out of @pgr.Total</span></li>
     </ul>
 }
 <!--/Pagination -->

Blogifier.Web/Views/Blogifier/Admin/Settings/Users.cshtml

@@ -33,20 +33,22 @@
             </li>
         }
     </ul>
+    <!-- Pagination -->
     @if (pgr.ShowNewer || pgr.ShowOlder)
     {
-        <ul class="bf-posts-pagination">
+        <ul class="bf-pagination d-flex">
             @if (pgr.ShowOlder)
             {
-                <li class="item"><a class="item-link" href="~/admin/settings/application?page=@pgr.Older"><i class="fa fa-chevron-left"></i></a></li>
+                <li class="bf-pagination-item"><a class="bf-pagination-link" href="~/admin/settings/application?page=@pgr.Older"><i class="bf-pagination-icon fa fa-chevron-left"></i></a></li>
             }
             @if (pgr.ShowNewer)
-            {
-                <li class="item"><a class="item-link" href="~/admin/settings/application?page=@pgr.Newer"><i class="fa fa-chevron-right"></i></a></li>
+                {
+                <li class="bf-pagination-item"><a class="bf-pagination-link" href="~/admin/settings/application?page=@pgr.Newer"><i class="bf-pagination-icon fa fa-chevron-right"></i></a></li>
             }
-            <li class="item"><a class="item-count">@cntFrom-@cntTo out of @pgr.Total</a></li>
+            <li class="bf-pagination-item"><span class="bf-pagination-count">@cntFrom-@cntTo out of @pgr.Total</span></li>
         </ul>
     }
+    <!--/Pagination -->
 </div>
 
 <!-- Create User Modal -->

Blogifier.Web/wwwroot/admin/css/styles.min.css

@@ -73,8 +73,8 @@ var postsController = function(dataService) {
   }
 
   function loading() {
-    $(postActionButtons).attr('disabled', 'disabled');
-    $('.spin-icon').fadeIn();
+    $(actionBtns).attr('disabled', 'disabled');
+    $('.loading').fadeIn();
   }
 
   function reload() {

Blogifier.Web/wwwroot/admin/js/app/postsController.js

@@ -1,14 +1,18 @@
-.bf-posts-pagination {
+.bf-pagination {
   @include unstyled(ul);
-  padding: 0 2rem 2rem;
+  padding: 2rem;
 
-  i {
+  &-item {}
+
+  &-link {}
+
+  &-icon {
     width: 1rem;
     height: 1rem;
     display: inline-block;
     margin-right: 1rem;
   }
   @media screen and (max-width: 991px) {
-    padding: 0 1rem 1rem;
+    padding: 1rem;
   }
 }

…/admin/scss/pages/posts/_pagination.scss …t/admin/scss/components/_pagination.scssBlogifier.Web/wwwroot/admin/scss/pages/posts/_pagination.scss renamed to Blogifier.Web/wwwroot/admin/scss/components/_pagination.scss Blogifier.Web/wwwroot/admin/scss/pages/posts/_pagination.scss renamed to Blogifier.Web/wwwroot/admin/scss/components/_pagination.scss

@@ -2,4 +2,3 @@
 @import "search";
 @import "list";
 @import "grid";
-@import "pagination";

Blogifier.Web/wwwroot/admin/scss/pages/posts/_posts.scss

@@ -19,6 +19,7 @@
 
 // Components
 @import "components/list";
+@import "components/pagination";
 @import "components/utilities";
 @import "components/button";
 @import "components/dropdown";