Merge pull request #4708 from goobertron/opengraph_link_fix

Opengraph link fix (issue #4492)

Changelog.md

@@ -29,6 +29,7 @@
 * Fix hovercards in the notificaitons dropdown [#4693](https://github.com/diaspora/diaspora/issues/4693)
 * Do not parse hashtags inside Markdown links [#3692](https://github.com/diaspora/diaspora/issues/3692)
 * Restore comment textarea content after revealing more comments [#4514](https://github.com/diaspora/diaspora/issues/4514)
+* OpenGraph: don't make description into links [#4492](https://github.com/diaspora/diaspora/issues/4492)
 
 ## Features
 * You can report a single post by clicking the correct icon in the controler section [#4517](https://github.com/diaspora/diaspora/pull/4517)

app/assets/stylesheets/mobile/mobile.css.scss

@@ -1127,23 +1127,25 @@ select#aspect_ids_ {
 
 .opengraph {
   width: 100%;
+  display: block;
+  text-decoration: none;
+  margin: 5px 0px 5px 0px;
+  border-top: solid 1px $border-grey;
+  border-bottom: solid 1px $border-grey;
+  padding: 5px 0px 2px 0px;
+  overflow: hidden;
   a {
-    display: block;
-    text-decoration: none;
     color: #000;
-    margin: 5px 0px 5px 0px;
-    border-top: solid 1px $border-grey;
-    border-bottom: solid 1px $border-grey;
-    padding: 5px 0px 2px 0px;
-    overflow: hidden;
-    img {
-      margin: 0px 3px 3px 0px;
-      float: left;
-      max-width: 80px;
-    }
-    .og-title {
-      margin-bottom: 3px;
-    }
+  }
+  img {
+    margin: 3px 3px 3px 0px;
+    float: left;
+    max-width: 80px;
+    padding-right: 5px;
+  }
+  .og-title {
+    margin-bottom: 3px;
+    font-weight: bold;
   }
 }
 

app/assets/stylesheets/opengraph.css.scss

-.opengraph {
+.opengraph-container {
   width: 100%;
-
+  display: block;
+  text-decoration: none;
+  font-style: normal;
+  margin: 10px 0px 10px 0px;
+  border-top: solid 1px $border-grey;
+  border-bottom: solid 1px $border-grey;
+  padding: 10px 0px 5px 0px;
+  overflow: hidden;
   a {
-    display: block;
-    text-decoration: none;;
     color: #000;
-    margin: 10px 0px 10px 0px;
-    border-top: solid 1px $border-grey;
-    border-bottom: solid 1px $border-grey;
-    padding: 10px 0px 5px 0px;
-    overflow: hidden;
-
     img {
-      margin: 0px 5px 5px 0px;
+      margin: 5px 5px 5px 0px;
       float: left;
-      max-width: 155px;
+      max-width: 150px;
+      padding-right: 5px;
     }
-
     .og-title {
       margin-bottom: 5px;
+      font-weight: bold;
     }
   }
+  a:hover {
+    color: $blue;
+  }
+  .og-description {
+    color: $text-grey;
+  }
 }

app/assets/templates/opengraph_tpl.jst.hbs

 {{#unless o_embed_cache}}
   {{#if open_graph_cache}}
-    <a href="{{open_graph_cache.url}}" target="_blank">
-      <div>
+    <div class="opengraph-container">
+      <a href="{{open_graph_cache.url}}" target="_blank">
         <img src="{{open_graph_cache.image}}" />
-        <strong>{{open_graph_cache.title}}</strong>
-        <p>{{open_graph_cache.description}}</p>
-      </div>
-    </a>
+        <p class="og-title">{{open_graph_cache.title}}</p>
+      </a>
+      <p class="og-description">{{open_graph_cache.description}}</p>
+    </div>
   {{/if}}
 {{/unless}}
+