Alter link behaviour of OG previews

This commit is contained in:
goobertron 2014-01-16 16:59:42 +00:00
parent 3f5838a75f
commit 1dfde65556
3 changed files with 44 additions and 35 deletions

View file

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

View file

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

View file

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