Skip to content

Commit 230776a

Browse files
elkiki99elkiki99
committed
pagination and links buttons customization
1 parent 3ec48e3 commit 230776a

File tree

7 files changed

+51
-11
lines changed

7 files changed

+51
-11
lines changed

‎app/Providers/AppServiceProvider.php

+25-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
namespace App\Providers;
44

55
use Illuminate\Support\ServiceProvider;
6+
use Illuminate\Support\Collection;
7+
use Illuminate\Pagination\LengthAwarePaginator;
68

79
class AppServiceProvider extends ServiceProvider
810
{
@@ -20,6 +22,28 @@ public function register(): void
2022
*/
2123
public function boot(): void
2224
{
23-
//
25+
/**
26+
* Paginate a standard Laravel Collection.
27+
*
28+
* @param int $perPage
29+
* @param int $total
30+
* @param int $page
31+
* @param string $pageName
32+
* @return array
33+
*/
34+
Collection::macro('paginate', function ($perPage, $total = null, $page = null, $pageName = 'page'): LengthAwarePaginator {
35+
$page = $page ?: LengthAwarePaginator::resolveCurrentPage($pageName);
36+
37+
return new LengthAwarePaginator(
38+
$this->forPage($page, $perPage)->values(),
39+
$total ?: $this->count(),
40+
$perPage,
41+
$page,
42+
[
43+
'path' => LengthAwarePaginator::resolveCurrentPath(),
44+
'pageName' => $pageName,
45+
]
46+
);
47+
});
2448
}
2549
}

‎resources/css/app.css

+7
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,16 @@
3838
}
3939

4040
&.swiper-button-next {
41+
transform: scale(0.5);
42+
top: 25%;
4143
right: 0;
4244
}
4345

46+
&.swiper-button-prev {
47+
transform: scale(0.5);
48+
top: 25%;
49+
}
50+
4451
&.swiper-button-disabled {
4552
opacity: 0.5;
4653
pointer-events: none;

‎resources/views/components/movie-card.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<div x-data="{ loaded: @js($loaded) }" wire:remove wire:key="item-{{ $movie['id'] }}"
44
wire:target='toggle-watchlist,{{ $movie['id'] }}'
5-
class="relative transition duration-300 bg-gray-800 border border-transparent rounded-sm shadow-md hover:cursor-pointer hover:border-gray-400 hover:shadow-lg hover:shadow-gray-200/50">
5+
class="max-w-[250px] relative transition duration-300 bg-gray-800 border border-transparent rounded-sm shadow-md hover:cursor-pointer hover:border-gray-400 hover:shadow-lg hover:shadow-gray-200/50">
66

77
<div class="relative aspect-w-2 aspect-h-3">
88
<div class="absolute inset-0 flex items-center justify-center" x-show="!loaded">

‎resources/views/components/series-card.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<div x-data="{ loaded: @js($loaded) }" wire:remove wire:key="item-{{ $series['id'] }}"
44
wire:target='toggle-watchlist,{{ $series['id'] }}'
5-
class="relative overflow-hidden transition duration-300 bg-gray-800 border border-transparent rounded-sm shadow-md hover:cursor-pointer hover:border-gray-400 hover:shadow-lg hover:shadow-gray-200/50">
5+
class="max-w-[250px] relative overflow-hidden transition duration-300 bg-gray-800 border border-transparent rounded-sm shadow-md hover:cursor-pointer hover:border-gray-400 hover:shadow-lg hover:shadow-gray-200/50">
66

77
<div class="relative aspect-w-2 aspect-h-3">
88
<div class="absolute inset-0 flex items-center justify-center" x-show="!loaded">

‎resources/views/livewire/movies/show-movie.blade.php

+4-4
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,13 @@ protected function loadMovieGenres()
6262
}; ?>
6363

6464
<div class="bg-black">
65-
<div class="z-30 w-full min-h-[70vh] md:min-h-[90vh] mx-auto max-w-7xl">
65+
<div class="z-30 w-full min-h-[70vh] md:min-h-[75vh] mx-auto max-w-7xl">
6666
<img src="https://image.tmdb.org/t/p/original{{ $movie['backdrop_path'] ?? '' }}"
6767
class="absolute top-0 left-0 object-cover w-full md:h-full h-[80vh]" alt="{{ $movie['title'] }}">
6868
<div class="absolute inset-0 md:h-full h-[80vh] bg-gradient-to-b from-black via-transparent to-black"></div>
6969

7070
<!-- Title and description -->
71-
<div class="flex items-end justify-start md:min-h-[90vh] min-h-[70vh]">
71+
<div class="flex items-end justify-start md:min-h-[75vh] min-h-[70vh]">
7272
<div class="z-10 p-4 text-white">
7373
<div class="space-y-2">
7474
<h2 class="text-5xl font-medium md:font-bold md:text-7xl">{{ $movie['title'] }}</h2>
@@ -83,7 +83,7 @@ class="absolute top-0 left-0 object-cover w-full md:h-full h-[80vh]" alt="{{ $mo
8383
<x-primary-button class="px-16">
8484
<div class="flex items-center gap-2">
8585
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
86-
class="text-black size-6">
86+
class="text-black size-4 md:size-6">
8787
<path fill-rule="evenodd"
8888
d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z"
8989
clip-rule="evenodd" />
@@ -97,7 +97,7 @@ class="text-black size-6">
9797
</div>
9898
</div>
9999

100-
<div x-cloak class="relative h-full mx-auto bg-black max-w-7xl">
100+
<div x-cloak class="relative h-full mx-auto max-w-7xl">
101101
<div class="max-w-4xl px-4 pb-8 space-y-1 text-gray-300">
102102
<!-- Add to watchlist -->
103103
<div class="mt-4">

‎resources/views/livewire/series/show-series.blade.php

+3-3
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,13 @@ protected function loadSeriesGenres()
7777
}; ?>
7878

7979
<div class="bg-black">
80-
<div class="z-30 w-full min-h-[70vh] md:min-h-[90vh] mx-auto max-w-7xl">
80+
<div class="z-30 w-full min-h-[70vh] md:min-h-[75vh] mx-auto max-w-7xl">
8181
<img src="https://image.tmdb.org/t/p/original{{ $series['backdrop_path'] ?? '' }}"
8282
class="absolute top-0 left-0 object-cover w-full md:h-full h-[80vh]" alt="{{ $series['name'] }}">
8383
<div class="absolute inset-0 md:h-full h-[80vh] bg-gradient-to-b from-black via-transparent to-black"></div>
8484

8585
<!-- Title and description -->
86-
<div class="flex items-end justify-start md:min-h-[90vh] min-h-[70vh]">
86+
<div class="flex items-end justify-start md:min-h-[75vh] min-h-[70vh]">
8787
<div class="z-10 p-4 text-white">
8888
<div class="space-y-2">
8989
<h2 class="text-5xl font-medium md:font-bold md:text-7xl">{{ $series['name'] }}</h2>
@@ -112,7 +112,7 @@ class="text-black size-4 md:size-6">
112112
</div>
113113
</div>
114114

115-
<div x-cloak class="relative h-full mx-auto bg-black max-w-7xl">
115+
<div x-cloak class="relative h-full mx-auto max-w-7xl">
116116
<div class="max-w-4xl px-4 pb-8 space-y-1 text-gray-300">
117117
<!-- Add to watchlist -->
118118
<div class="mt-4">

‎resources/views/livewire/watchlist.blade.php

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<?php
2+
23
use Livewire\Volt\Component;
34
use Illuminate\Support\Facades\Auth;
45
use Illuminate\Support\Facades\Cache;
@@ -31,6 +32,8 @@ public function loadWatchlist()
3132
})
3233
->filter()
3334
->reverse();
35+
36+
$this->paginatedWatchlist = $this->watchlist->paginate(12);
3437
}
3538
3639
private function fetchItemDetails($itemId, $itemType)
@@ -45,7 +48,7 @@ private function fetchItemDetails($itemId, $itemType)
4548

4649
<div class="mx-auto max-w-7xl">
4750
<div class="grid grid-cols-3 gap-2 mt-10 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
48-
@forelse($this->watchlist as $index => $item)
51+
@forelse($this->paginatedWatchlist as $index => $item)
4952
<div wire:key="item-{{ $item['id'] }}">
5053
@if (isset($item['title']))
5154
<x-movie-card :movie="$item" :index="$index" :loaded="true" />
@@ -57,4 +60,10 @@ private function fetchItemDetails($itemId, $itemType)
5760
<p class="absolute font-bold text-gray-500 text-7xl center">No movies in your watchlist yet.</p>
5861
@endforelse
5962
</div>
63+
64+
<div class="pt-5">
65+
@if ($this->paginatedWatchlist->hasMorePages())
66+
{{ $this->paginatedWatchlist->links() }}
67+
@endif
68+
</div>
6069
</div>

0 commit comments

Comments
 (0)