mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Updated image manager to use grid-based css
This commit is contained in:
parent
4c726201f9
commit
e467324658
@ -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;
|
||||||
|
@ -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 }}">
|
||||||
|
@ -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)
|
||||||
|
Loading…
Reference in New Issue
Block a user