routes.api: fix get_captcha endpoint (#1135)

[lemmy.git] / ui / src / components / iframely-card.tsx

diff --git a/ui/src/components/iframely-card.tsx b/ui/src/components/iframely-card.tsx
index ea237edb3537add70153beb937a73b9b1eed1591..6a604f7c5ffbe8cabc88083c8c14da410634b5ae 100644 (file)
--- a/ui/src/components/iframely-card.tsx
+++ b/ui/src/components/iframely-card.tsx
@@ -1,9 +1,10 @@
 import { Component, linkEvent } from 'inferno';
-import { FramelyData } from '../interfaces';
+import { Post } from 'lemmy-js-client';
 import { mdToHtml } from '../utils';
+import { i18n } from '../i18next';
 
 interface FramelyCardProps {
-  iframely: FramelyData;
+  post: Post;
 }
 
 interface FramelyCardState {
@@ -24,58 +25,62 @@ export class IFramelyCard extends Component<
   }
 
   render() {
-    let iframely = this.props.iframely;
+    let post = this.props.post;
     return (
       <>
-        {iframely.title && (
-          <div class="card my-2">
-            <div class="row no-gutters">
-              {iframely.thumbnail_url && (
-                <div class="col-sm-3">
-                  {iframely.html ? (
-                    <span
-                      class="pointer"
-                      onClick={linkEvent(this, this.handleIframeExpand)}
-                    >
-                      <img class="card-img" src={iframely.thumbnail_url} />
-                    </span>
-                  ) : (
-                    <img
-                      class="img-fluid card-img"
-                      src={iframely.thumbnail_url}
-                    />
-                  )}
-                </div>
-              )}
-              <div class="col-sm-9">
+        {post.embed_title && !this.state.expanded && (
+          <div class="card bg-transparent border-secondary mt-3 mb-2">
+            <div class="row">
+              <div class="col-12">
                 <div class="card-body">
                   <h5 class="card-title d-inline">
-                    <span>
-                      <a class="text-body" target="_blank" href={iframely.url}>
-                        {iframely.title}
-                      </a>
-                    </span>
+                    {post.embed_html ? (
+                      <span
+                        class="unselectable pointer"
+                        onClick={linkEvent(this, this.handleIframeExpand)}
+                        data-tippy-content={i18n.t('expand_here')}
+                      >
+                        {post.embed_title}
+                      </span>
+                    ) : (
+                      <span>
+                        <a
+                          class="text-body"
+                          target="_blank"
+                          href={post.url}
+                          rel="noopener"
+                        >
+                          {post.embed_title}
+                        </a>
+                      </span>
+                    )}
                   </h5>
                   <span class="d-inline-block ml-2 mb-2 small text-muted">
-                    <a class="text-muted" target="_blank" href={iframely.url}>
-                      {new URL(iframely.url).hostname}
+                    <a
+                      class="text-muted font-italic"
+                      target="_blank"
+                      href={post.url}
+                      rel="noopener"
+                    >
+                      {new URL(post.url).hostname}
                       <svg class="ml-1 icon">
                         <use xlinkHref="#icon-external-link"></use>
                       </svg>
                     </a>
-                    {iframely.html && (
+                    {post.embed_html && (
                       <span
-                        class="ml-2 pointer"
+                        class="ml-2 pointer text-monospace"
                         onClick={linkEvent(this, this.handleIframeExpand)}
+                        data-tippy-content={i18n.t('expand_here')}
                       >
                         {this.state.expanded ? '[-]' : '[+]'}
                       </span>
                     )}
                   </span>
-                  {iframely.description && (
+                  {post.embed_description && (
                     <div
                       className="card-text small text-muted md-div"
-                      dangerouslySetInnerHTML={mdToHtml(iframely.description)}
+                      dangerouslySetInnerHTML={mdToHtml(post.embed_description)}
                     />
                   )}
                 </div>
@@ -85,8 +90,8 @@ export class IFramelyCard extends Component<
         )}
         {this.state.expanded && (
           <div
-            class="my-2"
-            dangerouslySetInnerHTML={{ __html: iframely.html }}
+            class="mt-3 mb-2"
+            dangerouslySetInnerHTML={{ __html: post.embed_html }}
           />
         )}
       </>