mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Improved login, Fixed breadcrumbs & improved grid thumbnails
This commit is contained in:
parent
5f2d226f09
commit
837d2bc582
@ -58,9 +58,6 @@ $button-border-radius: 2px;
|
|||||||
&.muted {
|
&.muted {
|
||||||
@include generate-button-colors(#EEE, #AAA);
|
@include generate-button-colors(#EEE, #AAA);
|
||||||
}
|
}
|
||||||
&.muted-light {
|
|
||||||
@include generate-button-colors(#666, #e4e4e4);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button + .button {
|
.button + .button {
|
||||||
|
@ -197,7 +197,7 @@ input[type=date] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.setting-list-label {
|
.setting-list-label {
|
||||||
color: #444;
|
color: #222;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
.setting-list-label + p.small {
|
.setting-list-label + p.small {
|
||||||
|
@ -257,7 +257,7 @@ div[class^="col-"] img {
|
|||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
font-size: .85em;
|
font-size: .7rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.6em;
|
line-height: 1.6em;
|
||||||
}
|
}
|
||||||
@ -293,6 +293,9 @@ div[class^="col-"] img {
|
|||||||
.grid.half, .grid.left-focus, .grid.right-focus {
|
.grid.half, .grid.left-focus, .grid.right-focus {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
.grid.half.collapse-xs {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
.grid.large-gap {
|
.grid.large-gap {
|
||||||
grid-column-gap: $-m;
|
grid-column-gap: $-m;
|
||||||
grid-row-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 {
|
||||||
float: left;
|
float: left;
|
||||||
&.right {
|
&.right {
|
||||||
|
@ -462,6 +462,10 @@ ul.pagination {
|
|||||||
.featured-image-container {
|
.featured-image-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
min-height: 140px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
transition: opacity ease-in-out 240ms;
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@ -470,11 +474,21 @@ ul.pagination {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
transition: all .5s ease-in-out;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.grid-card:hover .featured-image-container img {
|
.featured-image-container-wrap {
|
||||||
transform: scale(1.15);
|
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;
|
opacity: .5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,6 +5,6 @@
|
|||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="password">{{ trans('auth.password') }}</label>
|
<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>
|
<span class="block small mt-s"><a href="{{ baseUrl('/password/email') }}">{{ trans('auth.forgot_password') }}</a></span>
|
||||||
</div>
|
</div>
|
@ -16,7 +16,7 @@
|
|||||||
@include('auth/forms/login/' . $authMethod)
|
@include('auth/forms/login/' . $authMethod)
|
||||||
</div>
|
</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">
|
<div class="text-left ml-xxs">
|
||||||
@include('components.custom-checkbox', [
|
@include('components.custom-checkbox', [
|
||||||
'name' => 'remember',
|
'name' => 'remember',
|
||||||
@ -36,7 +36,7 @@
|
|||||||
<hr class="my-l">
|
<hr class="my-l">
|
||||||
@foreach($socialDrivers as $driver => $name)
|
@foreach($socialDrivers as $driver => $name)
|
||||||
<div>
|
<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)
|
@icon('auth/' . $driver)
|
||||||
{{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
|
{{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
|
||||||
</a>
|
</a>
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
@include('form/password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
|
@include('form/password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
|
||||||
</div>
|
</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">
|
<div class="text-small">
|
||||||
<a href="{{ baseUrl('/login') }}">Already have an account?</a>
|
<a href="{{ baseUrl('/login') }}">Already have an account?</a>
|
||||||
</div>
|
</div>
|
||||||
@ -42,7 +42,7 @@
|
|||||||
<hr class="my-l">
|
<hr class="my-l">
|
||||||
@foreach($socialDrivers as $driver => $name)
|
@foreach($socialDrivers as $driver => $name)
|
||||||
<div>
|
<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)
|
@icon('auth/' . $driver)
|
||||||
{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
|
{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
|
||||||
</a>
|
</a>
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
<a href="{{$book->getUrl()}}" class="grid-card" data-entity-type="book" data-entity-id="{{$book->id}}">
|
<a href="{{$book->getUrl()}}" class="grid-card" data-entity-type="book" data-entity-id="{{$book->id}}">
|
||||||
<div class="featured-image-container bg-book">
|
<div class="bg-book featured-image-container-wrap">
|
||||||
<img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
|
<div class="featured-image-container" @if($book->cover) style="background-image: url('{{ $book->getBookCover() }}')"@endif>
|
||||||
|
</div>
|
||||||
|
@icon('book')
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-card-content">
|
<div class="grid-card-content">
|
||||||
<h2>{{$book->getShortName(35)}}</h2>
|
<h2>{{$book->getShortName(35)}}</h2>
|
||||||
@ -10,9 +12,8 @@
|
|||||||
<p class="text-muted">{{ $book->getExcerpt(130) }}</p>
|
<p class="text-muted">{{ $book->getExcerpt(130) }}</p>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-card-footer text-muted text-small">
|
<div class="grid-card-footer text-muted ">
|
||||||
@icon('star')<span title="{{$book->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $book->created_at->diffForHumans()]) }}</span>
|
<p>@icon('star')<span title="{{$book->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $book->created_at->diffForHumans()]) }}</span></p>
|
||||||
<br>
|
<p>@icon('edit')<span title="{{ $book->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $book->updated_at->diffForHumans()]) }}</span></p>
|
||||||
@icon('edit')<span title="{{ $book->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $book->updated_at->diffForHumans()]) }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
@ -2,7 +2,7 @@
|
|||||||
<?php $breadcrumbCount = 0; ?>
|
<?php $breadcrumbCount = 0; ?>
|
||||||
|
|
||||||
{{--Show top level item--}}
|
{{--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">
|
<a href="{{ baseUrl('/books') }}" class="icon-list-item">
|
||||||
<span>@icon('books')</span>
|
<span>@icon('books')</span>
|
||||||
<span>{{ trans('entities.books') }}</span>
|
<span>{{ trans('entities.books') }}</span>
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
<a href="{{$shelf->getUrl()}}" class="bookshelf-grid-item grid-card"
|
<a href="{{$shelf->getUrl()}}" class="bookshelf-grid-item grid-card"
|
||||||
data-entity-type="bookshelf" data-entity-id="{{$shelf->id}}">
|
data-entity-type="bookshelf" data-entity-id="{{$shelf->id}}">
|
||||||
<div class="featured-image-container bg-shelf">
|
<div class="bg-shelf featured-image-container-wrap">
|
||||||
<img src="{{$shelf->getBookCover()}}" alt="{{$shelf->name}}">
|
<div class="featured-image-container" @if($shelf->cover) style="background-image: url('{{ $shelf->getBookCover() }}')"@endif>
|
||||||
|
</div>
|
||||||
|
@icon('bookshelf')
|
||||||
</div>
|
</div>
|
||||||
<div class="grid-card-content">
|
<div class="grid-card-content">
|
||||||
<h2>{{$shelf->getShortName(35)}}</h2>
|
<h2>{{$shelf->getShortName(35)}}</h2>
|
||||||
|
Loading…
Reference in New Issue
Block a user