Adding missing image thumbnail. Fixes #553

This commit is contained in:
Dessalines 2020-02-24 17:38:05 -05:00
parent 2dec9b5b10
commit 788ecf9055
3 changed files with 55 additions and 17 deletions

View file

@ -188,7 +188,7 @@ hr {
border: unset; border: unset;
} }
.link-overlay { .img-expand-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -197,3 +197,24 @@ hr {
border-bottom-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important;
} }
.link-overlay:hover {
transition: .1s;
opacity: 1;
}
.link-overlay {
transition: opacity .1s ease-in-out;
position: absolute;
opacity: 0;
left: 0;
height: 100%;
width: 100%;
padding: 10px;
background: rgba(0,0,0,.6);
}
.placeholder {
height: 50px;
width: 50px;
}

View file

@ -163,28 +163,35 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</div> </div>
{this.hasImage() && !this.state.imageExpanded && ( {this.hasImage() && !this.state.imageExpanded && (
<div class="mx-2 mt-1 float-left position-relative"> <div class="mx-2 mt-1 float-left position-relative">
<span
title={i18n.t('expand_here')}
class="pointer"
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<img
className={`img-fluid thumbnail rounded ${(post.nsfw ||
post.community_nsfw) &&
'img-blur'}`}
src={imageThumbnailer(this.getImage())}
/>
</span>
<a <a
className="text-body" className="text-body"
href={this.state.url} href={this.state.url}
target="_blank" target="_blank"
title={this.state.url} title={this.state.url}
> >
<svg class="icon link-overlay"> <object
className={`img-fluid thumbnail rounded ${(post.nsfw ||
post.community_nsfw) &&
'img-blur'}`}
data={imageThumbnailer(this.getImage())}
>
<svg class="icon rounded placeholder">
<use xlinkHref="#icon-external-link"></use>
</svg>
</object>
<svg class="icon rounded link-overlay hover-link">
<use xlinkHref="#icon-external-link"></use> <use xlinkHref="#icon-external-link"></use>
</svg> </svg>
</a> </a>
<span
title={i18n.t('expand_here')}
class="pointer"
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<svg class="icon img-expand-overlay">
<use xlinkHref="#icon-image"></use>
</svg>
</span>
</div> </div>
)} )}
{this.state.url && isVideo(this.state.url) && ( {this.state.url && isVideo(this.state.url) && (
@ -263,10 +270,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
class="pointer" class="pointer"
onClick={linkEvent(this, this.handleImageExpandClick)} onClick={linkEvent(this, this.handleImageExpandClick)}
> >
<img <object
class="img-fluid img-expanded" class="img-fluid img-expanded"
src={this.getImage()} data={this.getImage()}
/> >
<svg class="icon rounded placeholder">
<use xlinkHref="#icon-external-link"></use>
</svg>
</object>
</span> </span>
</div> </div>
</span> </span>

View file

@ -15,6 +15,12 @@ export class Symbols extends Component<any, any> {
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<defs> <defs>
<symbol id="icon-image" viewBox="0 0 32 32">
<title>image</title>
<path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path>
<path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
<path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path>
</symbol>
<symbol id="icon-external-link" viewBox="0 0 24 24"> <symbol id="icon-external-link" viewBox="0 0 24 24">
<title>external-link</title> <title>external-link</title>
<path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path> <path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>