Matching Facebook app UI to identi.ca. Fixed tabs, add to profile,

widths, font-size, and some HTML markup.

3 files changed, 86 insertions, 15 deletions

diff --git a/actions/facebookinvite.php b/actions/facebookinvite.php
index b7224783a..3c872f94b 100644
--- a/actions/facebookinvite.php
+++ b/actions/facebookinvite.php
@@ -73,7 +73,7 @@ class FacebookinviteAction extends FacebookAction
 
         $friend_ids = $_POST['ids']; // XXX: Hmm... is this the best way to acces the list?
 
-        $this->elementStart("ul");
+        $this->elementStart('ul', array('id' => 'facebook-friends'));
 
         foreach ($friend_ids as $friend) {
             $this->elementStart('li');
@@ -112,11 +112,11 @@ class FacebookinviteAction extends FacebookAction
 
         $this->element('h2', null, sprintf(_('Friends already using %s:'), 
             common_config('site', 'name')));
-        $this->elementStart("ul");
-
+        $this->elementStart('ul', array('id' => 'facebook-friends'));
+        
         foreach ($exclude_ids as $friend) {
             $this->elementStart('li');
-            $this->element('fb:profile-pic', array('uid' => $friend));
+            $this->element('fb:profile-pic', array('uid' => $friend, 'size' => 'square'));
             $this->element('fb:name', array('uid' => $friend,
                                             'capitalize' => 'true'));
             $this->elementEnd('li');
diff --git a/lib/facebookaction.php b/lib/facebookaction.php
index b6481011f..d369cc385 100644
--- a/lib/facebookaction.php
+++ b/lib/facebookaction.php
@@ -270,7 +270,6 @@ class FacebookAction extends Action
 
         $loginmsg_part1 = _('To use the %s Facebook Application you need to login ' .
             'with your username and password. Don\'t have a username yet? ');
-
         $loginmsg_part2 = _(' a new account.');
 
         $this->elementStart('dd');
@@ -279,18 +278,18 @@ class FacebookAction extends Action
         $this->element('a',
             array('href' => common_local_url('register')), _('Register'));
         $this->text($loginmsg_part2);
+	$this->elementEnd('p');
         $this->elementEnd('dd');
+
         $this->elementEnd('dl');
-        
         $this->elementEnd('div');
-        
     }
 
 
     function showLoginForm($msg = null)
     {
 
-        $this->elementStart('div', array('class' => 'content'));
+        $this->elementStart('div', array('id' => 'content'));
         $this->element('h1', null, _('Login'));
 
         if ($msg) {
@@ -318,6 +317,7 @@ class FacebookAction extends Action
         $this->elementEnd('ul');
 
         $this->submit('submit', _('Login'));
+	$this->elementEnd('fieldset');
         $this->elementEnd('form');
 
         $this->elementStart('p');
@@ -326,6 +326,7 @@ class FacebookAction extends Action
         $this->elementEnd('p');
 
         $this->elementEnd('div');
+        $this->elementEnd('div');
 
     }
     
diff --git a/theme/base/css/facebookapp.css b/theme/base/css/facebookapp.css
index af188ad7a..163b41fb4 100644
--- a/theme/base/css/facebookapp.css
+++ b/theme/base/css/facebookapp.css
@@ -1,10 +1,86 @@
 @import url("display.css");
 @import url("../../identica/css/display.css");
 
-span.facebook-button { border: 2px solid #777; padding: 5px; display: block; float: left; margin-right: 20px; -moz-border-radius: 4px; border-radius:4px; -webkit-border-radius:4px; font-weight: bold; background-color:#A9BF4F; color:#fff; font-size:1.2em }
+* {
+font-size:14px;
+font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
+}
+
+#wrap {
+background-color:#F0F2F5;
+padding-left:18px;
+padding-right:18px;
+width:auto;
+}
+
+p,label,
+h1,h2,h3,h4,h5,h6 {
+color:#000;
+}
+
+#content {
+width:95%;
+}
+
+#site_nav_local_views a {
+background-color:#D0DFE7;
+}
+#site_nav_local_views a:hover {
+background-color:#FAFBFC;
+}
+
+span.facebook-button {
+border: 2px solid #aaa;
+padding: 3px;
+display: block;
+float: left;
+margin-right: 20px;
+-moz-border-radius: 4px; 
+border-radius:4px; 
+-webkit-border-radius:4px;
+font-weight: bold;
+background-color:#A9BF4F;
+color:#fff;
+font-size:1.2em
+}
 
 span.facebook-button a { color:#fff }
 
+.facebook_guide {
+margin-bottom:18px;
+}
+.facebook_guide p {
+font-weight:bold;
+}
+
+
+input {
+height:auto !important;
+}
+
+#facebook-friends {
+float:left;
+width:100%;
+}
+
+#facebook-friends li {
+float:left;
+margin-right:2%;
+margin-bottom:11px;
+width:18%;
+height:115px;
+}
+#facebook-friends li a {
+float:left;
+}
+
+#add_to_profile {
+position:absolute;
+right:18px;
+top:10px;
+z-index:2;
+}
+
 .notice div.entry-content dl,
 .notice div.entry-content dt, 
 .notice div.entry-content dd {
@@ -19,12 +95,6 @@ margin-bottom:18px;
 list-style-type:none;
 }
 
-.facebook_guide p {
-margin-bottom:18px;
-font-size:1.3em;
-font-weight:bold;
-}
-
 .form_settings label {
 margin-right:18px;
 }