Pagination for the exercise index page

Author: ayaankazerouni

app/assets/stylesheets/custom.scss

@@ -279,6 +279,42 @@ ul.wysihtml5-toolbar li {
   }
 }
 
+/* Exercise index page pagination */
+
+.pagination {
+  display: flex;
+  justify-content: center;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: inline;
+      float: left;
+    }
+  }
+
+  .page, .next, .prev, .first, .last {
+    a {
+      text-decoration: none;
+      color: white;
+      padding: 2px 10px;
+      margin: 2px;
+      border-radius: 3px;
+      background-color: #5bc0de;
+      &:hover {
+        filter: brightness(80%);
+      }
+    }
+
+    &.active > a {
+      background-color: #ffc107;
+    }
+  }
+}
+
 .thumbnail.lg {
   width: 45%;
   margin-right: 2%;

app/controllers/exercises_controller.rb

@@ -19,6 +19,8 @@ def index
     else
       @exercises = Exercise.publicly_visible
     end
+
+    @exercises = @exercises.page params[:page]
   end
 
 

app/models/exercise.rb

@@ -86,6 +86,9 @@ class Exercise < ActiveRecord::Base
   # exercises, so I'm leaving it out for now:
   # validates :current_version, presence: true
 
+  #~ Pagination ...............................................................
+  max_paginates_per 50 
+
   Q_MC     = 1
   Q_CODING = 2
   Q_BLANKS = 3

app/views/exercises/index.html.haml

@@ -10,6 +10,7 @@
   - @exercises.in_groups_of(2, false) do |row|
     = render row, user: current_user
     .clearfix
+  = paginate @exercises
 - else
   %p
     No public exercises are available to view right now.  Please wait for

app/views/kaminari/_next_page.html.haml

@@ -8,7 +8,7 @@
     remote:        data-remote
 
 - unless current_page.last?
-  %li{ class: "next_page" }
+  %li{ class: "next" }
     = link_to_unless current_page.last?,
       raw(t 'views.pagination.next'),
       url,