Add bookmark pagination
This commit is contained in:
parent
ca62dfafdc
commit
f6613c5e7d
@ -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
|
||||
|
@ -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');
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
72
resources/sass/components/_bookmark.scss
Normal file
72
resources/sass/components/_bookmark.scss
Normal 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;
|
||||
}
|
||||
}
|
39
resources/sass/components/_pagination.scss
Normal file
39
resources/sass/components/_pagination.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
@ -2,8 +2,12 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
{{ $bookmarks->links() }}
|
||||
|
||||
@foreach ($bookmarks as $bookmark)
|
||||
<x-bookmark :bookmark="$bookmark" />
|
||||
@endforeach
|
||||
|
||||
{{ $bookmarks->links() }}
|
||||
|
||||
@endsection
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>urlsnail</title>
|
||||
<title>url snail</title>
|
||||
@vite(['resources/sass/app.scss'])
|
||||
</head>
|
||||
<body>
|
||||
|
46
resources/views/pagination/default.blade.php
Normal file
46
resources/views/pagination/default.blade.php
Normal 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">‹</span>
|
||||
</li>
|
||||
@else
|
||||
<li>
|
||||
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</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')">›</a>
|
||||
</li>
|
||||
@else
|
||||
<li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
|
||||
<span aria-hidden="true">›</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
@endif
|
19
resources/views/pagination/simple-default.blade.php
Normal file
19
resources/views/pagination/simple-default.blade.php
Normal 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
|
Loading…
Reference in New Issue
Block a user