Skip to content

Commit b124dcf

Browse files
WiltoWilto
committed
Merging the old fashioned way.
1 parent 3418038 commit b124dcf

File tree

7 files changed

+38
-25
lines changed

7 files changed

+38
-25
lines changed

‎demo/index.html

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,31 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1">
1010
</head>
1111
<body>
12-
<div>
12+
13+
<div style="width: 800px; margin: 50px auto;">
14+
15+
<h2>Embedded ALA Comments</h2>
16+
17+
<p>Thanks to Mat Marquis, we'll soon be able to offer the ability to embed A List Apart comments anywhere.</p>
18+
19+
<p>The embed code consists of semantic code representing the comment (as a fallback) and a script tag that calls a live comment from our server. At the moment the semantic code is identical to the code that makes up a comment on the site; we might want to simplify it.</p>
20+
21+
<p>Here's a sample:</p>
22+
1323
<div class="ala-embedded-comment" id="ala-embedded-comment-1">
14-
<a href="#" class="commenter-avatar" target="_parent">
15-
<img src="http://d.alistapart.com/_made/pix/authors/uploads/photo_116023_60_60_c1.jpg" width="60" height="60">
16-
</a>
24+
<a href="#" class="commenter-avatar" target="_parent"><img src="http://d.alistapart.com/_made/pix/authors/uploads/photo_116023_60_60_c1.jpg" width="60" height="60"></a>
1725
<a class="commenter-name" href="#" target="_parent">Jeffrey Zeldman</a>
1826
<a class="comment-meta" href="http://alistapart.com/comments/a-list-apart-relaunches-new-features-new-design#333649" target="_parent">5:03 pm on January 25, 2013</a>
19-
2027
<p><a href="http://alistapart.com/comments/a-list-apart-relaunches-new-features-new-design#333704" target="_parent">Christine Zoltok said</a>:</p>
21-
22-
<blockquote>
23-
I second the request for an article-only RSS feed.
24-
</blockquote>
25-
28+
<blockquote>I second the request for an article-only RSS feed.</blockquote>
2629
<p>On our <a href="http://alistapart.com/about/rss" target="_parent"><span class="caps">RSS</span></a> page, you can now choose between a firehose feed (all <span class="caps">ALA</span> content) and a feed containing only articles and columns. Enjoy! :)</p>
27-
28-
<p><a href="http://alistapart.com/comments/a-list-apart-relaunches-new-features-new-design#333699" target="_parent">Richard Fink said</a>:</p>
29-
30+
<p><a href="http://alistapart.com/comments/a-list-apart-relaunches-new-features-new-design#333699" target="_parent">Richard Fink said</a>:</p>
3031
<blockquote>a point-by-point rundown of why the choices you’ve made were made, would be right on point and very helpful to your readers</blockquote>
31-
3232
<p>I agree, and we plan to address select decisions in a series of brief blog posts, such as this one <a href="http://alistapart.com/blog/post/on-alt-text">on alt text</a>.</p>
3333
</div>
34+
35+
<script src="../dist/comment-embed.min.js" async data-comment="1"></script>
36+
37+
<p>The model is obviously embedded tweets, but these differ a bit in that they can have a lot more content.</p>
3438
</div>
35-
<script src="../dist/comment-embed.min.js" async data-comment="1"></script>
3639
</body>

‎dist/comment-embed.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,12 @@
280280
iframe.scrolling = "no";
281281
iframe.style.border = "none";
282282
iframe.style.minHeight = "96px";
283+
iframe.style.maxWidth = "75%";
284+
iframe.style.marginRight = "auto";
285+
iframe.style.marginLeft = "auto";
286+
iframe.style.border = "1px solid #dddddd";
287+
iframe.style.borderRadius = "6px";
288+
iframe.style.boxShadow = "3px 2px 15px -5px rgba(238, 238, 238,1)";
283289

284290
if( target ) {
285291
// If the fallback markup is there, replace it.
@@ -317,7 +323,7 @@
317323
},
318324
_handleResize: function( iframe ) {
319325
var fixHeight = function() {
320-
iframe.height = iframe.contentWindow.document.getElementById( o.pluginName ).scrollHeight + 25;
326+
iframe.height = iframe.contentWindow.document.getElementById( o.pluginName ).scrollHeight + 3;
321327
};
322328

323329
fixHeight();

‎dist/comment-embed.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/comment-embed.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/comment-embed.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
body, html {
22
border: 0;
3-
margin: 0;
3+
margin: 3px 0 0;
44
padding: 0;
55
}
66
.ala-embedded-comment {
77
background: #fff;
8-
border: 1px solid #dddddd;
9-
border-radius: 6px;
108
display: block;
119
font: normal 14px/1.6 Georgia, serif;
1210
min-height: 96px;
13-
padding: 15px 11px;
11+
padding: 12px 11px;
1412
}
1513
::selection {
1614
background: #ddd;

‎src/comment-embed.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,12 @@
5656
iframe.scrolling = "no";
5757
iframe.style.border = "none";
5858
iframe.style.minHeight = "96px";
59+
iframe.style.maxWidth = "75%";
60+
iframe.style.marginRight = "auto";
61+
iframe.style.marginLeft = "auto";
62+
iframe.style.border = "1px solid #dddddd";
63+
iframe.style.borderRadius = "6px";
64+
iframe.style.boxShadow = "3px 2px 15px -5px rgba(238, 238, 238,1)";
5965

6066
if( target ) {
6167
// If the fallback markup is there, replace it.
@@ -93,7 +99,7 @@
9399
},
94100
_handleResize: function( iframe ) {
95101
var fixHeight = function() {
96-
iframe.height = iframe.contentWindow.document.getElementById( o.pluginName ).scrollHeight + 25;
102+
iframe.height = iframe.contentWindow.document.getElementById( o.pluginName ).scrollHeight + 3;
97103
};
98104

99105
fixHeight();

‎test/comment-embed.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ <h2 id="qunit-userAgent"></h2>
3333

3434
<div class="ala-embedded-comment" id="ala-embedded-comment-1">
3535
</div>
36-
<script src="../dist/comment-embed.min.js" async data-comment="1" id="test1"></script>
3736

38-
<script src="../dist/comment-embed.min.js" async data-comment="2" id="test2"></script>
37+
<!--<script src="../dist/comment-embed.min.js" async data-comment="1" id="test1"></script>
38+
<script src="../dist/comment-embed.min.js" async data-comment="2" id="test2"></script>-->
3939
</div>
4040
</body>
4141
</html>

0 commit comments

Comments
 (0)