workin on joined index
This commit is contained in:
parent
dfbdb12130
commit
12e4a700a7
10 changed files with 259 additions and 10 deletions
|
@ -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()
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
// }
|
||||
}
|
|
@ -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
|
50
resources/views/vendor/pagination/default.blade.php
vendored
Normal file
50
resources/views/vendor/pagination/default.blade.php
vendored
Normal 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')">
|
||||
‹
|
||||
</span>
|
||||
@else
|
||||
<a class="pagination__item" href="{{ $paginator->previousPageUrl() }}" rel="prev"
|
||||
aria-label="@lang('pagination.previous')">
|
||||
‹
|
||||
</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')">
|
||||
›
|
||||
</a>
|
||||
@else
|
||||
<span class="pagination__item--disabled" aria-disabled="true"
|
||||
aria-label="@lang('pagination.next')" aria-hidden="true">
|
||||
›
|
||||
</span>
|
||||
@endif
|
||||
</nav>
|
||||
@endif
|
19
resources/views/vendor/pagination/simple-default.blade.php
vendored
Normal file
19
resources/views/vendor/pagination/simple-default.blade.php
vendored
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 a new issue