Skip to content

Commit

Permalink
Fix pagination issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@christophrumpel
christophrumpel committed May 21, 2024
1 parent e132327 commit 8edf0f9
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 23 deletions.
46 changes: 23 additions & 23 deletions resources/views/livewire/stream-list-archive.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
<div>
<x-page-header title="Archive ({{ $streams->total() }})">
<x-search wire:model.live.debounce.300ms="search" :channels="$channels" />
<x-search wire:model.live.debounce.300ms="search" :channels="$channels"/>
</x-page-header>

<main class="flex-1 text-white bg-gray-darkest">
<div class="w-full max-w-6xl mx-auto px-6 xl:px-0 py-24 space-y-16" id="scrollTop">

<div>
@if(count($streams))
<section class="space-y-2 -mt-40">
<div class="flex w-full max-w-6xl max-auto">
<ul class="w-full rounded-2xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
@foreach ($streams as $stream)
@include('pages.partials.stream-archive')
@endforeach
</ul>
</div>
</section>
@else
<div>
<div class="w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8">
<h2 class="text-center text-3xl font-bold tracking-tight text-white md:text-4xl">
No streams found.
</h2>
</div>
</div>
@endif
</div>
<div>
@if(count($streams))
<section class="space-y-2 -mt-40">
<div class="flex w-full max-w-6xl max-auto">
<ul class="w-full rounded-2xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
@foreach ($streams as $stream)
@include('pages.partials.stream-archive')
@endforeach
</ul>
</div>
</section>
@else
<div>
<div class="w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8">
<h2 class="text-center text-3xl font-bold tracking-tight text-white md:text-4xl">
No streams found.
</h2>
</div>
</div>
@endif
</div>

<div class="w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8">
{{ $streams->links() }}
{{ $streams->links('pagination::tailwind') }}
</div>
</div>
</main>
Expand Down
130 changes: 130 additions & 0 deletions resources/views/vendor/pagination/tailwind.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
@if ($paginator->hasPages())
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
<div class="flex justify-between flex-1 sm:hidden">
@if ($paginator->onFirstPage())
<span
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-light bg-white border boring-gray-lightest cursor-default leading-5 rounded-md darborder-gray dark:bg-gray-darker dark:border-gray">
{!! __('pagination.previous') !!}
</span>
@else
<a href="{{ $paginator->previousPageUrl() }}"
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-dark bg-white border boring-gray-lightest leading-5 rounded-md hover:text-gray-light focus:outline-none focus:ring ring-gray-lightest focus:border-blue-300 active:bg-gray-100 active:text-gray-dark transition ease-in-out duration-150 dark:bg-gray-darker dark:border-gray dark:ring-gray-lightest dark:focus:border-blue-700 dark:activtext-gray-dark dark:active:ring-gray-lightest">
{!! __('pagination.previous') !!}
</a>
@endif

@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}"
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-dark bg-white border boring-gray-lightest leading-5 rounded-md hover:text-gray-light focus:outline-none focus:ring ring-gray-lightest focus:border-blue-300 active:bg-gray-100 active:text-gray-dark transition ease-in-out duration-150 dark:bg-gray-darker dark:border-gray dark:ring-gray-lightest dark:focus:border-blue-700 dark:activtext-gray-dark dark:active:ring-gray-lightest">
{!! __('pagination.next') !!}
</a>
@else
<span
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-light bg-white border boring-gray-lightest cursor-default leading-5 rounded-md darborder-gray dark:bg-gray-darker dark:border-gray">
{!! __('pagination.next') !!}
</span>
@endif
</div>

<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-dark leading-5 dark:text-gray-lighter">
{!! __('Showing') !!}
@if ($paginator->firstItem())
<span class="font-medium">{{ $paginator->firstItem() }}</span>
{!! __('to') !!}
<span class="font-medium">{{ $paginator->lastItem() }}</span>
@else
{{ $paginator->count() }}
@endif
{!! __('of') !!}
<span class="font-medium">{{ $paginator->total() }}</span>
{!! __('results') !!}
</p>
</div>

<div>
<span class="relative z-0 inline-flex rtl:flex-row-reverse shadow-sm rounded-md">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
<span
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-light bg-white border boring-gray-lightest cursor-default rounded-l-md leading-5 dark:bg-gray-darker dark:border-gray"
aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"/>
</svg>
</span>
</span>
@else
<a href="{{ $paginator->previousPageUrl() }}" rel="prev"
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-light bg-white border boring-gray-lightest rounded-l-md leading-5 hover:text-gray-lighter focus:z-10 focus:outline-none focus:ring ring-gray-lightest focus:border-blue-300 active:bg-gray-100 active:text-gray-light transition ease-in-out duration-150 dark:bg-gray-darker dark:border-gray dark:activtext-gray-dark dark:focus:border-blue-800"
aria-label="{{ __('pagination.previous') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"/>
</svg>
</a>
@endif

{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<span aria-disabled="true">
<span
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-dark bg-white border boring-gray-lightest cursor-default leading-5 dark:bg-gray-darker dark:border-gray">{{ $element }}</span>
</span>
@endif

{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<span aria-current="page">
<span
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-light bg-white border boring-gray-lightest cursor-default leading-5 dark:bg-gray-darker dark:border-gray">{{ $page }}</span>
</span>
@else
<a href="{{ $url }}"
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-dark bg-white border boring-gray-lightest leading-5 hover:text-gray-light focus:z-10 focus:outline-none focus:ring ring-gray-lightest focus:border-blue-300 active:bg-gray-100 active:text-gray-dark transition ease-in-out duration-150 dark:bg-gray-darker dark:border-gray dark:text-gray-lighter dark:hover:ring-gray-lightest dark:activtext-gray-dark dark:focus:border-blue-800"
aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
{{ $page }}
</a>
@endif
@endforeach
@endif
@endforeach

{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}" rel="next"
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-light bg-white border boring-gray-lightest rounded-r-md leading-5 hover:text-gray-lighter focus:z-10 focus:outline-none focus:ring ring-gray-lightest focus:border-blue-300 active:bg-gray-100 active:text-gray-light transition ease-in-out duration-150 dark:bg-gray-darker dark:border-gray dark:activtext-gray-dark dark:focus:border-blue-800"
aria-label="{{ __('pagination.next') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"/>
</svg>
</a>
@else
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
<span
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-light bg-white border boring-gray-lightest cursor-default rounded-r-md leading-5 dark:bg-gray-darker dark:border-gray"
aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"/>
</svg>
</span>
</span>
@endif
</span>
</div>
</div>
</nav>
@endif

0 comments on commit 8edf0f9

Please sign in to comment.