Make responsive for closet

fix #89

app/Http/Controllers/ClosetController.php

@@ -34,8 +34,11 @@ class ClosetController extends Controller
     {
         $category = $request->input('category', 'skin');
         $page     = abs($request->input('page', 1));
+        $per_page = (int) $request->input('perPage', 6);
         $q        = $request->input('q', null);
 
+        $per_page = $per_page > 0 ? $per_page : 6;
+
         $items = collect();
 
         if ($q) {
@@ -48,11 +51,11 @@ class ClosetController extends Controller
         }
 
         // pagination
-        $total_pages = ceil($items->count() / 6);
+        $total_pages = ceil($items->count() / $per_page);
 
         return response()->json([
             'category'    => $category,
-            'items'       => $items->forPage($page, 6)->values(),
+            'items'       => $items->forPage($page, $per_page)->values(),
             'total_pages' => $total_pages
         ]);
     }

resources/assets/src/js/__tests__/user.test.js

@@ -152,12 +152,24 @@ describe('tests for "closet" module', () => {
       data: {
         category: 'skin',
         page: 1,
+        perPage: 0,
         q: 'q'
       }
     });
     expect($('#closet-paginator').attr('last-skin-page')).toBe('1');
   });
 
+  it('calculate capacity of closet', () => {
+    document.body.innerHTML = `
+      <div id="skin-category" style="width: 900px">
+        <div class="item" style="width: 50px; margin-right: 10.5px"></div>
+      </div>
+    `;
+
+    const getCapacityOfCloset = require(modulePath).getCapacityOfCloset;
+    expect(getCapacityOfCloset()).toBe(28);
+  });
+
   it('rename item', async () => {
     const fetch = jest.fn()
       .mockReturnValue(Promise.resolve({ errno: 0, msg: 'success' }));

resources/assets/src/js/user/closet.js

@@ -142,6 +142,7 @@ function reloadCloset(category, page, search) {
         data: {
             category: category,
             page: page,
+            perPage: getCapacityOfCloset(),
             q: search
         }
     }).then(({ items, category, total_pages }) => {
@@ -157,6 +158,18 @@ function reloadCloset(category, page, search) {
     }).catch(showAjaxError);
 }
 
+/**
+ * Get the capacity of closet.
+ *
+ * @returns {number}
+ */
+function getCapacityOfCloset() {
+    return ~~(
+        $('#skin-category').width() /
+        ($('.item').width() + parseFloat($('.item').css('margin-right')))
+    ) * 2;
+}
+
 function renameClosetItem(tid, oldName) {
     let newTextureName = '';
 
@@ -243,6 +256,7 @@ if (typeof require !== 'undefined' && typeof module !== 'undefined') {
         setAsAvatar,
         renderCloset,
         reloadCloset,
+        getCapacityOfCloset,
         renameClosetItem,
         removeFromCloset,
     };

tests/ClosetControllerTest.php

@@ -30,7 +30,7 @@ class ClosetControllerTest extends TestCase
 
     public function testGetClosetData()
     {
-        $textures = factory(Texture::class, 5)->create();
+        $textures = factory(Texture::class, 10)->create();
         $closet = new Closet($this->user->uid);
         $textures->each(function ($texture) use ($closet) {
             $closet->add($texture->tid, $texture->name);
@@ -45,6 +45,17 @@ class ClosetControllerTest extends TestCase
                 'items' => [['tid', 'name', 'type', 'add_at']]
             ]);
 
+        // Responsive
+        $result = json_decode($this->call('get', '/user/closet-data?perPage=0')
+            ->getContent(), true);
+        $this->assertEquals(6, count($result['items']));
+        $result = json_decode($this->call('get', '/user/closet-data?perPage=8')
+            ->getContent(), true);
+        $this->assertEquals(8, count($result['items']));
+        $result = json_decode($this->call('get', '/user/closet-data?perPage=8&page=2')
+            ->getContent(), true);
+        $this->assertEquals(2, count($result['items']));
+
         // Get capes
         $cape = factory(Texture::class, 'cape')->create();
         $closet->add($cape->tid, 'custom_name');