Add bookmark pagination

This commit is contained in:
Annika Backstrom 2024-05-25 18:21:34 +01:00
parent ca62dfafdc
commit f6613c5e7d
Signed by: annika
GPG Key ID: 3561F004DE1D9AFE
9 changed files with 188 additions and 75 deletions

View File

@ -9,7 +9,7 @@ A little project because I haven't made anything new in a while, I would like to
* [x] Import from Pinboard.in JSON export
* [x] Bookmark permalink
* [x] Bookmark index
* [ ] Bookmark pagination
* [x] Bookmark pagination
* [ ] Editing
* [ ] Tag cloud
* [ ] Tag permalink

View File

@ -2,6 +2,7 @@
namespace App\Providers;
use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
@ -11,7 +12,8 @@ class AppServiceProvider extends ServiceProvider
*/
public function register(): void
{
//
Paginator::defaultView('pagination.default');
Paginator::defaultSimpleView('pagination.simple-default');
}
/**

View File

@ -14,6 +14,9 @@ body {
background-color: #335C67;
}
@import 'components/bookmark';
@import 'components/pagination';
h1 {
color: #FFF3B0;
text-align: center;
@ -24,75 +27,3 @@ h1 {
margin: 1em auto;
}
.bookmark {
display: grid;
align-items: center;
gap: 0px 0px;
grid-template-areas:
"title title"
"href href"
"description description"
"date tags";
margin-bottom: 1em;
padding: 0;
border: 2px solid #540B0E;
background-color: #FFF3B0;
&-title {
margin: 0;
padding: 1ex;
background-color: #E09F3E;
grid-area: title;
font-weight: bold;
}
&-href,
&-description,
&-date,
&-tags {
padding: 1ex;
margin: 0;
}
&-href,
&-description,
&-date {
font-size: 0.9em;
}
&-href {
grid-area: href;
}
&-description {
grid-area: description;
> p {
border-left: 3px solid #9E2A2B;
margin: 0;
padding: 0.5ex 0 0.5ex 1ex;
}
}
&-date {
grid-area: date;
}
&-tags {
font-size: 0.8em;
grid-area: tags;
text-align: right;
}
&-tag {
display: inline-block;
padding: 0.5ex 0.8ex;
margin: 0 0 0.2ex 0;
border-radius: 7px;
background-color: #9E2A2B;
color: #FFF3B0;
}
}

View File

@ -0,0 +1,72 @@
.bookmark {
display: grid;
align-items: center;
gap: 0px 0px;
grid-template-areas:
"title title"
"href href"
"description description"
"date tags";
margin-bottom: 1em;
padding: 0;
border: 2px solid #540B0E;
background-color: #FFF3B0;
&-title {
margin: 0;
padding: 1ex;
background-color: #E09F3E;
grid-area: title;
font-weight: bold;
}
&-href,
&-description,
&-date,
&-tags {
padding: 1ex;
margin: 0;
}
&-href,
&-description,
&-date {
font-size: 0.9em;
}
&-href {
grid-area: href;
}
&-description {
grid-area: description;
> p {
border-left: 3px solid #9E2A2B;
margin: 0;
padding: 0.5ex 0 0.5ex 1ex;
}
}
&-date {
grid-area: date;
}
&-tags {
font-size: 0.8em;
grid-area: tags;
text-align: right;
}
&-tag {
display: inline-block;
padding: 0.5ex 0.8ex;
margin: 0 0 0.2ex 0;
border-radius: 7px;
background-color: #9E2A2B;
color: #FFF3B0;
}
}

View File

@ -0,0 +1,39 @@
ul.pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 1em 0;
padding: 0;
> li {
display: block;
margin: 0;
&.disabled {
color: #aaa;
}
> a, span {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 2em;
min-width: 2em;
}
&.active,
> a,
> a:active,
> a:visited {
color: #fff;
}
> a:hover {
color: #88f;
}
}
}

View File

@ -2,8 +2,12 @@
@section('content')
{{ $bookmarks->links() }}
@foreach ($bookmarks as $bookmark)
<x-bookmark :bookmark="$bookmark" />
@endforeach
{{ $bookmarks->links() }}
@endsection

View File

@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>urlsnail</title>
<title>url snail</title>
@vite(['resources/sass/app.scss'])
</head>
<body>

View File

@ -0,0 +1,46 @@
@if ($paginator->hasPages())
<nav>
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
<span aria-hidden="true">&lsaquo;</span>
</li>
@else
<li>
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
</li>
@endif
{{-- Pagination Elements --}}
@foreach ($elements as $element)
{{-- "Three Dots" Separator --}}
@if (is_string($element))
<li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
@endif
{{-- Array Of Links --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="active" aria-current="page"><span>{{ $page }}</span></li>
@else
<li><a href="{{ $url }}">{{ $page }}</a></li>
@endif
@endforeach
@endif
@endforeach
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li>
<a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
</li>
@else
<li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
<span aria-hidden="true">&rsaquo;</span>
</li>
@endif
</ul>
</nav>
@endif

View File

@ -0,0 +1,19 @@
@if ($paginator->hasPages())
<nav>
<ul class="pagination">
{{-- Previous Page Link --}}
@if ($paginator->onFirstPage())
<li class="disabled" aria-disabled="true"><span>@lang('pagination.previous')</span></li>
@else
<li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
@endif
{{-- Next Page Link --}}
@if ($paginator->hasMorePages())
<li><a href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
@else
<li class="disabled" aria-disabled="true"><span>@lang('pagination.next')</span></li>
@endif
</ul>
</nav>
@endif