MightyPork/datatable.directory
1
0
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

pretty paginator and better css for buttons in card headers

Browse Source
This commit is contained in:
MightyPork
2018-07-22 17:06:08 +02:00
parent 3b123d7f08
commit 8356997133
7 changed files with 193 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Models/Table.php
+10
View File
@@ -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
Vendored
-25
View File
@@ -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
Vendored
+101 -6
View File
@@ -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
.card-header .btn {
margin-top: -3px;
margin-bottom: -10px;
.fa-large.fa-pr::before {
margin-right: $sp2;
}
.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
+1 -2
View File
@@ -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
+12 -7
View File
@@ -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
Vendored
+44
View File
@@ -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
Vendored
+25
View File
@@ -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