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%;
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 { a {
display: block;
text-decoration: none;
color: #000; color: #000;
margin: 5px 0px 5px 0px; }
border-top: solid 1px $border-grey; img {
border-bottom: solid 1px $border-grey; margin: 3px 3px 3px 0px;
padding: 5px 0px 2px 0px; float: left;
overflow: hidden; max-width: 80px;
img { padding-right: 5px;
margin: 0px 3px 3px 0px; }
float: left; .og-title {
max-width: 80px; margin-bottom: 3px;
} font-weight: bold;
.og-title {
margin-bottom: 3px;
}
} }
} }

View file

@ -1,24 +1,30 @@
.opengraph { .opengraph-container {
width: 100%; 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 { a {
display: block;
text-decoration: none;;
color: #000; 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 { 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}}
<a href="{{open_graph_cache.url}}" target="_blank"> <div class="opengraph-container">
<div> <a href="{{open_graph_cache.url}}" target="_blank">
<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> </a>
</div> <p class="og-description">{{open_graph_cache.description}}</p>
</a> </div>
{{/if}} {{/if}}
{{/unless}} {{/unless}}