From cf66addc62358da74dc7eec5c16bc4ad1568c72b Mon Sep 17 00:00:00 2001 From: Dessalines Date: Mon, 24 Feb 2020 17:38:05 -0500 Subject: [PATCH] Adding missing image thumbnail. Fixes #553 --- ui/assets/css/main.css | 23 +++++++++++++++- ui/src/components/post-listing.tsx | 43 +++++++++++++++++++----------- ui/src/components/symbols.tsx | 6 +++++ 3 files changed, 55 insertions(+), 17 deletions(-) diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index 000201773..704cddae5 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -188,7 +188,7 @@ hr { border: unset; } -.link-overlay { +.img-expand-overlay { position: absolute; top: 0; right: 0; @@ -197,3 +197,24 @@ hr { border-bottom-left-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; +} diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index b3bde27fe..d52df9d1c 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -163,28 +163,35 @@ export class PostListing extends Component { {this.hasImage() && !this.state.imageExpanded && (
- - - - + + + + + + + + + + +
)} {this.state.url && isVideo(this.state.url) && ( @@ -263,10 +270,14 @@ export class PostListing extends Component { class="pointer" onClick={linkEvent(this, this.handleImageExpandClick)} > - + data={this.getImage()} + > + + + + diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx index 0870efd71..559a97072 100644 --- a/ui/src/components/symbols.tsx +++ b/ui/src/components/symbols.tsx @@ -15,6 +15,12 @@ export class Symbols extends Component { xmlnsXlink="http://www.w3.org/1999/xlink" > + + image + + + + external-link