Improve LinkPreviewWidget (#8881)
* Use shorthand for margin values Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_MatrixChat_useCompactLayout in mx_LinkPreviewWidget Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include in mx_LinkPreviewWidget Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use spacing variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use logical variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Prevent flex children blowout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Wrap caption Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set row-gap between image and caption Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set column-gap between the caption and close button Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename the class name Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Decrease inline spacing Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
parent
37d8cfbc50
commit
0909bfeb38
2 changed files with 63 additions and 52 deletions
|
@ -120,16 +120,18 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
|
|||
|
||||
return (
|
||||
<div className="mx_LinkPreviewWidget">
|
||||
{ img }
|
||||
<div className="mx_LinkPreviewWidget_caption">
|
||||
<div className="mx_LinkPreviewWidget_title">
|
||||
<a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a>
|
||||
{ p["og:site_name"] && <span className="mx_LinkPreviewWidget_siteName">
|
||||
{ (" - " + p["og:site_name"]) }
|
||||
</span> }
|
||||
</div>
|
||||
<div className="mx_LinkPreviewWidget_description" ref={this.description}>
|
||||
{ description }
|
||||
<div className="mx_LinkPreviewWidget_wrapImageCaption">
|
||||
{ img }
|
||||
<div className="mx_LinkPreviewWidget_caption">
|
||||
<div className="mx_LinkPreviewWidget_title">
|
||||
<a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a>
|
||||
{ p["og:site_name"] && <span className="mx_LinkPreviewWidget_siteName">
|
||||
{ (" - " + p["og:site_name"]) }
|
||||
</span> }
|
||||
</div>
|
||||
<div className="mx_LinkPreviewWidget_description" ref={this.description}>
|
||||
{ description }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{ this.props.children }
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue