github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-23 19:44:45 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Re-arranged some list items to flexbox instead of grid

Browse Source 
Since flexbox is better supported on a wider range of elements
This commit is contained in:
Dan Brown 2019-02-16 15:05:18 +00:00
parent a112c11df8
commit b00b319e83
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
16 changed files with 90 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
resources/assets/sass/_lists.scss
View File

@ -250,19 +250,25 @@ ul.pagination {
.entity-list-item, .icon-list-item { .entity-list-item, .icon-list-item {
padding: $-s $-m; padding: $-s $-m;
display: grid; display: flex;
grid-template-columns: min-content 1fr; align-items: center;
grid-column-gap: $-m; background-color: transparent;
align-items: top; border: 0;
> .content { cursor: pointer;
padding-top: 2px; width: 100%;
} position: relative;
.icon {
font-size: 1rem;
}
h4 a { h4 a {
color: #666; color: #666;
} }
> span:first-child {
margin-right: $-m;
flex-basis: 1.88em;
flex: none;
}
> span:last-child {
flex: 1;
text-align: left;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: #DDD; background-color: #DDD;
@ -278,10 +284,13 @@ ul.pagination {
} }
.entity-list-item-image { .entity-list-item-image {
align-self: stretch;
width: 140px; width: 140px;
background-size: cover; background-size: cover;
background-position: 50% 50%; background-position: 50% 50%;
border-radius: 3px; border-radius: 3px;
position: relative;
margin-right: $-l;
@include smaller-than($m) { @include smaller-than($m) {
width: 80px; width: 80px;
} }

2
resources/assets/sass/_pages.scss
View File

@ -356,7 +356,7 @@
} }
} }
.entity-list-item > .icon, .icon-list-item > .icon { .entity-list-item > span:first-child, .icon-list-item > span:first-child {
font-size: 0.8rem; font-size: 0.8rem;
width: 1.88em; width: 1.88em;
height: 1.88em; height: 1.88em;

2
resources/views/books/index.blade.php
View File

@ -40,7 +40,7 @@
<div class="icon-list text-primary"> <div class="icon-list text-primary">
@if($currentUser->can('book-create-all')) @if($currentUser->can('book-create-all'))
<a href="{{ baseUrl("/create-book") }}" class="icon-list-item"> <a href="{{ baseUrl("/create-book") }}" class="icon-list-item">
<span class="icon">@icon('add')</span> <span>@icon('add')</span>
<span>{{ trans('entities.books_create') }}</span> <span>{{ trans('entities.books_create') }}</span>
</a> </a>
@endif @endif

14
resources/views/books/show.blade.php
View File

@ -59,7 +59,7 @@
<div class="icon-list text-primary"> <div class="icon-list text-primary">
<div dropdown class="dropdown-container"> <div dropdown class="dropdown-container">
<div dropdown-toggle class="icon-list-item"> <div dropdown-toggle class="icon-list-item">
<span class="icon">@icon('export')</span> <span>@icon('export')</span>
<span>{{ trans('entities.export') }}</span> <span>{{ trans('entities.export') }}</span>
</div> </div>
<ul class="wide"> <ul class="wide">
@ -71,35 +71,35 @@
@if(userCan('page-create', $book)) @if(userCan('page-create', $book))
<a href="{{ $book->getUrl('/create-page') }}" class="icon-list-item"> <a href="{{ $book->getUrl('/create-page') }}" class="icon-list-item">
<span class="icon">@icon('add')</span> <span>@icon('add')</span>
<span>{{ trans('entities.pages_new') }}</span> <span>{{ trans('entities.pages_new') }}</span>
</a> </a>
@endif @endif
@if(userCan('chapter-create', $book)) @if(userCan('chapter-create', $book))
<a href="{{ $book->getUrl('/create-chapter') }}" class="icon-list-item"> <a href="{{ $book->getUrl('/create-chapter') }}" class="icon-list-item">
<span class="icon">@icon('add')</span> <span>@icon('add')</span>
<span>{{ trans('entities.chapters_new') }}</span> <span>{{ trans('entities.chapters_new') }}</span>
</a> </a>
@endif @endif
@if(userCan('book-update', $book)) @if(userCan('book-update', $book))
<a href="{{ $book->getUrl('/edit') }}" class="icon-list-item"> <a href="{{ $book->getUrl('/edit') }}" class="icon-list-item">
<span class="icon">@icon('edit')</span> <span>@icon('edit')</span>
<span>{{ trans('common.edit') }}</span> <span>{{ trans('common.edit') }}</span>
</a> </a>
<a href="{{ $book->getUrl('/sort') }}" class="icon-list-item"> <a href="{{ $book->getUrl('/sort') }}" class="icon-list-item">
<span class="icon">@icon('sort')</span> <span>@icon('sort')</span>
<span>{{ trans('common.sort') }}</span> <span>{{ trans('common.sort') }}</span>
</a> </a>
@endif @endif
@if(userCan('restrictions-manage', $book)) @if(userCan('restrictions-manage', $book))
<a href="{{ $book->getUrl('/permissions') }}" class="icon-list-item"> <a href="{{ $book->getUrl('/permissions') }}" class="icon-list-item">
<span class="icon">@icon('lock')</span> <span>@icon('lock')</span>
<span>{{ trans('entities.permissions') }}</span> <span>{{ trans('entities.permissions') }}</span>
</a> </a>
@endif @endif
@if(userCan('book-delete', $book)) @if(userCan('book-delete', $book))
<a href="{{ $book->getUrl('/delete') }}" class="icon-list-item"> <a href="{{ $book->getUrl('/delete') }}" class="icon-list-item">
<span class="icon">@icon('delete')</span> <span>@icon('delete')</span>
<span>{{ trans('common.delete') }}</span> <span>{{ trans('common.delete') }}</span>
</a> </a>
@endif @endif

14
resources/views/chapters/show.blade.php
View File

@ -61,7 +61,7 @@
<div dropdown class="dropdown-container"> <div dropdown class="dropdown-container">
<div dropdown-toggle class="icon-list-item"> <div dropdown-toggle class="icon-list-item">
<span class="icon">@icon('export')</span> <span>@icon('export')</span>
<span>{{ trans('entities.export') }}</span> <span>{{ trans('entities.export') }}</span>
</div> </div>
<ul class="wide"> <ul class="wide">
@ -73,38 +73,38 @@
@if(userCan('page-create', $chapter)) @if(userCan('page-create', $chapter))
<a href="{{ $chapter->getUrl('/create-page') }}" class="icon-list-item"> <a href="{{ $chapter->getUrl('/create-page') }}" class="icon-list-item">
<span class="icon">@icon('add')</span> <span>@icon('add')</span>
<span>{{ trans('entities.pages_new') }}</span> <span>{{ trans('entities.pages_new') }}</span>
</a> </a>
@endif @endif
@if(userCan('chapter-update', $chapter)) @if(userCan('chapter-update', $chapter))
<a href="{{ $chapter->getUrl('/edit') }}" class="icon-list-item"> <a href="{{ $chapter->getUrl('/edit') }}" class="icon-list-item">
<span class="icon">@icon('edit')</span> <span>@icon('edit')</span>
<span>{{ trans('common.edit') }}</span> <span>{{ trans('common.edit') }}</span>
</a> </a>
@endif @endif
@if(userCan('chapter-update', $chapter) && userCan('chapter-delete', $chapter)) @if(userCan('chapter-update', $chapter) && userCan('chapter-delete', $chapter))
<a href="{{ $chapter->getUrl('/move') }}" class="icon-list-item"> <a href="{{ $chapter->getUrl('/move') }}" class="icon-list-item">
<span class="icon">@icon('folder')</span> <span>@icon('folder')</span>
<span>{{ trans('common.move') }}</span> <span>{{ trans('common.move') }}</span>
</a> </a>
@endif @endif
@if(userCan('restrictions-manage', $chapter)) @if(userCan('restrictions-manage', $chapter))
<a href="{{ $chapter->getUrl('/permissions') }}" class="icon-list-item"> <a href="{{ $chapter->getUrl('/permissions') }}" class="icon-list-item">
<span class="icon">@icon('lock')</span> <span>@icon('lock')</span>
<span>{{ trans('entities.permissions') }}</span> <span>{{ trans('entities.permissions') }}</span>
</a> </a>
@endif @endif
@if(userCan('chapter-delete', $chapter)) @if(userCan('chapter-delete', $chapter))
<a href="{{ $chapter->getUrl('/delete') }}" class="icon-list-item"> <a href="{{ $chapter->getUrl('/delete') }}" class="icon-list-item">
<span class="icon">@icon('delete')</span> <span>@icon('delete')</span>
<span>{{ trans('common.delete') }}</span> <span>{{ trans('common.delete') }}</span>
</a> </a>
@endif @endif
{{--@if(userCan('page-create', $book))--}} {{--@if(userCan('page-create', $book))--}}
{{--<a href="{{ $book->getUrl('/create-page') }}" class="icon-list-item">--}} {{--<a href="{{ $book->getUrl('/create-page') }}" class="icon-list-item">--}}
{{--<span class="icon">@icon('add')</span>--}} {{--<span>@icon('add')</span>--}}
{{--<span>{{ trans('entities.pages_new') }}</span>--}} {{--<span>{{ trans('entities.pages_new') }}</span>--}}
{{--</a>--}} {{--</a>--}}
{{--@endif--}} {{--@endif--}}

2
resources/views/components/toggle-switch.blade.php
View File

@ -2,5 +2,5 @@
<input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/> <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
<input type="checkbox" @if($value) checked="checked" @endif> <input type="checkbox" @if($value) checked="checked" @endif>
<span class="custom-checkbox text-primary">@icon('check')</span> <span class="custom-checkbox text-primary">@icon('check')</span>
<span class="label">{{ $label ?? '' }}</span> {{-- TODO - remove default operataor backup --}} <span class="label">{{ $label }}</span>
</label> </label>

34
resources/views/pages/delete.blade.php
View File

@ -1,6 +1,5 @@
@extends('simple-layout') @extends('simple-layout')
@section('body') @section('body')
<div class="container small"> <div class="container small">
@ -17,23 +16,26 @@
<div class="card content-wrap auto-height"> <div class="card content-wrap auto-height">
<h1 class="list-heading">{{ $page->draft ? trans('entities.pages_delete_draft') : trans('entities.pages_delete') }}</h1> <h1 class="list-heading">{{ $page->draft ? trans('entities.pages_delete_draft') : trans('entities.pages_delete') }}</h1>
<p class="text-neg">
<strong>
{{ $page->draft ? trans('entities.pages_delete_draft_confirm'): trans('entities.pages_delete_confirm') }}
</strong>
</p>
{{--TODO - Looks strange--}} <div class="grid half v-center">
<div>
<form action="{{ $page->getUrl() }}" method="POST"> <p class="text-neg">
{!! csrf_field() !!} <strong>
<input type="hidden" name="_method" value="DELETE"> {{ $page->draft ? trans('entities.pages_delete_draft_confirm'): trans('entities.pages_delete_confirm') }}
<div class="form-group text-right"> </strong>
<a href="{{ $page->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a> </p>
<button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
</div> </div>
</form> <div>
<form action="{{ $page->getUrl() }}" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="DELETE">
<div class="form-group text-right">
<a href="{{ $page->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
<button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
</div>
</form>
</div>
</div>
</div> </div>
</div> </div>

14
resources/views/pages/show.blade.php
View File

@ -119,7 +119,7 @@
{{--Export--}} {{--Export--}}
<div dropdown class="dropdown-container block"> <div dropdown class="dropdown-container block">
<div dropdown-toggle class="icon-list-item"> <div dropdown-toggle class="icon-list-item">
<span class="icon">@icon('export')</span> <span>@icon('export')</span>
<span>{{ trans('entities.export') }}</span> <span>{{ trans('entities.export') }}</span>
</div> </div>
<ul class="wide"> <ul class="wide">
@ -132,33 +132,33 @@
{{--User Actions--}} {{--User Actions--}}
@if(userCan('page-update', $page)) @if(userCan('page-update', $page))
<a href="{{ $page->getUrl('/edit') }}" class="icon-list-item"> <a href="{{ $page->getUrl('/edit') }}" class="icon-list-item">
<span class="icon">@icon('edit')</span> <span>@icon('edit')</span>
<span>{{ trans('common.edit') }}</span> <span>{{ trans('common.edit') }}</span>
</a> </a>
<a href="{{ $page->getUrl('/copy') }}" class="icon-list-item"> <a href="{{ $page->getUrl('/copy') }}" class="icon-list-item">
<span class="icon">@icon('copy')</span> <span>@icon('copy')</span>
<span>{{ trans('common.copy') }}</span> <span>{{ trans('common.copy') }}</span>
</a> </a>
@if(userCan('page-delete', $page)) @if(userCan('page-delete', $page))
<a href="{{ $page->getUrl('/move') }}" class="icon-list-item"> <a href="{{ $page->getUrl('/move') }}" class="icon-list-item">
<span class="icon">@icon('folder')</span> <span>@icon('folder')</span>
<span>{{ trans('common.move') }}</span> <span>{{ trans('common.move') }}</span>
</a> </a>
@endif @endif
<a href="{{ $page->getUrl('/revisions') }}" class="icon-list-item"> <a href="{{ $page->getUrl('/revisions') }}" class="icon-list-item">
<span class="icon">@icon('history')</span> <span>@icon('history')</span>
<span>{{ trans('entities.revisions') }}</span> <span>{{ trans('entities.revisions') }}</span>
</a> </a>
@endif @endif
@if(userCan('restrictions-manage', $page)) @if(userCan('restrictions-manage', $page))
<a href="{{ $page->getUrl('/permissions') }}" class="icon-list-item"> <a href="{{ $page->getUrl('/permissions') }}" class="icon-list-item">
<span class="icon">@icon('lock')</span> <span>@icon('lock')</span>
<span>{{ trans('entities.permissions') }}</span> <span>{{ trans('entities.permissions') }}</span>
</a> </a>
@endif @endif
@if(userCan('page-delete', $page)) @if(userCan('page-delete', $page))
<a href="{{ $page->getUrl('/delete') }}" class="icon-list-item"> <a href="{{ $page->getUrl('/delete') }}" class="icon-list-item">
<span class="icon">@icon('delete')</span> <span>@icon('delete')</span>
<span>{{ trans('common.delete') }}</span> <span>{{ trans('common.delete') }}</span>
</a> </a>
@endif @endif

2
resources/views/partials/entity-list-item-basic.blade.php
View File

@ -1,6 +1,6 @@
<?php $type = $entity->getType(); ?> <?php $type = $entity->getType(); ?>
<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}"> <a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
<div class="icon text-{{$type}}">@icon($type)</div> <span class="icon text-{{$type}}">@icon($type)</span>
<div class="content"> <div class="content">
<h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4> <h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
{{ $slot ?? '' }} {{ $slot ?? '' }}

10
resources/views/partials/view-toggle.blade.php
View File

@ -4,15 +4,15 @@
{!! method_field('PATCH') !!} {!! method_field('PATCH') !!}
<input type="hidden" value="{{ $view === 'list'? 'grid' : 'list' }}" name="view_type"> <input type="hidden" value="{{ $view === 'list'? 'grid' : 'list' }}" name="view_type">
@if ($view === 'list') @if ($view === 'list')
<a onclick="this.closest('form').submit()" type="submit" class="icon-list-item"> <button type="submit" class="icon-list-item text-primary">
<span class="icon">@icon('grid')</span> <span class="icon">@icon('grid')</span>
<span>{{ trans('common.grid_view') }}</span> <span>{{ trans('common.grid_view') }}</span>
</a> </button>
@else @else
<a onclick="this.closest('form').submit()" type="submit" class="icon-list-item"> <button type="submit" class="icon-list-item text-primary">
<span class="icon">@icon('list')</span> <span>@icon('list')</span>
<span>{{ trans('common.list_view') }}</span> <span>{{ trans('common.list_view') }}</span>
</a> </button>
@endif @endif
</form> </form>
</div> </div>

23
resources/views/settings/roles/delete.blade.php
View File

@ -1,7 +1,5 @@
@extends('simple-layout') @extends('simple-layout')
{{--TODO - Looks strange--}}
@section('body') @section('body')
<div class="container small"> <div class="container small">
@ -25,14 +23,21 @@
</div> </div>
@endif @endif
<p class="text-neg"> <div class="grid half v-center">
<strong>{{ trans('settings.role_delete_sure') }}</strong> <div>
</p> <p class="text-neg">
<strong>{{ trans('settings.role_delete_sure') }}</strong>
<div class="form-group text-right"> </p>
<a href="{{ baseUrl("/settings/roles/{$role->id}") }}" class="button outline">{{ trans('common.cancel') }}</a> </div>
<button type="submit" class="button primary">{{ trans('common.confirm') }}</button> <div>
<div class="form-group text-right">
<a href="{{ baseUrl("/settings/roles/{$role->id}") }}" class="button outline">{{ trans('common.cancel') }}</a>
<button type="submit" class="button primary">{{ trans('common.confirm') }}</button>
</div>
</div>
</div> </div>
</form> </form>
</div> </div>

2
resources/views/settings/roles/edit.blade.php
View File

@ -9,7 +9,7 @@
<form action="{{ baseUrl("/settings/roles/{$role->id}") }}" method="POST"> <form action="{{ baseUrl("/settings/roles/{$role->id}") }}" method="POST">
<input type="hidden" name="_method" value="PUT"> <input type="hidden" name="_method" value="PUT">
@include('settings/roles/form', ['model' => $role, 'title' => trans('settings.role_edit'), 'icon' => 'edit']) @include('settings.roles.form', ['model' => $role, 'title' => trans('settings.role_edit'), 'icon' => 'edit'])
</form> </form>
</div> </div>

2
resources/views/settings/roles/form.blade.php
View File

@ -199,7 +199,7 @@
<div class="form-group text-right"> <div class="form-group text-right">
<a href="{{ baseUrl("/settings/roles") }}" class="button outline">{{ trans('common.cancel') }}</a> <a href="{{ baseUrl("/settings/roles") }}" class="button outline">{{ trans('common.cancel') }}</a>
@if (isset($role) && $role->id) @if (isset($role) && $role->id)
<a href="{{ baseUrl("/settings.roles.delete/{$role->id}") }}" class="button outline">{{ trans('settings.role_delete') }}</a> <a href="{{ baseUrl("/settings/roles/delete/{$role->id}") }}" class="button outline">{{ trans('settings.role_delete') }}</a>
@endif @endif
<button type="submit" class="button primary">{{ trans('settings.role_save') }}</button> <button type="submit" class="button primary">{{ trans('settings.role_save') }}</button>
</div> </div>

2
resources/views/shelves/index.blade.php
View File

@ -12,7 +12,7 @@
@include('partials.view-toggle', ['view' => $view, 'type' => 'shelf']) @include('partials.view-toggle', ['view' => $view, 'type' => 'shelf'])
@if($currentUser->can('bookshelf-create-all')) @if($currentUser->can('bookshelf-create-all'))
<a href="{{ baseUrl("/create-shelf") }}" class="icon-list-item"> <a href="{{ baseUrl("/create-shelf") }}" class="icon-list-item">
<span class="icon">@icon('add')</span> <span>@icon('add')</span>
<span>{{ trans('entities.shelves_create') }}</span> <span>{{ trans('entities.shelves_create') }}</span>
</a> </a>
@endif @endif

6
resources/views/shelves/show.blade.php
View File

@ -66,21 +66,21 @@
@if(userCan('bookshelf-update', $shelf)) @if(userCan('bookshelf-update', $shelf))
<a href="{{ $shelf->getUrl('/edit') }}" class="icon-list-item"> <a href="{{ $shelf->getUrl('/edit') }}" class="icon-list-item">
<span class="icon">@icon('edit')</span> <span>@icon('edit')</span>
<span>{{ trans('common.edit') }}</span> <span>{{ trans('common.edit') }}</span>
</a> </a>
@endif @endif
@if(userCan('restrictions-manage', $shelf)) @if(userCan('restrictions-manage', $shelf))
<a href="{{ $shelf->getUrl('/permissions') }}" class="icon-list-item"> <a href="{{ $shelf->getUrl('/permissions') }}" class="icon-list-item">
<span class="icon">@icon('lock')</span> <span>@icon('lock')</span>
<span>{{ trans('entities.permissions') }}</span> <span>{{ trans('entities.permissions') }}</span>
</a> </a>
@endif @endif
@if(userCan('bookshelf-delete', $shelf)) @if(userCan('bookshelf-delete', $shelf))
<a href="{{ $shelf->getUrl('/delete') }}" class="icon-list-item"> <a href="{{ $shelf->getUrl('/delete') }}" class="icon-list-item">
<span class="icon">@icon('delete')</span> <span>@icon('delete')</span>
<span>{{ trans('common.delete') }}</span> <span>{{ trans('common.delete') }}</span>
</a> </a>
@endif @endif

6
resources/views/users/profile.blade.php
View File

@ -35,15 +35,15 @@
<div class="text-muted">{{ trans('entities.profile_created_content') }}</div> <div class="text-muted">{{ trans('entities.profile_created_content') }}</div>
<div class="icon-list"> <div class="icon-list">
<a href="#recent-books" class="text-book icon-list-item"> <a href="#recent-books" class="text-book icon-list-item">
<span class="icon">@icon('book')</span> <span>@icon('book')</span>
<span>{{ trans_choice('entities.x_books', $assetCounts['books']) }}</span> <span>{{ trans_choice('entities.x_books', $assetCounts['books']) }}</span>
</a> </a>
<a href="#recent-chapters" class="text-chapter icon-list-item"> <a href="#recent-chapters" class="text-chapter icon-list-item">
<span class="icon">@icon('chapter')</span> <span>@icon('chapter')</span>
<span>{{ trans_choice('entities.x_chapters', $assetCounts['chapters']) }}</span> <span>{{ trans_choice('entities.x_chapters', $assetCounts['chapters']) }}</span>
</a> </a>
<a href="#recent-pages" class="text-page icon-list-item"> <a href="#recent-pages" class="text-page icon-list-item">
<span class="icon">@icon('page')</span> <span>@icon('page')</span>
<span>{{ trans_choice('entities.x_pages', $assetCounts['pages']) }}</span> <span>{{ trans_choice('entities.x_pages', $assetCounts['pages']) }}</span>
</a> </a>
</div> </div>