workin on joined index

app/Http/Controllers/JoinedController.php

@@ -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()

app/Providers/AppServiceProvider.php

@@ -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');
     }
 }

public/css/admin/style.css

@@ -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;
+}

resources/sass/admin/_base.scss

@@ -123,3 +123,40 @@ 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;
+}

resources/sass/admin/_layout.scss

@@ -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;
 }

resources/sass/admin/_modules.scss

@@ -13,3 +13,27 @@
 .success { @include msg($c-green); }
 .warning { @include msg($c-yellow); }
 .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;
+}

resources/sass/admin/_vars.scss

@@ -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;
@@ -59,3 +59,19 @@ $c-red:    #e20000;
 
 	@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;
+	// }
+}

resources/views/admin/joined/index.blade.php

@@ -5,3 +5,30 @@
 @endsection
 
 @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

resources/views/vendor/pagination/default.blade.php

@@ -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

resources/views/vendor/pagination/simple-default.blade.php

@@ -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