Re-arranged some list items to flexbox instead of grid

Since flexbox is better supported on a wider range of elements

resources/assets/sass/_lists.scss

@@ -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;
   }

resources/assets/sass/_pages.scss

@@ -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;
   width: 1.88em;
   height: 1.88em;

resources/views/books/index.blade.php

@@ -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

resources/views/books/show.blade.php

@@ -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">
@@ -71,35 +71,35 @@
 
             @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

resources/views/chapters/show.blade.php

@@ -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">
@@ -73,38 +73,38 @@
 
             @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--}}

resources/views/components/toggle-switch.blade.php

@@ -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>

resources/views/pages/delete.blade.php

@@ -1,6 +1,5 @@
 @extends('simple-layout')
 
-
 @section('body')
 
     <div class="container small">
@@ -17,23 +16,26 @@
         <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>
 

resources/views/pages/show.blade.php

@@ -119,7 +119,7 @@
             {{--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">
@@ -132,33 +132,33 @@
             {{--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

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

@@ -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 ?? '' }}

resources/views/partials/view-toggle.blade.php

@@ -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>

resources/views/settings/roles/delete.blade.php

@@ -1,7 +1,5 @@
 @extends('simple-layout')
 
-{{--TODO - Looks strange--}}
-
 @section('body')
     <div class="container small">
 
@@ -25,14 +23,21 @@
                     </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>
 

resources/views/settings/roles/edit.blade.php

@@ -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>
 

resources/views/settings/roles/form.blade.php

@@ -199,7 +199,7 @@
     <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>

resources/views/shelves/index.blade.php

@@ -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

resources/views/shelves/show.blade.php

@@ -66,21 +66,21 @@
 
             @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

resources/views/users/profile.blade.php

@@ -35,15 +35,15 @@
                             <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>