workin on joined index

This commit is contained in:
Marley Rae 2022-04-23 19:31:00 -07:00
parent dfbdb12130
commit 12e4a700a7
10 changed files with 259 additions and 10 deletions

View file

@ -16,7 +16,10 @@ public function __construct()
public function index()
{
return view('admin.joined.index');
$collective = auth_collective();
return view('admin.joined.index')->with([
'joined' => $collective->joined()->paginate(8),
]);
}
public function create()

View file

@ -3,6 +3,7 @@
namespace App\Providers;
use Illuminate\Database\Eloquent\Relations\Relation;
use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
@ -29,5 +30,8 @@ public function boot()
'owned' => 'App\Models\Owned',
'wish' => 'App\Models\Wish',
]);
Paginator::defaultView('vendor.pagination.default');
Paginator::defaultSimpleView('vendor.pagination.simple-default');
}
}

View file

@ -1,5 +1,5 @@
@import url(https://fonts.googleapis.com/css2?family=Imprima&family=Satisfy&display=swap);
/* ------------------------------------------------------------------------------------ &BTN ---- */
/* ------------------------------------------------------------------------- &MIXINS/EXTENDS ---- */
.form__input--file::-webkit-file-upload-button {
border: 1px solid #7874ff;
padding: 5px 10px;
@ -12,7 +12,7 @@ .form__input--file::-webkit-file-upload-button {
-webkit-transition: background-color 0.4s, border-color 0.4s, color 0.4s;
transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.l-page-nav__link, .form__input--file::file-selector-button, .form__btn {
.pagination__item, .pagination__item--disabled, .pagination__item--active, .l-page-nav__link, .form__input--file::file-selector-button, .form__btn {
border: 1px solid #7874ff;
padding: 5px 10px;
margin-right: 5px;
@ -30,7 +30,7 @@ .form__input--file:hover::-webkit-file-upload-button {
-webkit-transition: background-color 0.4s, border-color 0.4s, color 0.4s;
transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.l-page-nav__link:hover, .form__input--file:hover::file-selector-button, .form__btn:hover {
.pagination__item:hover, .pagination__item--disabled:hover, .pagination__item--active:hover, .l-page-nav__link:hover, .form__input--file:hover::file-selector-button, .form__btn:hover {
border-color: #de7cff;
background-color: #f8e5ff;
color: #de7cff;
@ -43,13 +43,19 @@ .form__input--file:focus::-webkit-file-upload-button {
-webkit-transition: background-color 0.4s, border-color 0.4s, color 0.4s;
transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.l-page-nav__link:focus, .form__input--file:focus::file-selector-button, .form__btn:focus {
.pagination__item:focus, .pagination__item--disabled:focus, .pagination__item--active:focus, .l-page-nav__link:focus, .form__input--file:focus::file-selector-button, .form__btn:focus {
border-color: #de7cff;
background-color: #f8e5ff;
color: #de7cff;
transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.pagination__item--disabled, .pagination__item--active {
border-color: #de7cff;
background-color: #f8e5ff;
color: #de7cff;
}
html {
box-sizing: border-box;
}
@ -199,6 +205,41 @@ .form__error {
color: #e20000;
}
/* --------------------------------------------------------------------------------- &TABLES ---- */
.table {
margin: 0 auto;
border-collapse: collapse;
}
.table tr, .table td, .table th {
border: 1px solid #7874ff;
}
.table td {
min-width: 30px;
}
.table__thead, .table__thead th {
font-weight: normal;
background-color: #d7d5ff;
border-color: #7874ff;
color: #7874ff;
}
.table__thead th {
padding: 5px;
}
.table__tbody td {
text-align: center;
padding: 5px;
}
.table__tbody img {
max-height: 50px;
margin: auto;
}
html, body {
width: 100%;
height: 100%;
@ -216,10 +257,13 @@ .l-container {
margin: 0 auto;
background-color: #f8f8ff;
border: 1px solid #7874ff;
display: grid;
grid-template-rows: 7% auto;
grid-template-columns: auto;
}
.l-nav {
height: 7%;
grid-row: 1/2;
display: flex;
align-items: stretch;
border-bottom: 1px solid #7874ff;
@ -259,6 +303,7 @@ .l-page-nav__link {
}
.l-main {
grid-row: 2/3;
padding: 10px 40px;
overflow: auto;
}
@ -286,3 +331,22 @@ .error {
width: 60%;
margin: 10px auto;
}
/* ----------------------------------------------------------------------------- &PAGINATION ---- */
.pagination {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.pagination a {
text-decoration: none;
}
.pagination__item, .pagination__item--disabled, .pagination__item--active {
margin: 0;
}
.pagination__item:not(:last-child), .pagination__item--disabled:not(:last-child), .pagination__item--active:not(:last-child) {
border-right: none;
}

View file

@ -122,4 +122,41 @@ h1 {
.form__error {
color: $c-red;
}
/* --------------------------------------------------------------------------------- &TABLES ---- */
.table {
margin: 0 auto;
border-collapse: collapse;
}
.table tr, .table td, .table th {
border: 1px solid $c-main;
}
.table td {
min-width: 30px;
}
.table__thead {
font-weight: normal;
background-color: $c-main-light;
border-color: $c-main;
color: $c-main;
}
.table__thead th {
@extend .table__thead;
padding: 5px;
}
.table__tbody td {
text-align: center;
padding: 5px;
}
.table__tbody img {
max-height: 50px;
margin: auto;
}

View file

@ -18,11 +18,15 @@ body {
margin: 0 auto;
background-color: #f8f8ff;
border: 1px solid $c-main;
display: grid;
grid-template-rows: 7% auto;
grid-template-columns: auto;
}
.l-nav {
height: 7%;
grid-row: 1/2;
display: flex;
align-items: stretch;
border-bottom: 1px solid $c-main;
@ -64,6 +68,7 @@ body {
.l-main {
grid-row: 2/3;
padding: 10px 40px;
overflow: auto;
}

View file

@ -12,4 +12,28 @@
.success { @include msg($c-green); }
.warning { @include msg($c-yellow); }
.error { @include msg($c-red); }
.error { @include msg($c-red); }
/* ----------------------------------------------------------------------------- &PAGINATION ---- */
.pagination {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 20px;
a { text-decoration: none; }
}
.pagination__item {
@extend %btn;
margin: 0;
&:not(:last-child) { border-right: none; }
}
.pagination__item--disabled, .pagination__item--active {
@extend .pagination__item;
@extend %disabled;
}

View file

@ -19,7 +19,7 @@ $c-green: #30be00;
$c-yellow: #ebb000;
$c-red: #e20000;
/* ------------------------------------------------------------------------------------ &BTN ---- */
/* ------------------------------------------------------------------------- &MIXINS/EXTENDS ---- */
@mixin hover($focus: true, $bg: true) {
border-color: $c-main;
@ -58,4 +58,20 @@ $c-red: #e20000;
cursor: pointer;
@include hover;
}
%disabled {
border-color: $c-accent;
background-color: $c-accent-lightest;
color: $c-accent;
// border-color: #888;
// background-color: #ddd;
// color: #888;
// &:hover, &:focus {
// border-color: #888;
// background-color: #ddd;
// color: #888;
// }
}

View file

@ -4,4 +4,31 @@
<x-admin.nav :section="'joined'" />
@endsection
@section('pg-title', 'Joined')
@section('pg-title', 'Joined')
@section('content')
<table class="table">
<thead class="table__thead">
<tr>
<th>{{-- approved --}}</th>
<th>Subject</th> {{-- link --}}
<th>Categories</th>
<th>Image</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<tbody class="table__tbody">
@foreach ($joined as $fl)
<tr>
<td></td>
<td><a href="{{ $fl->url }}" target="_blank">{{ $fl->subject }}</a></td>
<td></td>
<td><img src="{{ $fl->image }}"></td>
</tr>
@endforeach
</tbody>
</table>
{{ $joined->links() }}
@endsection

View file

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