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%;
-  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;
+  a {
+    color: #000;
+  }
   img {
-      margin: 0px 3px 3px 0px;
+    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

@@ -1,24 +1,30 @@
-.opengraph {
+.opengraph-container {
   width: 100%;
-
-  a {
   display: block;
-    text-decoration: none;;
-    color: #000;
+  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 {
+    color: #000;
     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

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