Add link to view each list on Twitter

TRMW · Apr 2, 2012 · 9884ec4 · 9884ec4
1 parent 22d1876
commit 9884ec4
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,6 @@
 
 The Twitter list management tool that Twitter probably has better things to do than maintain. Merge, copy, and delete your Twitter lists like a ~~sad information hoarder~~ boss!
 
+Listter lives here: http://listter.herokuapp.com/
+
 **Actual documentation coming soon!**
diff --git a/app/assets/images/external.png b/app/assets/images/external.png
diff --git a/app/assets/javascripts/lists.js b/app/assets/javascripts/lists.js
@@ -4,7 +4,8 @@ Listter.List = Ember.Object.extend({
   name: null,
   id: null,
   members: null,
-  isChecked: false
+  isChecked: false,
+  uri: null
 });
 
 Listter.listsController = Ember.ArrayController.create({
@@ -24,7 +25,7 @@ Listter.listsController = Ember.ArrayController.create({
       // Add all users personal list (not subscribed)
       response.forEach(function(list){
         if(list.user.id === uid){
-          var list = Listter.List.create({ name: list.name, id: list.id, members: list.member_count, isChecked: false });
+          var list = Listter.List.create({ name: list.name, id: list.id, members: list.member_count, isChecked: false, link: 'http://twitter.com' + list.uri });
           Listter.listsController.pushObject(list);
         }
       });
@@ -118,7 +119,7 @@ Listter.listsController = Ember.ArrayController.create({
 
                 if ( Listter.listsController.mergeToNewList ) {
                   // Add new list
-                  var newList = Listter.List.create({ name: newListName, id: response.newListId, members: mergedMemberCount, isChecked: false });
+                  var newList = Listter.List.create({ name: newListName, id: response.newListId, members: mergedMemberCount, isChecked: false, link: 'http://twitter.com' + response.listUri });
                   Listter.listsController.unshiftObject(newList);
                 }
 

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -71,6 +71,12 @@ $content-width: 360px;
   user-select: none;
   }
 
+@mixin background-gradient($color1, $color2) {
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color2});
+  background-image: -moz-linear-gradient(center top, $color1, $color2);
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2));
+  }
+
 /* !Globals */
 
 body {
@@ -89,7 +95,9 @@ h1 {
   text-shadow: 8px 8px 0 rgba(255, 215, 0, .5);
   color: rgba(0, 0, 128, .6);
   -webkit-transform: skew(-7deg);
-  -webkit-text-stroke: 4px white;
+  -moz-transform: skew(-7deg);
+  transform: skew(-7deg);
+  -webkit-text-stroke: 4px white; /* only supported on WebKit */
   }
 
 /* !Main Styles */
@@ -161,19 +169,21 @@ input[type="submit"] {
   color: #333333;
   color: rgba(0, 0, 0, .7);
   background-color: #EEE;
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#DDD));
+  @include background-gradient(white, #DDD);
   @include rounded(5px);
   @include transition;
   }
 
 button:hover,
 input[type="submit"]:hover {
   background-image: -webkit-gradient(linear, 0% 50%, 0% 100%, from(white), to(#DDD));
+  background-image: -moz-linear-gradient(center center, white, #DDD);
   }
 
 button:active,
 input[type="submit"]:active {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(white));
+  background-color: #DDD;
+  @include background-gradient(#DDD, white);
   @include box-shadow-inset(0, 1px, 2px, rgba(0, 0, 0, .5));
   }
 
@@ -187,7 +197,8 @@ button:disabled:hover,
 input[type="submit"]:disabled,
 input[type="submit"]:disabled:hover {
   color: #B3B3B3;
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
+  background-color: #DDD;
+  @include background-gradient(#EEE, #DDD);
   box-shadow: none;
   text-shadow: none;
   }
@@ -215,23 +226,33 @@ input[type="submit"].primary-button {
   font-size: 26px;
   @include rounded(10px);
   background-color: orange;
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(gold), to(orange));
+  @include background-gradient(gold, orange);
   text-shadow: 0 1px rgba(0, 0, 0, 0.5);
   @include box-shadow-inset(0, -4px, 6px, gold);
   }
 
 .primary-button:hover,
 input[type="submit"].primary-button:hover {
   background-image: -webkit-gradient(linear, 0% 50%, 0% 100%, from(gold), to(orange));
+  background-image: -moz-linear-gradient(center center, gold, orange);
   @include box-shadow-inset(0, -4px, 6px, rgba(255, 215, 0, .8));
   }
 
 .primary-button:active,
 input[type="submit"].primary-button:active {
+  -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 1px 0 1px rgba(0,0,0,0.1), inset 0 1px rgba(0,0,0,0.2);
+  -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 1px 0 1px rgba(0,0,0,0.1), inset 0 1px rgba(0,0,0,0.2);
   box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 1px 0 1px rgba(0,0,0,0.1), inset 0 1px rgba(0,0,0,0.2);
+  -webkit-text-shadow: 0 2px rgba(0, 0, 0, 0.5);
+  -moz-text-shadow: 0 2px rgba(0, 0, 0, 0.5);
   text-shadow: 0 2px rgba(0, 0, 0, 0.5);
   }
 
+button::-moz-focus-inner { 
+  border: 0;
+  padding: 0;
+  }
+
 /* !Lists */
 
 #lists-container {
@@ -260,8 +281,11 @@ input[type="submit"].primary-button:active {
   font-weight: bold;
   padding: 20px;
   display: block;
-  width: 170px;
+  width: 160px;
   float: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   }
 
 .list label input[type="checkbox"] {
@@ -273,7 +297,7 @@ input[type="submit"].primary-button:active {
   padding: 20px;
   float: right;
   text-align: right;
-  width: 100px;
+  width: 118px;
   background: #EEE;
   }
 

diff --git a/app/controllers/lists_controller.rb b/app/controllers/lists_controller.rb
@@ -71,7 +71,9 @@ def merge
     end
 
     # get updated member count for target list
-    updated_member_count = client.list(target.to_i).member_count
+    updated_list = client.list(target.to_i)
+    updated_member_count = updated_list.member_count
+    list_uri = updated_list.uri
 
     # delete lists after successful merge, if option is selected
     if(delete_on_merge)
@@ -80,7 +82,7 @@ def merge
       end
     end
 
-    render :json => { 'message' => 'Lists merged!', 'newListId' => target, 'updatedMemberCount' => updated_member_count }
+    render :json => { 'message' => 'Lists merged!', 'newListId' => target, 'updatedMemberCount' => updated_member_count, 'listUri' => list_uri }
   end
 
 end
diff --git a/app/views/lists/index.html.erb b/app/views/lists/index.html.erb
@@ -1,11 +1,12 @@
 <div id="lists-container" data-uid="<%= current_user.uid if current_user %>">
   <script type="text/x-handlebars">
     {{#each Listter.listsController.content}}
-      {{#view Listter.ListView listBinding="this" class="list" }}
+      {{#view Listter.ListView listBinding="this" class="list" }} 
         {{view Ember.Checkbox tagName="span" titleBinding="list.name" valueBinding="list.isChecked"}}
           <div class="list-meta">
             <span class="list-members">{{list.members}}</span>
             <button {{action removeList}}>Delete</button>
+            <a {{bindAttr href="list.link"}} target="_blank" title="View list on Twitter.com"><%= image_tag 'external.png' %></a>
           </div>
       {{/view}}
     {{/each}}