added pagination to index

public/assets/css/main.css

@@ -125,9 +125,11 @@ button:focus,
   display: flex;
   justify-content: center;
   align-items: center;
+  color: #fff;
 }
 .song-row .song-header .row-controls .item.disabled {
   opacity: 0.4;
+  pointer-events: none;
 }
 .song-row .song-header .row-controls .item:not(.disabled):hover {
   background: rgba(255, 255, 255, 0.2);

public/assets/css/main.less

@@ -129,9 +129,11 @@ button, .button {
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                color: #fff;
 
                 &.disabled {
                     opacity: 0.4;
+                    pointer-events: none;
                 }
 
                 &:not(.disabled):hover {

src/Controller/IndexController.php

@@ -25,15 +25,17 @@ class IndexController extends AbstractController
 
         $activePromos = $em->getRepository(Promo::class)->findBy(array('isVisible' => true), array('id' => 'DESC'), 2);
         
-        $newOffset = $request->query->get('newOffset') * 6;
-        $popularOffset = $request->query->get('popularOffset') * 6;
+        $newOffset = $request->query->get('newOffset');
+        $popularOffset = $request->query->get('popularOffset');
 
-        $resultsNewSongs = $em->getRepository(Song::class)->findBy(array(), array('id' => 'DESC'), 6, $newOffset);
-        $resultsPopularSongs = $em->getRepository(Song::class)->findBy(array(), array('downloads' => 'DESC', 'views' => 'DESC'), 6, $popularOffset);
+        $resultsNewSongs = $em->getRepository(Song::class)->findBy(array(), array('id' => 'DESC'), 6, $newOffset * 6);
+        $resultsPopularSongs = $em->getRepository(Song::class)->findBy(array(), array('downloads' => 'DESC', 'views' => 'DESC'), 6, $popularOffset * 6);
 
         $data['promos'] = $activePromos;
         $data['newSongs'] = $resultsNewSongs;
+        $data['newOffset'] = $newOffset;
         $data['popularSongs'] = $resultsPopularSongs;
+        $data['popularOffset'] = $popularOffset;
 
         return $this->render('index/index.html.twig', $data);
     }

templates/index/index.html.twig

@@ -26,7 +26,15 @@
         </div>
         <div class="song-row song-row-new">
             <div class="song-header">
-                <div class="row-title row-title-noactions">New Songs</div>
+                <div class="row-title">New Songs</div>
+                <div class="row-controls">
+                    {% if newOffset > 0 %}
+                        <a href="{{ path('index.index', {newOffset: newOffset - 1}) }}" class="item row-controls-previous"><i class="mdi mdi-chevron-left"></i></a>
+                    {% else %}
+                        <a href="#" class="item disabled row-controls-previous"><i class="mdi mdi-chevron-left"></i></a>
+                    {% endif %}
+                    <a href="{{ path('index.index', {newOffset: newOffset + 1}) }}" class="item row-controls-next"><i class="mdi mdi-chevron-right"></i></a>
+                </div>
             </div>
             <div class="song-list">
                 {% for song in newSongs %}
@@ -53,7 +61,15 @@
         </div>
         <div class="song-row song-row-popular">
             <div class="song-header">
-                <div class="row-title row-title-noactions">Popular Songs</div>
+                <div class="row-title">Popular Songs</div>
+                <div class="row-controls">
+                    {% if popularOffset > 0 %}
+                        <a href="{{ path('index.index', {popularOffset: popularOffset - 1}) }}" class="item row-controls-previous"><i class="mdi mdi-chevron-left"></i></a>
+                    {% else %}
+                        <a href="#" class="item disabled row-controls-previous"><i class="mdi mdi-chevron-left"></i></a>
+                    {% endif %}
+                    <a href="{{ path('index.index', {popularOffset: popularOffset + 1}) }}" class="item row-controls-next"><i class="mdi mdi-chevron-right"></i></a>
+                </div>
             </div>
             <div class="song-list">
                 {% for song in popularSongs %}