Improved login, Fixed breadcrumbs & improved grid thumbnails

diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss
index 5e973a9477103f78bb055ac6f667b689d40d5de2..093da80ca7d742548f181fd40bfabb1dabf1efb2 100644 (file)
--- a/resources/assets/sass/_buttons.scss
+++ b/resources/assets/sass/_buttons.scss
@@ -58,9 +58,6 @@ $button-border-radius: 2px;
   &.muted {
     @include generate-button-colors(#EEE, #AAA);
   }
-  &.muted-light {
-    @include generate-button-colors(#666, #e4e4e4);
-  }
 }
 
 .button + .button {

diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 0b69c0d5b4a4f92dafc873e3b472a13e5aaaccaa..77ac359633e47973521d0ddaf34d963db5705766 100644 (file)
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -197,7 +197,7 @@ input[type=date] {
   }
 }
 .setting-list-label {
-  color: #444;
+  color: #222;
   font-size: 1rem;
 }
 .setting-list-label + p.small {

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 31ad84e1e4c7b70ea55bbb69e4b050c5bb528ae6..7415be73f3d870ff65251ef3f2bba8b1edfe76b9 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -257,7 +257,7 @@ div[class^="col-"] img {
     margin: 0 0 10px;
   }
   p {
-    font-size: .85em;
+    font-size: .7rem;
     margin: 0;
     line-height: 1.6em;
   }
@@ -293,6 +293,9 @@ div[class^="col-"] img {
   .grid.half, .grid.left-focus, .grid.right-focus {
     grid-template-columns: 1fr;
   }
+  .grid.half.collapse-xs {
+    grid-template-columns: 1fr 1fr;
+  }
   .grid.large-gap {
     grid-column-gap: $-m;
     grid-row-gap: $-m;
@@ -311,6 +314,12 @@ div[class^="col-"] img {
   }
 }
 
+@include smaller-than($xs) {
+  .grid.half.collapse-xs {
+    grid-template-columns: 1fr;
+  }
+}
+
 .float {
   float: left;
   &.right {

diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index c6226f0096029dcf3d97c94dc0c677c00c2af8af..db057532daff019ebae82dd00654908b2bc59b2f 100644 (file)
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -462,6 +462,10 @@ ul.pagination {
 .featured-image-container {
   position: relative;
   overflow: hidden;
+  min-height: 140px;
+  background-size: cover;
+  background-position: 50% 50%;
+  transition: opacity ease-in-out 240ms;
   a {
     display: block;
   }
@@ -470,11 +474,21 @@ ul.pagination {
     width: 100%;
     max-width: 100%;
     height: auto;
-    transition: all .5s ease-in-out;
   }
 }
-.grid-card:hover .featured-image-container img {
-  transform: scale(1.15);
+.featured-image-container-wrap {
+  position: relative;
+  .svg-icon {
+    color: #FFF;
+    fill: #FFF;
+    font-size: 2rem;
+    margin-right: 0;
+    position: absolute;
+    bottom: 10px;
+    left: 6px;
+  }
+}
+.grid-card:hover .featured-image-container {
   opacity: .5;
 }
 

diff --git a/resources/views/auth/forms/login/standard.blade.php b/resources/views/auth/forms/login/standard.blade.php
index 557ee833961d83b6e7cfcb93bd6a1ac68ad14704..a12fbd7531ce39d4b16f202651ddb7139e4f2a3c 100644 (file)
--- a/resources/views/auth/forms/login/standard.blade.php
+++ b/resources/views/auth/forms/login/standard.blade.php
@@ -5,6 +5,6 @@
 
 <div class="form-group">
     <label for="password">{{ trans('auth.password') }}</label>
-    @include('form.password', ['name' => 'password', 'tabindex' => 2])
+    @include('form.password', ['name' => 'password', 'tabindex' => 1])
     <span class="block small mt-s"><a href="{{ baseUrl('/password/email') }}">{{ trans('auth.forgot_password') }}</a></span>
 </div>
\ No newline at end of file

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 7ee710da52a084c6f496aa93d8876824204ddbe7..f5d9e998f540df3826d26c56322338f39f76f80f 100644 (file)
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -16,7 +16,7 @@
                     @include('auth/forms/login/' . $authMethod)
                 </div>
 
-                <div class="grid half large-gap v-center">
+                <div class="grid half collapse-xs large-gap v-center">
                     <div class="text-left ml-xxs">
                         @include('components.custom-checkbox', [
                             'name' => 'remember',
@@ -36,7 +36,7 @@
                 <hr class="my-l">
                 @foreach($socialDrivers as $driver => $name)
                     <div>
-                        <a id="social-login-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}">
+                        <a id="social-login-{{$driver}}" class="button outline block svg text-left" href="{{ baseUrl("/login/service/" . $driver) }}">
                             @icon('auth/' . $driver)
                             {{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
                         </a>

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index c997bcc198bb1e63ccb2e5c24322f0861445eef3..1388472c2a3c40c6334e17984c76eadbf8228c8e 100644 (file)
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -26,7 +26,7 @@
                     @include('form/password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
                 </div>
 
-                <div class="grid half large-gap v-center mt-m">
+                <div class="grid half collapse-xs large-gap v-center mt-m">
                     <div class="text-small">
                         <a href="{{ baseUrl('/login') }}">Already have an account?</a>
                     </div>
@@ -42,7 +42,7 @@
                 <hr class="my-l">
                 @foreach($socialDrivers as $driver => $name)
                     <div>
-                        <a id="social-register-{{$driver}}" class="button block muted-light svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}">
+                        <a id="social-register-{{$driver}}" class="button block outline svg text-left" href="{{ baseUrl("/register/service/" . $driver) }}">
                             @icon('auth/' . $driver)
                             {{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
                         </a>

diff --git a/resources/views/books/grid-item.blade.php b/resources/views/books/grid-item.blade.php
index fd576e7ed4a4ce79fc3d0f30540a1b1cd6a00c26..e1d37753a12afef67aeb527fff0d23c809cdb176 100644 (file)
--- a/resources/views/books/grid-item.blade.php
+++ b/resources/views/books/grid-item.blade.php
@@ -1,6 +1,8 @@
 <a href="{{$book->getUrl()}}" class="grid-card"  data-entity-type="book" data-entity-id="{{$book->id}}">
-    <div class="featured-image-container bg-book">
-        <img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
+    <div class="bg-book featured-image-container-wrap">
+        <div class="featured-image-container" @if($book->cover) style="background-image: url('{{ $book->getBookCover() }}')"@endif>
+        </div>
+        @icon('book')
     </div>
     <div class="grid-card-content">
         <h2>{{$book->getShortName(35)}}</h2>
@@ -10,9 +12,8 @@
             <p class="text-muted">{{ $book->getExcerpt(130) }}</p>
         @endif
     </div>
-    <div class="grid-card-footer text-muted text-small">
-        @icon('star')<span title="{{$book->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $book->created_at->diffForHumans()]) }}</span>
-        <br>
-        @icon('edit')<span title="{{ $book->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $book->updated_at->diffForHumans()]) }}</span>
+    <div class="grid-card-footer text-muted ">
+        <p>@icon('star')<span title="{{$book->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $book->created_at->diffForHumans()]) }}</span></p>
+        <p>@icon('edit')<span title="{{ $book->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $book->updated_at->diffForHumans()]) }}</span></p>
     </div>
 </a>
\ No newline at end of file

diff --git a/resources/views/partials/breadcrumbs.blade.php b/resources/views/partials/breadcrumbs.blade.php
index 890a6783eaa9af8103f252116d7f320e541ca640..bf77a402a27e81bc5a32f3ac0fdd0b17002b1b55 100644 (file)
--- a/resources/views/partials/breadcrumbs.blade.php
+++ b/resources/views/partials/breadcrumbs.blade.php
@@ -2,7 +2,7 @@
     <?php $breadcrumbCount = 0; ?>
 
     {{--Show top level item--}}
-    @if (count($crumbs) > 0 && $crumbs[0] instanceof  \BookStack\Entities\Book)
+    @if (count($crumbs) > 0 && array_first($crumbs) instanceof  \BookStack\Entities\Book)
         <a href="{{  baseUrl('/books')  }}" class="icon-list-item">
             <span>@icon('books')</span>
             <span>{{ trans('entities.books') }}</span>

diff --git a/resources/views/shelves/grid-item.blade.php b/resources/views/shelves/grid-item.blade.php
index c2d1b6127824fd1d76cc532b00ac8f40eeb04205..25b35b9efab4ff624c19a27b77010790d38309f6 100644 (file)
--- a/resources/views/shelves/grid-item.blade.php
+++ b/resources/views/shelves/grid-item.blade.php
@@ -1,7 +1,9 @@
 <a href="{{$shelf->getUrl()}}" class="bookshelf-grid-item grid-card"
    data-entity-type="bookshelf" data-entity-id="{{$shelf->id}}">
-    <div class="featured-image-container bg-shelf">
-        <img src="{{$shelf->getBookCover()}}" alt="{{$shelf->name}}">
+    <div class="bg-shelf featured-image-container-wrap">
+        <div class="featured-image-container" @if($shelf->cover) style="background-image: url('{{ $shelf->getBookCover() }}')"@endif>
+        </div>
+        @icon('bookshelf')
     </div>
     <div class="grid-card-content">
         <h2>{{$shelf->getShortName(35)}}</h2>