Permalink
Browse files

dropping large mode in lieu of using verticals instead

  • Loading branch information...
1 parent cf2264c commit 23dad989e2624ed4a32c2e084803fba703e4ef1c @addyosmani committed Oct 30, 2011
Showing with 26 additions and 11 deletions.
  1. +9 −2 README.md
  2. +1 −1 buttons-nologo.html
  3. +1 −1 buttons.html
  4. +7 −3 github-watchers-nologo.js
  5. +8 −4 github-watchers.js
View
@@ -4,7 +4,7 @@ These days we have share and follower buttons for almost everything, except GitH
##Screenshots
-<img src='http://www.blarnee.com/images/screenshots_gitwa.jpg'/>
+<img src='http://www.blarnee.com/images/screenshots_gitwatchb.jpg'/>
##Getting Started
@@ -15,7 +15,7 @@ The three size modes supported which can be set via classes on any link are:
<ul>
<li><code>gitwatch</code> - standard size. Works best for blog posts and share button-like toolbars.</li>
-<li><code>gitwatch large</code> - largest variation. Best for project homepages.</li>
+<li><code>gitwatch vertical</code> - vertical variation. Best for project homepages.</li>
<li><code>gitwatch small</code> - less wide than the standard size. Excludes the 'watchers' text.</li>
</ul>
@@ -33,6 +33,13 @@ and when populated, this might look like:
&lt;script type=&quot;text/javascript&quot; src=&quot;github-watchers.js&quot;&gt;&lt;/script&gt;
</pre>
+or this:
+
+<pre>
+&lt;a href=&quot;http://github.com/addyosmani/todomvc&quot; target=&quot;_blank&quot; class=&quot;gitwatch vertical&quot;&gt;Watch us on GitHub&lt;/a&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;github-watchers.js&quot;&gt;&lt;/script&gt;
+</pre>
+
##Versions
<ul>
<li>Standard (github-watchers.js) - uses an embedded GitHub logo (5.6KB minified)</li>
View
@@ -14,7 +14,7 @@
<h1>Button samples</h1>
<div class="inner">
- <p><a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch large">Watch us on GitHub</a></p>
+ <p><a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch vertical">Watch us on GitHub</a></p>
<p><a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch">Watch us on GitHub</a></p>
<p><a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch small">Watch us on GitHub</a></p>
View
@@ -14,7 +14,7 @@
<h1>Button samples</h1>
<div class="inner">
- <p><a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch large">Watch us on GitHub</a></p>
+ <p><a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch vertical">Watch us on GitHub</a></p>
<p><a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch">Watch us on GitHub</a></p>
<p><a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch small">Watch us on GitHub</a></p>
<p>Did you know that you can join the <a href="http://github.com/addyosmani/todomvc" target="_blank" class="gitwatch small">Watch</a> following us on GitHub?</p>
View
@@ -19,7 +19,7 @@
'.gitwatch:active { top: 1px; }',
'.gitwatch:hover { background: #eee; text-decoration: none; }',
'.gitwatch img { vertical-align: middle; padding-right: 5px; border: 0; }',
- '.gitwatch.large { padding: 10px 30px 8px; font-size:30px; letter-spacing:-2px; bottom:5px; }',
+ '.gitwatch.vertical { padding: 10px 15px 8px; font-size:30px; letter-spacing:-2px; bottom:5px; }',
'.gitwatch.small { padding: 2px 14px 4px; }'
],
@@ -89,13 +89,17 @@
apply: function ( count ) {
this.applyCss(this.styles.join(''));
var text = "";
+
for (var i = 0, l = this.elements.length; i < l; i++) {
- if (this.elements[i].className.indexOf('small') > 0) {
+ currentEl = this.elements[i];
+ currentClass = currentEl.className;
+
+ if (currentClass.indexOf('small') > 0 || currentClass.indexOf('vertical') > 0) {
text = count;
} else {
text = this.text.replace(/%/, count);
}
- this.elements[i].innerHTML = text;
+ currentEl.innerHTML = text;
}
}
View
@@ -19,7 +19,7 @@
'.gitwatch:active { top: 1px; }',
'.gitwatch:hover { background: #eee; text-decoration: none; }',
'.gitwatch img { vertical-align: middle; padding-right: 5px; border: 0; }',
- '.gitwatch.large { padding: 10px 30px 8px; font-size:30px; letter-spacing:-2px; bottom:5px; }',
+ '.gitwatch.vertical { padding: 10px 15px 8px; font-size:30px; letter-spacing:-2px; bottom:5px; }',
'.gitwatch.small { padding: 2px 14px 4px; }'
],
@@ -91,14 +91,18 @@
apply: function ( count ) {
this.applyCss(this.styles.join(''));
var img = '<img src="' + this.logo + '" /> ',
- text = "";
+ text = "", currentEl, currentClass;
+
for (var i = 0, l = this.elements.length; i < l; i++) {
- if (this.elements[i].className.indexOf('small') > 0) {
+ currentEl = this.elements[i];
+ currentClass = currentEl.className;
+
+ if (currentClass.indexOf('small') > 0 || currentClass.indexOf('vertical') > 0) {
text = img + count;
} else {
text = img + this.text.replace(/%/, count);
}
- this.elements[i].innerHTML = text;
+ currentEl.innerHTML = text;
}
}

0 comments on commit 23dad98

Please sign in to comment.