From 97aff091409a43beb056a8ecb7233070b2762003 Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Mon, 7 Mar 2011 11:22:59 -0800 Subject: [PATCH] added autocomplete on message 'to' field, minor css tweaks to inbox --- app/controllers/conversations_controller.rb | 5 +- app/models/conversation.rb | 4 + app/views/conversations/_show.haml | 2 + app/views/conversations/index.haml | 16 +- app/views/conversations/new.haml | 11 +- app/views/layouts/_header.html.haml | 7 +- config/assets.yml | 2 + public/javascripts/inbox.js | 1 - .../javascripts/vendor/jquery.autoSuggest.js | 368 ++++++++++++++++++ public/javascripts/view.js | 8 + public/stylesheets/sass/application.sass | 42 +- public/stylesheets/vendor/autoSuggest.css | 217 +++++++++++ 12 files changed, 654 insertions(+), 29 deletions(-) create mode 100644 public/javascripts/vendor/jquery.autoSuggest.js create mode 100644 public/stylesheets/vendor/autoSuggest.css diff --git a/app/controllers/conversations_controller.rb b/app/controllers/conversations_controller.rb index d83b89504..d803ee65f 100644 --- a/app/controllers/conversations_controller.rb +++ b/app/controllers/conversations_controller.rb @@ -4,8 +4,7 @@ class ConversationsController < ApplicationController respond_to :html, :json def index - - @all_contacts_and_ids = current_user.contacts.map{|c| {:id => c.id, :name => c.person.name}} + @all_contacts_and_ids = current_user.contacts.map{|c| {:value => c.id, :name => c.person.name}} @conversations = Conversation.joins(:conversation_visibilities).where( :conversation_visibilities => {:person_id => current_user.person.id}).paginate( @@ -18,7 +17,7 @@ class ConversationsController < ApplicationController end def create - person_ids = Contact.where(:id => params[:conversation].delete(:contact_ids)).map! do |contact| + person_ids = Contact.where(:id => params[:contact_ids]).map! do |contact| contact.person_id end diff --git a/app/models/conversation.rb b/app/models/conversation.rb index 9223a7b46..640984f16 100644 --- a/app/models/conversation.rb +++ b/app/models/conversation.rb @@ -49,6 +49,10 @@ class Conversation < ActiveRecord::Base self.messages.last.author if self.messages.size > 0 end + def subject + self[:subject].blank? ? "no subject" : self[:subject] + end + def subscribers(user) self.recipients end diff --git a/app/views/conversations/_show.haml b/app/views/conversations/_show.haml index e92f8bf9c..60bee1f3b 100644 --- a/app/views/conversations/_show.haml +++ b/app/views/conversations/_show.haml @@ -17,6 +17,8 @@ - for participant in conversation.participants = person_image_link(participant) +%br +%br %br %br %br diff --git a/app/views/conversations/index.haml b/app/views/conversations/index.haml index 2064f25c1..28fecb93c 100644 --- a/app/views/conversations/index.haml +++ b/app/views/conversations/index.haml @@ -15,14 +15,12 @@ = hidden_field_tag :contact_json, @all_contacts_and_ids.to_json -.span-5.append-4 - %h3.fixit{:style => 'width:340px;'} - .right - = link_to 'New Message', new_conversation_path, :class => 'button', :rel => 'facebox' - Inbox - %br - %br - %br +#left_pane + #left_pane_header + %h3 + .right + = link_to 'New Message', new_conversation_path, :class => 'button', :rel => 'facebox' + Inbox #conversation_inbox - if @conversations.count > 0 @@ -33,7 +31,7 @@ %i You have no messages -#conversation_show.span-15.last +#conversation_show.span-15.prepend-8.last - if @conversation = render 'conversations/show', :conversation => @conversation - else diff --git a/app/views/conversations/new.haml b/app/views/conversations/new.haml index 072e88f34..4eea90612 100644 --- a/app/views/conversations/new.haml +++ b/app/views/conversations/new.haml @@ -4,10 +4,13 @@ :javascript $(document).ready(function () { - $("#my-text-input").tokenInput("/url/to/your/script/"); + var data = $.parseJSON( $('#contact_json').val() ); + $("#contact_autocomplete").autoSuggest(data, { + selectedItemProp: "name", + searchObjProps: "name", + asHtmlID: "contact_ids" + }); }); - - #new_message_pane #facebox_header @@ -26,7 +29,7 @@ -else %h4 to - = text_field_tag "conversation[contact_ids]" + = text_field_tag "contact_autocomplete" %h4 subject diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index c4754d533..40b3f5031 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -25,7 +25,12 @@ #notification_badge = link_to "", notifications_path, :title => new_notification_text(@notification_count) = image_tag 'icons/mail_grey.png' - #notification_badge_number{:class => ("hidden" if @notification_count == 0)} + .badge_count{:class => ("hidden" if @notification_count == 0)} + = @notification_count + #message_inbox_badge + = link_to "", conversations_path #, :title => new_notification_text(@notification_count) + = image_tag 'icons/mail_grey.png' + .badge_count{:class => ("hidden" if @notification_count == 0)} = @notification_count %ul#user_menu diff --git a/config/assets.yml b/config/assets.yml index e70e461b4..0f56bf764 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -57,6 +57,7 @@ javascripts: photos: - public/javascripts/photo-show.js inbox: + - public/javascripts/vendor/jquery.autoSuggest.js - public/javascripts/inbox.js stylesheets: @@ -67,4 +68,5 @@ stylesheets: - public/stylesheets/vendor/facebox.css - public/stylesheets/vendor/fileuploader.css - public/stylesheets/vendor/tipsy.css + - public/stylesheets/vendor/autoSuggest.css diff --git a/public/javascripts/inbox.js b/public/javascripts/inbox.js index ad8478f21..769b6a0c8 100644 --- a/public/javascripts/inbox.js +++ b/public/javascripts/inbox.js @@ -67,7 +67,6 @@ $(document).ready(function(){ $('#message_text').focus(); }); }); - }); var resize = function(){ diff --git a/public/javascripts/vendor/jquery.autoSuggest.js b/public/javascripts/vendor/jquery.autoSuggest.js new file mode 100644 index 000000000..01f58111a --- /dev/null +++ b/public/javascripts/vendor/jquery.autoSuggest.js @@ -0,0 +1,368 @@ + /* + * AutoSuggest + * Copyright 2009-2010 Drew Wilson + * www.drewwilson.com + * code.drewwilson.com/entry/autosuggest-jquery-plugin + * + * Version 1.4 - Updated: Mar. 23, 2010 + * + * This Plug-In will auto-complete or auto-suggest completed search queries + * for you as you type. You can add multiple selections and remove them on + * the fly. It supports keybord navigation (UP + DOWN + RETURN), as well + * as multiple AutoSuggest fields on the same page. + * + * Inspied by the Autocomplete plugin by: Jšrn Zaefferer + * and the Facelist plugin by: Ian Tearle (iantearle.com) + * + * This AutoSuggest jQuery plug-in is dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + */ + +(function($){ + $.fn.autoSuggest = function(data, options) { + var defaults = { + asHtmlID: false, + startText: "Enter Name Here", + emptyText: "No Results Found", + preFill: {}, + limitText: "No More Selections Are Allowed", + selectedItemProp: "value", //name of object property + selectedValuesProp: "value", //name of object property + searchObjProps: "value", //comma separated list of object property names + queryParam: "q", + retrieveLimit: false, //number for 'limit' param on ajax request + extraParams: "", + matchCase: false, + minChars: 1, + keyDelay: 400, + resultsHighlight: true, + neverSubmit: false, + selectionLimit: false, + showResultList: true, + start: function(){}, + selectionClick: function(elem){}, + selectionAdded: function(elem){}, + selectionRemoved: function(elem){ elem.remove(); }, + formatList: false, //callback function + beforeRetrieve: function(string){ return string; }, + retrieveComplete: function(data){ return data; }, + resultClick: function(data){}, + resultsComplete: function(){} + }; + var opts = $.extend(defaults, options); + + var d_type = "object"; + var d_count = 0; + if(typeof data == "string") { + d_type = "string"; + var req_string = data; + } else { + var org_data = data; + for (k in data) if (data.hasOwnProperty(k)) d_count++; + } + if((d_type == "object" && d_count > 0) || d_type == "string"){ + return this.each(function(x){ + if(!opts.asHtmlID){ + x = x+""+Math.floor(Math.random()*100); //this ensures there will be unique IDs on the page if autoSuggest() is called multiple times + var x_id = "as-input-"+x; + } else { + x = opts.asHtmlID; + var x_id = x; + } + opts.start.call(this); + var input = $(this); + input.attr("autocomplete","off").addClass("as-input").attr("id",x_id).val(opts.startText); + var input_focus = false; + + // Setup basic elements and render them to the DOM + input.wrap('').wrap('
  • '); + var selections_holder = $("#as-selections-"+x); + var org_li = $("#as-original-"+x); + var results_holder = $('
    ').hide(); + var results_ul = $(''); + var values_input = $(''); + var prefill_value = ""; + if(typeof opts.preFill == "string"){ + var vals = opts.preFill.split(","); + for(var i=0; i < vals.length; i++){ + var v_data = {}; + v_data[opts.selectedValuesProp] = vals[i]; + if(vals[i] != ""){ + add_selected_item(v_data, "000"+i); + } + } + prefill_value = opts.preFill; + } else { + prefill_value = ""; + var prefill_count = 0; + for (k in opts.preFill) if (opts.preFill.hasOwnProperty(k)) prefill_count++; + if(prefill_count > 0){ + for(var i=0; i < prefill_count; i++){ + var new_v = opts.preFill[i][opts.selectedValuesProp]; + if(new_v == undefined){ new_v = ""; } + prefill_value = prefill_value+new_v+","; + if(new_v != ""){ + add_selected_item(opts.preFill[i], "000"+i); + } + } + } + } + if(prefill_value != ""){ + input.val(""); + var lastChar = prefill_value.substring(prefill_value.length-1); + if(lastChar != ","){ prefill_value = prefill_value+","; } + values_input.val(","+prefill_value); + $("li.as-selection-item", selections_holder).addClass("blur").removeClass("selected"); + } + input.after(values_input); + selections_holder.click(function(){ + input_focus = true; + input.focus(); + }).mousedown(function(){ input_focus = false; }).after(results_holder); + + var timeout = null; + var prev = ""; + var totalSelections = 0; + var tab_press = false; + + // Handle input field events + input.focus(function(){ + if($(this).val() == opts.startText && values_input.val() == ""){ + $(this).val(""); + } else if(input_focus){ + $("li.as-selection-item", selections_holder).removeClass("blur"); + if($(this).val() != ""){ + results_ul.css("width",selections_holder.outerWidth()); + results_holder.show(); + } + } + input_focus = true; + return true; + }).blur(function(){ + if($(this).val() == "" && values_input.val() == "" && prefill_value == ""){ + $(this).val(opts.startText); + } else if(input_focus){ + $("li.as-selection-item", selections_holder).addClass("blur").removeClass("selected"); + results_holder.hide(); + } + }).keydown(function(e) { + // track last key pressed + lastKeyPressCode = e.keyCode; + first_focus = false; + switch(e.keyCode) { + case 38: // up + e.preventDefault(); + moveSelection("up"); + break; + case 40: // down + e.preventDefault(); + moveSelection("down"); + break; + case 8: // delete + if(input.val() == ""){ + var last = values_input.val().split(","); + last = last[last.length - 2]; + selections_holder.children().not(org_li.prev()).removeClass("selected"); + if(org_li.prev().hasClass("selected")){ + values_input.val(values_input.val().replace(","+last+",",",")); + opts.selectionRemoved.call(this, org_li.prev()); + } else { + opts.selectionClick.call(this, org_li.prev()); + org_li.prev().addClass("selected"); + } + } + if(input.val().length == 1){ + results_holder.hide(); + prev = ""; + } + if($(":visible",results_holder).length > 0){ + if (timeout){ clearTimeout(timeout); } + timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay); + } + break; + case 9: case 188: // tab or comma + tab_press = true; + var i_input = input.val().replace(/(,)/g, ""); + if(i_input != "" && values_input.val().search(","+i_input+",") < 0 && i_input.length >= opts.minChars){ + e.preventDefault(); + var n_data = {}; + n_data[opts.selectedItemProp] = i_input; + n_data[opts.selectedValuesProp] = i_input; + var lis = $("li", selections_holder).length; + add_selected_item(n_data, "00"+(lis+1)); + input.val(""); + } + case 13: // return + tab_press = false; + var active = $("li.active:first", results_holder); + if(active.length > 0){ + active.click(); + results_holder.hide(); + } + if(opts.neverSubmit || active.length > 0){ + e.preventDefault(); + } + break; + default: + if(opts.showResultList){ + if(opts.selectionLimit && $("li.as-selection-item", selections_holder).length >= opts.selectionLimit){ + results_ul.html('
  • '+opts.limitText+'
    • '); + results_holder.show(); + } else { + if (timeout){ clearTimeout(timeout); } + timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay); + } + } + break; + } + }); + + function keyChange() { + // ignore if the following keys are pressed: [del] [shift] [capslock] + if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ){ return results_holder.hide(); } + var string = input.val().replace(/[\\]+|[\/]+/g,""); + if (string == prev) return; + prev = string; + if (string.length >= opts.minChars) { + selections_holder.addClass("loading"); + if(d_type == "string"){ + var limit = ""; + if(opts.retrieveLimit){ + limit = "&limit="+encodeURIComponent(opts.retrieveLimit); + } + if(opts.beforeRetrieve){ + string = opts.beforeRetrieve.call(this, string); + } + $.getJSON(req_string+"?"+opts.queryParam+"="+encodeURIComponent(string)+limit+opts.extraParams, function(data){ + d_count = 0; + var new_data = opts.retrieveComplete.call(this, data); + for (k in new_data) if (new_data.hasOwnProperty(k)) d_count++; + processData(new_data, string); + }); + } else { + if(opts.beforeRetrieve){ + string = opts.beforeRetrieve.call(this, string); + } + processData(org_data, string); + } + } else { + selections_holder.removeClass("loading"); + results_holder.hide(); + } + } + var num_count = 0; + function processData(data, query){ + if (!opts.matchCase){ query = query.toLowerCase(); } + var matchCount = 0; + results_holder.html(results_ul.html("")).hide(); + for(var i=0;i').click(function(){ + var raw_data = $(this).data("data"); + var number = raw_data.num; + if($("#as-selection-"+number, selections_holder).length <= 0 && !tab_press){ + var data = raw_data.attributes; + input.val("").focus(); + prev = ""; + add_selected_item(data, number); + opts.resultClick.call(this, raw_data); + results_holder.hide(); + } + tab_press = false; + }).mousedown(function(){ input_focus = false; }).mouseover(function(){ + $("li", results_ul).removeClass("active"); + $(this).addClass("active"); + }).data("data",{attributes: data[num], num: num_count}); + var this_data = $.extend({},data[num]); + if (!opts.matchCase){ + var regx = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + query + ")(?![^<>]*>)(?![^&;]+;)", "gi"); + } else { + var regx = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + query + ")(?![^<>]*>)(?![^&;]+;)", "g"); + } + + if(opts.resultsHighlight){ + this_data[opts.selectedItemProp] = this_data[opts.selectedItemProp].replace(regx,"$1"); + } + if(!opts.formatList){ + formatted = formatted.html(this_data[opts.selectedItemProp]); + } else { + formatted = opts.formatList.call(this, this_data, formatted); + } + results_ul.append(formatted); + delete this_data; + matchCount++; + if(opts.retrieveLimit && opts.retrieveLimit == matchCount ){ break; } + } + } + selections_holder.removeClass("loading"); + if(matchCount <= 0){ + results_ul.html('
  • '+opts.emptyText+'
    • '); + } + results_ul.css("width", selections_holder.outerWidth()); + results_holder.show(); + opts.resultsComplete.call(this); + } + + function add_selected_item(data, num){ + values_input.val(values_input.val()+data[opts.selectedValuesProp]+","); + var item = $('
  • ').click(function(){ + opts.selectionClick.call(this, $(this)); + selections_holder.children().removeClass("selected"); + $(this).addClass("selected"); + }).mousedown(function(){ input_focus = false; }); + var close = $('×').click(function(){ + values_input.val(values_input.val().replace(","+data[opts.selectedValuesProp]+",",",")); + opts.selectionRemoved.call(this, item); + input_focus = true; + input.focus(); + return false; + }); + org_li.before(item.html(data[opts.selectedItemProp]).prepend(close)); + opts.selectionAdded.call(this, org_li.prev()); + } + + function moveSelection(direction){ + if($(":visible",results_holder).length > 0){ + var lis = $("li", results_holder); + if(direction == "down"){ + var start = lis.eq(0); + } else { + var start = lis.filter(":last"); + } + var active = $("li.active:first", results_holder); + if(active.length > 0){ + if(direction == "down"){ + start = active.next(); + } else { + start = active.prev(); + } + } + lis.removeClass("active"); + start.addClass("active"); + } + } + + }); + } + } +})(jQuery); diff --git a/public/javascripts/view.js b/public/javascripts/view.js index 198268ccc..6f79f0d63 100644 --- a/public/javascripts/view.js +++ b/public/javascripts/view.js @@ -165,6 +165,14 @@ var View = { } }, + conversation_participants: { + bind: function() { + $(".conversation_participants img").tipsy({ + live: true + }); + } + }, + whatIsThis: { bind: function() { $(".what_is_this").tipsy({ diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 1213d3365..59bd5304d 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -1666,11 +1666,13 @@ h3 span.current_gs_step :background :color #22AAE0 -#notification_badge +#notification_badge, +#message_inbox_badge :position relative :top 5px :display inline - :margin 0 1em + :margin 0 10px + :right 0 :font :weight bold :size smaller @@ -1683,7 +1685,7 @@ h3 span.current_gs_step :width 20px :height 20px -#notification_badge_number +.badge_count :z-index 3 :position absolute :top -10px @@ -2539,8 +2541,9 @@ ul.show_comments :border :bottom 1px solid #666 - :padding 0 - :top 90px + :padding 20px + :top 110px + :bottom 10px :margin :top -100px @@ -2620,19 +2623,36 @@ ul.show_comments :top 1px solid darken($blue, 10%) #conversation_inbox - :position fixed :height 100% :overflow-y auto :overflow-x none :background - :color #f8f8f8 - :width 358px + :color #f3f3f3 + +#left_pane + :position fixed + :width 320px + :background + :color #ddd + + :-webkit-box-shadow 2px 2px 5px -1px #999 :border - :right 2px solid #999 + :right 1px solid #999 + :z-index 4 + + h3 + :padding + :bottom 0 + :margin + :bottom 15px + + #left_pane_header + :padding 10px + :height 22px + :border + :bottom 1px solid #ddd -.fixit - :position fixed #no_conversation_text :font diff --git a/public/stylesheets/vendor/autoSuggest.css b/public/stylesheets/vendor/autoSuggest.css new file mode 100644 index 000000000..a694cd71b --- /dev/null +++ b/public/stylesheets/vendor/autoSuggest.css @@ -0,0 +1,217 @@ +/* AutoSuggest CSS - Version 1.2 */ + +ul.as-selections { + list-style-type: none; + border-top: 1px solid #888; + border-bottom: 1px solid #b6b6b6; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; + padding: 4px 0 4px 4px; + margin: 0; + overflow: auto; + background-color: #fff; + box-shadow:inset 0 1px 2px #888; + -webkit-box-shadow:inset 0 1px 2px #888; + -moz-box-shadow:inset 0 1px 2px #888; +} + +ul.as-selections.loading { + background-color: #eee; +} + +ul.as-selections li { + float: left; + margin: 1px 4px 1px 0; +} + +ul.as-selections li.as-selection-item { + color: #2b3840; + font-size: 13px; + font-family: "Lucida Grande", arial, sans-serif; + text-shadow: 0 1px 1px #fff; + background-color: #ddeefe; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddeefe), to(#bfe0f1)); + border: 1px solid #acc3ec; + border-top-color: #c0d9e9; + padding: 2px 7px 2px 10px; + border-radius: 12px; + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + box-shadow: 0 1px 1px #e4edf2; + -webkit-box-shadow: 0 1px 1px #e4edf2; + -moz-box-shadow: 0 1px 1px #e4edf2; +} + +ul.as-selections li.as-selection-item:last-child { + margin-left: 30px; +} + +ul.as-selections li.as-selection-item a.as-close { + float: right; + margin: 1px 0 0 7px; + padding: 0 2px; + cursor: pointer; + color: #5491be; + font-family: "Helvetica", helvetica, arial, sans-serif; + font-size: 14px; + font-weight: bold; + text-shadow: 0 1px 1px #fff; + -webkit-transition: color .1s ease-in; +} + +ul.as-selections li.as-selection-item.blur { + color: #666666; + background-color: #f4f4f4; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#d5d5d5)); + border-color: #bbb; + border-top-color: #ccc; + box-shadow: 0 1px 1px #e9e9e9; + -webkit-box-shadow: 0 1px 1px #e9e9e9; + -moz-box-shadow: 0 1px 1px #e9e9e9; +} + +ul.as-selections li.as-selection-item.blur a.as-close { + color: #999; +} + +ul.as-selections li:hover.as-selection-item { + color: #2b3840; + background-color: #bbd4f1; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbd4f1), to(#a3c2e5)); + border-color: #6da0e0; + border-top-color: #8bb7ed; +} + +ul.as-selections li:hover.as-selection-item a.as-close { + color: #4d70b0; +} + +ul.as-selections li.as-selection-item.selected { + border-color: #1f30e4; +} + +ul.as-selections li.as-selection-item a:hover.as-close { + color: #1b3c65; +} + +ul.as-selections li.as-selection-item a:active.as-close { + color: #4d70b0; +} + +ul.as-selections li.as-original { + margin-left: 0; +} + +ul.as-selections li.as-original input { + border: none; + outline: none; + font-size: 13px; + width: 120px; + height: 18px; + padding-top: 3px; +} + +ul.as-list { + position: absolute; + list-style-type: none; + margin: 2px 0 0 0; + padding: 0; + font-size: 14px; + color: #000; + font-family: "Lucida Grande", arial, sans-serif; + background-color: #fff; + background-color: rgba(255,255,255,0.95); + z-index: 2; + box-shadow: 0 2px 12px #222; + -webkit-box-shadow: 0 2px 12px #222; + -moz-box-shadow: 0 2px 12px #222; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; +} + +li.as-result-item, li.as-message { + margin: 0 0 0 0; + padding: 5px 12px; + background-color: transparent; + border: 1px solid #fff; + border-bottom: 1px solid #ddd; + cursor: pointer; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; +} + +li:first-child.as-result-item { + margin: 0; +} + +li.as-message { + margin: 0; + cursor: default; +} + +li.as-result-item.active { + background-color: #3668d9; + background-image: -webkit-gradient(linear, 0% 0%, 0% 64%, from(rgb(110, 129, 245)), to(rgb(62, 82, 242))); + border-color: #3342e8; + color: #fff; + text-shadow: 0 1px 2px #122042; +} + +li.as-result-item em { + font-style: normal; + background: #444; + padding: 0 2px; + color: #fff; +} + +li.as-result-item.active em { + background: #253f7a; + color: #fff; +} + +/* Webkit Hacks */ +@media screen and (-webkit-min-device-pixel-ratio:0) { + ul.as-selections { + border-top-width: 2px; + } + ul.as-selections li.as-selection-item { + padding-top: 3px; + padding-bottom: 3px; + } + ul.as-selections li.as-selection-item a.as-close { + margin-top: -1px; + } + ul.as-selections li.as-original input { + height: 19px; + } +} + +/* Opera Hacks */ +@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { + ul.as-list { + border: 1px solid #888; + } + ul.as-selections li.as-selection-item a.as-close { + margin-left: 4px; + margin-top: 0; + } +} + +/* IE Hacks */ +ul.as-list { + border: 1px solid #888\9; +} +ul.as-selections li.as-selection-item a.as-close { + margin-left: 4px\9; + margin-top: 0\9; +} + +/* Firefox 3.0 Hacks */ +ul.as-list, x:-moz-any-link, x:default { + border: 1px solid #888; +} +BODY:first-of-type ul.as-list, x:-moz-any-link, x:default { /* Target FF 3.5+ */ + border: none; +}