[extensions-web: 24/30] fsui: Make the filtering UI popup look prettier

[Jasper St. Pierre <jstpierre src gnome org>]

commit 07a627b83fbcbc83305d5177925e8263716da354
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Jan 9 16:19:44 2012 -0500

    fsui: Make the filtering UI popup look prettier

 sweettooth/static/css/sweettooth.css |   17 ++++++++---------
 sweettooth/static/js/fsui.js         |    9 +++------
 2 files changed, 11 insertions(+), 15 deletions(-)
---
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 043ce9c..c5a616d 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -185,21 +185,20 @@ a.fsui-link {
 .fsui {
     background-color: #fff;
     position: absolute;
+    right: 4px;
+
+    margin-top: -4px;
 
-    -webkit-transition: visiblity 0.2s ease-in-out;
     border-radius: 0 0 4px 4px;
-    border: 1px solid #BABDB6;
-    border-top: none;
-    padding: 1em;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
 
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+    z-index: 999;
 }
 
 .fsui h4 {
     margin: 0;
+    margin-top: 1em;
+    text-align: center;
 }
 
 .fsui-selection-link {
@@ -207,7 +206,7 @@ a.fsui-link {
     color: #444;
     list-style-position: inside;
     list-style-type: none;
-    padding: .5em 0 .5em 1em;
+    padding: .5em 1em;
     cursor: pointer;
     margin-left: 0;
     padding-left: 2em;
diff --git a/sweettooth/static/js/fsui.js b/sweettooth/static/js/fsui.js
index 8e57699..0178cb4 100644
--- a/sweettooth/static/js/fsui.js
+++ b/sweettooth/static/js/fsui.js
@@ -29,7 +29,7 @@ require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal
 
             function closeUI() {
                 if ($link.hasClass('selected')) {
-                    $('.fsui').slideUp('fast', function() {
+                    $('.fsui').fadeOut('fast', function() {
                         $(this).detach();
                     });
                     $link.removeClass('selected');
@@ -44,12 +44,9 @@ require(['jquery', 'hashparamutils', 'modal'], function($, hashparamutils, modal
                     $(this).addClass('selected');
                     var pos = $elem.offset();
                     var $fsui = $('<div>', {'class': 'fsui'}).
-                        css({'top': pos.top + $elem.outerHeight(),
-                             'left': pos.left,
-                             'width': $elem.outerWidth()}).
-                        appendTo(document.body).
+                        appendTo($elem).
                         hide().
-                        slideDown('fast');
+                        fadeIn('fast');
                     modal.activateModal($fsui, closeUI);
 
                     var $sortUI = $('<div>', {'class': 'fsui-sort-ui'}).