paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Restyle Open-Graph Links.

Browse Source 
This styles open-graph links to be cleaner and smaller.
This commit is contained in:
Brock Whittaker
2016-12-16 16:41:23 -08:00
committed by Tim Abbott
parent 5d2ceb2f16
commit b976e179e6
2 changed files with 75 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
static/styles/zulip.css
View File

@@ -2362,15 +2362,69 @@ button.topic_edit_cancel {
} }
/* embed */ /* embed */
.message_embed { .message_content .message_embed {
border-left: 4px solid #ccc;
padding-left: 5px;
display: block; display: block;
margin-bottom: 10px; margin: 5px 0px;
border: none;
border-left: 3px solid #eee;
padding: 5px;
} }
.message_embed_title {
font-weight: bold; .message_content .message_embed > * {
display: inherit;
padding: 5px;
border: none;
} }
.message_embed_image {
max-width: 80px; .message_embed .message_embed_title {
padding-top: 0px;
/* to remove the spacing that the font has from the top of the container. */
margin-top: -5px;
font-size: 1em;
font-weight: 600;
line-height: normal;
}
.message_embed .message_embed_title a:hover {
text-decoration: none;
border-bottom: 1px solid #005580;
}
.message_embed .message_embed_description {
margin-top: -5px;
max-width: 500px;
}
.message_embed .message_embed_image {
display: inline-block;
width: 60px;
height: 60px;
background-size: cover;
background-position: center;
}
.message_embed .data-container {
padding: 0px 5px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 100px);
}
.message_embed .data-container div {
display: block;
border: none;
}
@media (max-width: 600px) {
.message_embed .message_embed_image {
width: 100%;
height: 100px;
}
.message_embed .data-container {
display: block;
max-width: 100%;
margin-top: 10px;
}
} }

21
zerver/lib/bugdown/__init__.py
View File

@@ -132,9 +132,20 @@ def add_embed(root, link, extracted_data):
container = markdown.util.etree.SubElement(root, "div") container = markdown.util.etree.SubElement(root, "div")
container.set("class", "message_embed") container.set("class", "message_embed")
img_link = extracted_data.get('image')
if img_link:
img = markdown.util.etree.SubElement(container, "a")
img.set("style", "background-image: url(" + img_link + ")")
img.set("href", link)
img.set("target", "_blank")
img.set("class", "message_embed_image")
data_container = markdown.util.etree.SubElement(container, "div")
data_container.set("class", "data-container")
title = extracted_data.get('title') title = extracted_data.get('title')
if title: if title:
title_elm = markdown.util.etree.SubElement(container, "div") title_elm = markdown.util.etree.SubElement(data_container, "div")
title_elm.set("class", "message_embed_title") title_elm.set("class", "message_embed_title")
a = markdown.util.etree.SubElement(title_elm, "a") a = markdown.util.etree.SubElement(title_elm, "a")
a.set("href", link) a.set("href", link)
@@ -144,16 +155,10 @@ def add_embed(root, link, extracted_data):
description = extracted_data.get('description') description = extracted_data.get('description')
if description: if description:
description_elm = markdown.util.etree.SubElement(container, "div") description_elm = markdown.util.etree.SubElement(data_container, "div")
description_elm.set("class", "message_embed_description") description_elm.set("class", "message_embed_description")
description_elm.text = description description_elm.text = description
img_link = extracted_data.get('image')
if img_link:
img = markdown.util.etree.SubElement(container, "img")
img.set("src", img_link)
img.set("class", "message_embed_image")
@cache_with_key(lambda tweet_id: tweet_id, cache_name="database", with_statsd_key="tweet_data") @cache_with_key(lambda tweet_id: tweet_id, cache_name="database", with_statsd_key="tweet_data")
def fetch_tweet_data(tweet_id): def fetch_tweet_data(tweet_id):