Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Updated image manager to use grid-based css

Browse Source
This commit is contained in:
Dan Brown 2023-05-24 17:07:32 +01:00
parent 4c726201f9
commit e467324658
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
resources/sass/_components.scss
View File

@ -347,43 +347,61 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
display: none; display: none;
} }
.image-manager-list {
padding: 3px;
overflow-y: scroll;
flex: 1;
display: grid;
grid-template-columns: repeat( auto-fit, minmax(140px, 1fr) );
gap: 3px;
}
.image-manager-list .image { .image-manager-list .image {
display: block; display: block;
position: relative; position: relative;
border-radius: 0; border-radius: 0;
float: left;
margin: 0; margin: 0;
width: 100%;
text-align: start;
padding: 0;
cursor: pointer; cursor: pointer;
width: math.div(100%, 6); aspect-ratio: 1;
height: auto;
@include lightDark(border-color, #ddd, #000); @include lightDark(border-color, #ddd, #000);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transition: all linear 80ms;
transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
overflow: hidden; overflow: hidden;
&.selected { &.selected {
transform: scale3d(0.92, 0.92, 0.92); background-color: var(--color-primary-light);
outline: currentColor 2px solid; outline: currentColor 3px solid;
border-radius: 3px;
transform: scale3d(0.95, 0.95, 0.95);
} }
img { img {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
display: block; display: block;
object-fit: cover;
height: auto;
} }
.image-meta { .image-meta {
opacity: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
left: 0; left: 0;
color: #EEE; color: #EEE;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.7);
font-size: 10px; font-size: 10px;
padding: 3px 4px; padding: 3px 4px;
pointer-events: none;
transition: opacity ease-in-out 80ms;
span { span {
display: block; display: block;
} }
} }
@include smaller-than($xl) { &.selected .image-meta,
width: math.div(100%, 4); &:hover .image-meta,
&:focus .image-meta {
opacity: 1;
} }
@include smaller-than($m) { @include smaller-than($m) {
.image-meta { .image-meta {
@ -434,11 +452,6 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
} }
.image-manager-list {
overflow-y: scroll;
flex: 1;
}
.image-manager-content { .image-manager-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

5
resources/views/pages/parts/image-manager-form.blade.php
View File

@ -14,6 +14,11 @@
title="{{ $image->name }}"> title="{{ $image->name }}">
</a> </a>
</div> </div>
<div>
<p class="text-muted text-small">
<span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d H:i:s')]) }}</span>
</p>
</div>
<div class="form-group stretch-inputs"> <div class="form-group stretch-inputs">
<label for="name">{{ trans('components.image_image_name') }}</label> <label for="name">{{ trans('components.image_image_name') }}</label>
<input id="name" class="input-base" type="text" name="name" value="{{ $image->name }}"> <input id="name" class="input-base" type="text" name="name" value="{{ $image->name }}">

6
resources/views/pages/parts/image-manager-list.blade.php
View File

@ -1,6 +1,6 @@
@foreach($images as $index => $image) @foreach($images as $index => $image)
<div> <div>
<div component="event-emit-select" <button component="event-emit-select"
option:event-emit-select:name="image" option:event-emit-select:name="image"
option:event-emit-select:data="{{ json_encode($image) }}" option:event-emit-select:data="{{ json_encode($image) }}"
class="image anim fadeIn text-link" class="image anim fadeIn text-link"
@ -13,9 +13,9 @@
title="{{ $image->name }}"> title="{{ $image->name }}">
<div class="image-meta"> <div class="image-meta">
<span class="name">{{ $image->name }}</span> <span class="name">{{ $image->name }}</span>
<span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d H:i:s')]) }}</span> <span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d')]) }}</span>
</div>
</div> </div>
</button>
</div> </div>
@endforeach @endforeach
@if($hasMore) @if($hasMore)