]> BookStack Code Mirror - bookstack/commitdiff
Re-arranged some list items to flexbox instead of grid
authorDan Brown <redacted>
Sat, 16 Feb 2019 15:05:18 +0000 (15:05 +0000)
committerDan Brown <redacted>
Sat, 16 Feb 2019 15:05:18 +0000 (15:05 +0000)
Since flexbox is better supported on a wider range of elements

16 files changed:
resources/assets/sass/_lists.scss
resources/assets/sass/_pages.scss
resources/views/books/index.blade.php
resources/views/books/show.blade.php
resources/views/chapters/show.blade.php
resources/views/components/toggle-switch.blade.php
resources/views/pages/delete.blade.php
resources/views/pages/show.blade.php
resources/views/partials/entity-list-item-basic.blade.php
resources/views/partials/view-toggle.blade.php
resources/views/settings/roles/delete.blade.php
resources/views/settings/roles/edit.blade.php
resources/views/settings/roles/form.blade.php
resources/views/shelves/index.blade.php
resources/views/shelves/show.blade.php
resources/views/users/profile.blade.php

index d121559628b913775854a9f8f744ec570f3b6b23..91522d8bfd4aafe7054d0d3a6091b7ca468a7158 100644 (file)
@@ -250,19 +250,25 @@ ul.pagination {
 
 .entity-list-item, .icon-list-item {
   padding: $-s $-m;
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-column-gap: $-m;
-  align-items: top;
-  > .content {
-    padding-top: 2px;
-  }
-  .icon {
-    font-size: 1rem;
-  }
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  width: 100%;
+  position: relative;
   h4 a {
     color: #666;
   }
+  > span:first-child {
+    margin-right: $-m;
+    flex-basis: 1.88em;
+    flex: none;
+  }
+  > span:last-child {
+    flex: 1;
+    text-align: left;
+  }
   &:hover {
     text-decoration: none;
     background-color: #DDD;
@@ -278,10 +284,13 @@ ul.pagination {
 }
 
 .entity-list-item-image {
+  align-self: stretch;
   width: 140px;
   background-size: cover;
   background-position: 50% 50%;
   border-radius: 3px;
+  position: relative;
+  margin-right: $-l;
   @include smaller-than($m) {
     width: 80px;
   }
index ab16e7fabd0ac797489410b36a590bfa50fb73f1..a260116c64ef21f1d5198d91fc3f28b00cdb58b9 100755 (executable)
   }
 }
 
-.entity-list-item > .icon, .icon-list-item > .icon {
+.entity-list-item > span:first-child, .icon-list-item > span:first-child {
   font-size: 0.8rem;
   width: 1.88em;
   height: 1.88em;
index e21dfc7a87a9b25c52d3e7660535ac777abdfe2f..4eeba10cf07fd4e2252ed75b9b305c9d124b071f 100644 (file)
@@ -40,7 +40,7 @@
         <div class="icon-list text-primary">
             @if($currentUser->can('book-create-all'))
                 <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>
                 </a>
             @endif
index ba07ade0a36f12ba987e257dce60cc0b90edac34..d29954228296d94bfbbd70eac381b0d557b2a070 100644 (file)
@@ -59,7 +59,7 @@
         <div class="icon-list text-primary">
             <div dropdown class="dropdown-container">
                 <div dropdown-toggle class="icon-list-item">
-                    <span class="icon">@icon('export')</span>
+                    <span>@icon('export')</span>
                     <span>{{ trans('entities.export') }}</span>
                 </div>
                 <ul class="wide">
 
             @if(userCan('page-create', $book))
                 <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>
                 </a>
             @endif
             @if(userCan('chapter-create', $book))
                 <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>
                 </a>
             @endif
             @if(userCan('book-update', $book))
                 <a href="{{ $book->getUrl('/edit') }}" class="icon-list-item">
-                    <span class="icon">@icon('edit')</span>
+                    <span>@icon('edit')</span>
                     <span>{{ trans('common.edit') }}</span>
                 </a>
                 <a href="{{ $book->getUrl('/sort') }}" class="icon-list-item">
-                    <span class="icon">@icon('sort')</span>
+                    <span>@icon('sort')</span>
                     <span>{{ trans('common.sort') }}</span>
                 </a>
             @endif
             @if(userCan('restrictions-manage', $book))
                 <a href="{{ $book->getUrl('/permissions') }}" class="icon-list-item">
-                    <span class="icon">@icon('lock')</span>
+                    <span>@icon('lock')</span>
                     <span>{{ trans('entities.permissions') }}</span>
                 </a>
             @endif
             @if(userCan('book-delete', $book))
                 <a href="{{ $book->getUrl('/delete') }}" class="icon-list-item">
-                    <span class="icon">@icon('delete')</span>
+                    <span>@icon('delete')</span>
                     <span>{{ trans('common.delete') }}</span>
                 </a>
             @endif
index 43248df5f61f224021ab7c8f5b12605536e2b507..5906e7e02d0e30f263d8544a32c8c798e8057928 100644 (file)
@@ -61,7 +61,7 @@
 
             <div dropdown class="dropdown-container">
                 <div dropdown-toggle class="icon-list-item">
-                    <span class="icon">@icon('export')</span>
+                    <span>@icon('export')</span>
                     <span>{{ trans('entities.export') }}</span>
                 </div>
                 <ul class="wide">
 
             @if(userCan('page-create', $chapter))
                 <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>
                 </a>
             @endif
             @if(userCan('chapter-update', $chapter))
                 <a href="{{ $chapter->getUrl('/edit') }}" class="icon-list-item">
-                    <span class="icon">@icon('edit')</span>
+                    <span>@icon('edit')</span>
                     <span>{{ trans('common.edit') }}</span>
                 </a>
             @endif
             @if(userCan('chapter-update', $chapter) && userCan('chapter-delete', $chapter))
                 <a href="{{ $chapter->getUrl('/move') }}" class="icon-list-item">
-                    <span class="icon">@icon('folder')</span>
+                    <span>@icon('folder')</span>
                     <span>{{ trans('common.move') }}</span>
                 </a>
             @endif
             @if(userCan('restrictions-manage', $chapter))
                 <a href="{{ $chapter->getUrl('/permissions') }}" class="icon-list-item">
-                    <span class="icon">@icon('lock')</span>
+                    <span>@icon('lock')</span>
                     <span>{{ trans('entities.permissions') }}</span>
                 </a>
             @endif
             @if(userCan('chapter-delete', $chapter))
                 <a href="{{ $chapter->getUrl('/delete') }}" class="icon-list-item">
-                    <span class="icon">@icon('delete')</span>
+                    <span>@icon('delete')</span>
                     <span>{{ trans('common.delete') }}</span>
                 </a>
             @endif
 
             {{--@if(userCan('page-create', $book))--}}
                 {{--<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>--}}
                 {{--</a>--}}
             {{--@endif--}}
index 366e56ee8bce50064e797b9b9a40ef75c6e6e1d0..84a8a3083716972b1a1a53a6302aec62d3ed6256 100644 (file)
@@ -2,5 +2,5 @@
     <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
     <input type="checkbox" @if($value) checked="checked" @endif>
     <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>
\ No newline at end of file
index f7b48c583873decaad740141f00a8fe217757578..21f97cc5b8fe2bc0b1b9f5c16e64dd0837617b07 100644 (file)
@@ -1,6 +1,5 @@
 @extends('simple-layout')
 
-
 @section('body')
 
     <div class="container small">
         <div class="card content-wrap auto-height">
             <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--}}
 
-            <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 class="grid half v-center">
+                <div>
+                    <p class="text-neg">
+                        <strong>
+                            {{ $page->draft ? trans('entities.pages_delete_draft_confirm'): trans('entities.pages_delete_confirm') }}
+                        </strong>
+                    </p>
                 </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>
 
index 773d74a1ea02f47873717c2c63b7de51078db71b..510d69019232672f05bdb79b792155a40d737a1a 100644 (file)
             {{--Export--}}
             <div dropdown class="dropdown-container block">
                 <div dropdown-toggle class="icon-list-item">
-                    <span class="icon">@icon('export')</span>
+                    <span>@icon('export')</span>
                     <span>{{ trans('entities.export') }}</span>
                 </div>
                 <ul class="wide">
             {{--User Actions--}}
             @if(userCan('page-update', $page))
                 <a href="{{ $page->getUrl('/edit') }}" class="icon-list-item">
-                    <span class="icon">@icon('edit')</span>
+                    <span>@icon('edit')</span>
                     <span>{{ trans('common.edit') }}</span>
                 </a>
                 <a href="{{ $page->getUrl('/copy') }}" class="icon-list-item">
-                    <span class="icon">@icon('copy')</span>
+                    <span>@icon('copy')</span>
                     <span>{{ trans('common.copy') }}</span>
                 </a>
                 @if(userCan('page-delete', $page))
                        <a href="{{ $page->getUrl('/move') }}" class="icon-list-item">
-                           <span class="icon">@icon('folder')</span>
+                           <span>@icon('folder')</span>
                            <span>{{ trans('common.move') }}</span>
                        </a>
                 @endif
                 <a href="{{ $page->getUrl('/revisions') }}" class="icon-list-item">
-                    <span class="icon">@icon('history')</span>
+                    <span>@icon('history')</span>
                     <span>{{ trans('entities.revisions') }}</span>
                 </a>
             @endif
             @if(userCan('restrictions-manage', $page))
                 <a href="{{ $page->getUrl('/permissions') }}" class="icon-list-item">
-                    <span class="icon">@icon('lock')</span>
+                    <span>@icon('lock')</span>
                     <span>{{ trans('entities.permissions') }}</span>
                 </a>
             @endif
             @if(userCan('page-delete', $page))
                 <a href="{{ $page->getUrl('/delete') }}" class="icon-list-item">
-                    <span class="icon">@icon('delete')</span>
+                    <span>@icon('delete')</span>
                     <span>{{ trans('common.delete') }}</span>
                 </a>
             @endif
index 0f80d7d46d185d95fd5f1f6d6df97371b51fad99..c4942c71f2dd38af6bb2de09290a710bd08b7912 100644 (file)
@@ -1,6 +1,6 @@
 <?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}}">
-    <div class="icon text-{{$type}}">@icon($type)</div>
+    <span class="icon text-{{$type}}">@icon($type)</span>
     <div class="content">
             <h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
             {{ $slot ?? '' }}
index 4076a91eab50096691cdedd608e7ca570e73dea8..9eb00e1d95261d0b977ca44a8f900bd3d4fa8618 100644 (file)
@@ -4,15 +4,15 @@
         {!! method_field('PATCH') !!}
         <input type="hidden" value="{{ $view === 'list'? 'grid' : 'list' }}" name="view_type">
         @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>{{ trans('common.grid_view') }}</span>
-            </a>
+            </button>
         @else
-            <a onclick="this.closest('form').submit()" type="submit" class="icon-list-item">
-                <span class="icon">@icon('list')</span>
+            <button type="submit" class="icon-list-item text-primary">
+                <span>@icon('list')</span>
                 <span>{{ trans('common.list_view') }}</span>
-            </a>
+            </button>
         @endif
     </form>
 </div>
\ No newline at end of file
index e6cb5bf6c276c750bac871519b5d9f0730de33cc..29087c471beb0674f42774035fea4cbce0a8e523 100644 (file)
@@ -1,7 +1,5 @@
 @extends('simple-layout')
 
-{{--TODO - Looks strange--}}
-
 @section('body')
     <div class="container small">
 
                     </div>
                 @endif
 
-                <p class="text-neg">
-                    <strong>{{ trans('settings.role_delete_sure') }}</strong>
-                </p>
-
-                <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 class="grid half v-center">
+                    <div>
+                        <p class="text-neg">
+                            <strong>{{ trans('settings.role_delete_sure') }}</strong>
+                        </p>
+                    </div>
+                    <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>
+
+
             </form>
         </div>
 
index f45458d9b1979c1591b71e518aba0e3eed6d7735..a7b81322977c59eb48780d4fd8a8b13a2e23e3ea 100644 (file)
@@ -9,7 +9,7 @@
 
         <form action="{{ baseUrl("/settings/roles/{$role->id}") }}" method="POST">
             <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>
     </div>
 
index 5ea6d59a2125babbcd8f2b19a2ed2b57b2bb3400..f16706dd11bb637865b9afd48287ce60701b85a5 100644 (file)
     <div class="form-group text-right">
         <a href="{{ baseUrl("/settings/roles") }}" class="button outline">{{ trans('common.cancel') }}</a>
         @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
         <button type="submit" class="button primary">{{ trans('settings.role_save') }}</button>
     </div>
index 95b157df929eda1f5650f34c270717eeaf82a5d2..eeb579de6c913fe5e5e631d47c1baf4177987bee 100644 (file)
@@ -12,7 +12,7 @@
             @include('partials.view-toggle', ['view' => $view, 'type' => 'shelf'])
             @if($currentUser->can('bookshelf-create-all'))
                 <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>
                 </a>
             @endif
index 91c092a0974ed5f8537e32c3add5ca4b5630f899..afe56d577bb996c65e853d65b88cdf21780893b7 100644 (file)
 
             @if(userCan('bookshelf-update', $shelf))
                 <a href="{{ $shelf->getUrl('/edit') }}" class="icon-list-item">
-                    <span class="icon">@icon('edit')</span>
+                    <span>@icon('edit')</span>
                     <span>{{ trans('common.edit') }}</span>
                 </a>
             @endif
 
             @if(userCan('restrictions-manage', $shelf))
                 <a href="{{ $shelf->getUrl('/permissions') }}" class="icon-list-item">
-                    <span class="icon">@icon('lock')</span>
+                    <span>@icon('lock')</span>
                     <span>{{ trans('entities.permissions') }}</span>
                 </a>
             @endif
 
             @if(userCan('bookshelf-delete', $shelf))
                 <a href="{{ $shelf->getUrl('/delete') }}" class="icon-list-item">
-                    <span class="icon">@icon('delete')</span>
+                    <span>@icon('delete')</span>
                     <span>{{ trans('common.delete') }}</span>
                 </a>
             @endif
index 23535dcce48f7a3c4f67c4ffb4ca1fc7e80bc8d7..f41754498628d7909cab6f5d19d02efd7085e62b 100644 (file)
                             <div class="text-muted">{{ trans('entities.profile_created_content') }}</div>
                             <div class="icon-list">
                                 <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>
                                 </a>
                                 <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>
                                 </a>
                                 <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>
                                 </a>
                             </div>