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
pull/26/head
Ondřej Hruška 6 years ago
parent 3b123d7f08
commit 8356997133
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
7 changed files with 193 additions and 40 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      app/Models/Table.php
  2. 25
      resources/assets/sass/_variables.scss
  3. 107
      resources/assets/sass/app.scss
  4. 3
      resources/views/user/_table-list.blade.php
  5. 19
      resources/views/user/view.blade.php
  6. 44
      resources/views/vendor/pagination/bootstrap-4.blade.php
  7. 25
      resources/views/vendor/pagination/simple-bootstrap-4.blade.php

10
app/Models/Table.php
Unescape 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);
}
}

25
resources/assets/sass/_variables.scss vendored
Unescape 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;

107
resources/assets/sass/app.scss vendored
Unescape 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;
}

3
resources/views/user/_table-list.blade.php
Unescape 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>

19
resources/views/user/view.blade.php
Unescape 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>

44
resources/views/vendor/pagination/bootstrap-4.blade.php vendored
Unescape 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

25
resources/views/vendor/pagination/simple-bootstrap-4.blade.php vendored
Unescape 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
Write Preview
Loading…
Cancel
Save