pretty paginator and better css for buttons in card headers

resources/views/user/_table-list.blade.php

@@ -4,7 +4,7 @@
   @else
     @foreach($tables as $table)
       <a class="list-group-item list-group-item-action"
-         href="{{route('table.view', ['user' => $table->cachedOwner()->name, 'table' => $table->name])}}">
+         href="{{$table->viewPage}}">
         <span class="d-block row">
           <span class="d-inline-block col-10">
             <i class="fa-table fa-pr"></i>{{ $table->title }}
@@ -24,6 +24,5 @@
         </span>
       </a>
     @endforeach
-    {{ $tables->links() }}
   @endif
 </div>

resources/views/user/view.blade.php

@@ -14,12 +14,11 @@
       {{-- Dash card --}}
       <div class="col-md-4">
         <div class="card">
-          <div class="card-header">
-            <i class="fa-user-circle-o pr-1"></i>
-            {{ $user->title }}
+          <div class="card-header card-header-extra">
+            <i class="fa-user-circle-o fa-pr fa-large"></i>{{ $user->title }}
 
             @if(authed() && user()->is($user))
-              <a href="{{route('user.edit')}}" class="btn btn-sm btn-outline-light float-right">Edit</a>
+              <a href="{{route('user.edit')}}" class="btn ml-auto">Edit</a>
             @endif
           </div>
 
@@ -68,8 +67,8 @@
       {{-- Table list card --}}
       <div class="col-md-8">
         <div class="card">
-          <div class="card-header">
-            <span class="d-inline-block">
+          <div class="card-header card-header-extra">
+            <span>
               @if(authed() && user()->is($user))
                 Your Tables
               @else
@@ -77,8 +76,14 @@
               @endif
             </span>
 
+            @if ($tables->hasPages())
+              <nav class="ml-auto" aria-label="Pages of the table list">
+                {{ $tables->links(null, ['ulClass' => 'pagination-sm mb-0 pagination-outline-light']) }}
+              </nav>
+            @endif
+
             @if(authed() && user()->is($user))
-              <a href="{{route('table.create')}}" class="btn btn-sm btn-outline-light float-right">New</a>
+              <a href="{{route('table.create')}}" class="btn ml-3">New</a>
             @endif
           </div>
 

resources/views/vendor/pagination/bootstrap-4.blade.php

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

resources/views/vendor/pagination/simple-bootstrap-4.blade.php

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