pretty paginator and better css for buttons in card headers

app/Models/Table.php

@@ -22,6 +22,7 @@ use Riesjart\Relaquent\Model\Concerns\HasRelaquentRelationships;
  * @property string $description
  * @property string $license
  * @property string $origin
+ * @property-read string $viewPage
  * @property-read User $owner
  * @property-read Table $parentTable
  * @property-read Table[]|Collection $forks
@@ -96,4 +97,13 @@ class Table extends Model
     {
         return $this->belongsToMany(User::class, 'discussion_follows');
     }
+
+    public function __get($name)
+    {
+        if ($name == 'viewPage') {
+            return route('table.view', ['user' => $this->cachedOwner()->name, 'table' => $this->name]);
+        }
+
+        return parent::__get($name);
+    }
 }

resources/assets/sass/_variables.scss

@@ -1,25 +0,0 @@
-
-// Body
-$body-bg: white;//$gray-300;
-
-// Typography
-$font-family-sans-serif: "IBM Plex Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-$font-size-base: 1rem;
-$line-height-base: 1.6;
-
-$link-color:                $gray-800;
-$link-decoration:           none;
-$link-hover-color:          darken($link-color, 15%);
-$link-hover-decoration:     underline;
-
-$card-cap-bg: lighten($primary, 5);
-$card-border-color: $primary;
-//$card-border-width: 2px;
-$card-border-radius: 5px;
-$card-inner-border-radius: 2px;
-
-$list-group-hover-bg: rgba($primary, .1);
-
-$tooltip-max-width: 300px;
-$tooltip-bg: darken($primary, 20%);
-$tooltip-arrow-color: $tooltip-bg;

resources/assets/sass/app.scss

@@ -4,9 +4,49 @@
 
 // Variables
 @import "bst-base";
-@import "variables";
+
+$sp0: 0;
+$sp1_2: $spacer*.25;
+$sp1: $spacer*.5;
+$sp3_4: $spacer*.75;
+$sp1: $spacer*.5;
+$sp2: $spacer*1;
+$sp3: $spacer*1.5;
+$sp4: $spacer*2;
+
+
+// Body
+$body-bg: white;
+
+// Typography
+$font-family-sans-serif: "IBM Plex Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$font-size-base: 1rem;
+$line-height-base: 1.6;
+
+$link-color:                $gray-800;
+$link-decoration:           none;
+$link-hover-color:          darken($link-color, 15%);
+$link-hover-decoration:     underline;
+
+$card-cap-bg: lighten($primary, 5);
+$card-border-color: $primary;
+//$card-border-width: 2px;
+$card-border-radius: 5px;
+$card-inner-border-radius: 2px;
+
+$list-group-hover-bg: rgba($primary, .1);
+
+$tooltip-max-width: 300px;
+$tooltip-bg: darken($primary, 20%);
+$tooltip-arrow-color: $tooltip-bg;
+
+$pagination-padding-y-sm: $sp1_2;
+$pagination-padding-x-sm: $sp3_4;
+
+
 @import "bst-modules";
 
+
 // generic hiding class
 .hidden {
 	display: none !important;
@@ -14,15 +54,22 @@
 
 // padding right for icons (must not use space next to it!)
 .fa-pr::before {
-	margin-right: ($spacer*.5);
+	margin-right: $sp1;
 }
 
-// button in card header, adjusting margins to not stretch the header
+.fa-large.fa-pr::before {
-.card-header .btn {
+	margin-right: $sp2;
-	margin-top: -3px;
+}
-	margin-bottom: -10px;
+
+.fa-large {
+	font-size: 1.6em;
 }
 
+.card-header .fa-large {
+	margin: -.6em 0; // fix alignment
+}
+
+
 html {
 	overflow-y: scroll;
 }
@@ -64,3 +111,51 @@ html {
 .card {
 	box-shadow: 0 2px 3px rgba(black, .3);
 }
+
+.pagination-outline-light {
+	.page-link {
+		color: white;
+		background-color: transparent;
+		border: $pagination-border-width solid white;
+
+		&:hover {
+			color: white;
+			background-color: rgba(black, .2);
+			border-color: white;
+		}
+
+		&:focus {
+			z-index: 2;
+			outline: 0 none;
+			box-shadow: 0 0 0 $btn-focus-width rgba(white, .5);
+		}
+	}
+
+	.page-item {
+		font-weight: normal;
+
+		&.active .page-link {
+			color: white;
+			font-weight: bold;
+			background-color: rgba(black, .2);
+			border-color: white;
+		}
+
+		&.disabled .page-link {
+			color: rgba(white, .6);
+			background-color: transparent;
+			border-color: white;
+		}
+	}
+}
+
+.card-header-extra {
+	display:flex;
+	align-items: center;
+}
+
+// special styles for buttons in card header
+.card-header .btn {
+	@extend .btn-sm;
+	@extend .btn-outline-light;
+}

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">
+          <div class="card-header card-header-extra">
-            <i class="fa-user-circle-o pr-1"></i>
+            <i class="fa-user-circle-o fa-pr fa-large"></i>{{ $user->title }}
-            {{ $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">
+          <div class="card-header card-header-extra">
-            <span class="d-inline-block">
+            <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