diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index 0002017..704cdda 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 b3bde27..d52df9d 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 0870efd..559a970 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