Merge pull request #20 from duthied/master

Notifications page improvements + testbubble theme tweaks

12 files changed, 326 insertions, 130 deletions

diff --git a/include/nav.php b/include/nav.php
index 16ec941aa..600043ee5 100644
--- a/include/nav.php
+++ b/include/nav.php
@@ -114,7 +114,7 @@ function nav(&$a) {
 		/* only show friend requests for normal pages. Other page types have automatic friendship. */
 
 		if($_SESSION['page_flags'] == PAGE_NORMAL) {
-			$nav['notifications'] = array('notifications',	t('Notifications'), "", t('Friend requests'));
+			$nav['notifications'] = array('notifications/network',	t('Notifications'), "", t('Notifications'));
 		}
 
 		$nav['messages'] = array('message', t('Messages'), "", t('Private mail'));
diff --git a/js/main.js b/js/main.js
index 430f216d1..799330676 100644
--- a/js/main.js
+++ b/js/main.js
@@ -95,22 +95,15 @@
 			if(home == 0) { home = '';  $('#home-update').removeClass('show') } else { $('#home-update').addClass('show') }
 			$('#home-update').html(home);
 
-			var intro = $(data).find('intro').text();
-			if(intro == 0) { intro = '';  $('#intro-update').removeClass('show') } else { $('#intro-update').addClass('show') }
-			$('#intro-update').html(intro);
-
-			var mail = $(data).find('mail').text();
-			if(mail == 0) { mail = '';  $('#mail-update').removeClass('show') } else { $('#mail-update').addClass('show') }
-			$('#mail-update').html(mail);
-
-
-
 			var eNotif = $(data).find('notif')
 			notif = eNotif.attr('count');
 			if (notif>0){
 				$("#nav-notifications-linkmenu").addClass("on");
 				nnm = $("#nav-notifications-menu");
-				nnm.html("");
+				
+				//nnm.html("");
+				nnm.html("<li><a href='/notifications/network'>Show All Notifications</a></li>");
+				
 				//nnm.attr('popup','true');
 				eNotif.children("note").each(function(){
 					e = $(this);
@@ -118,6 +111,7 @@
 					html = notifications_tpl.format(e.attr('href'),e.attr('photo'), text, e.attr('date'));
 					nnm.append(html);
 				});
+				
 			} else {
 				$("#nav-notifications-linkmenu").removeClass("on");
 				$("#nav-notifications-menu").html(notifications_empty);
@@ -164,15 +158,6 @@
 	});
 
 	function NavUpdate() {
-		if(! stopped) {
-			$.get("ping",function(data) {
-				$(data).find('result').each(function() {
-					// send nav-update event
-					$('nav').trigger('nav-update', this);
-				});
-			}) ;
-		}
-
 
 		if($('#live-network').length)   { src = 'network'; liveUpdate(); }
 		if($('#live-profile').length)   { src = 'profile'; liveUpdate(); }
@@ -191,6 +176,14 @@
 			}
 		}
 
+		if(! stopped) {
+			$.get("ping",function(data) {
+				$(data).find('result').each(function() {
+					// send nav-update event
+					$('nav').trigger('nav-update', this);
+				});
+			}) ;
+		}
 		timer = setTimeout(NavUpdate,30000);
 	}
 
diff --git a/mod/notifications.php b/mod/notifications.php
index 0c35d4cd1..403efc5bd 100644
--- a/mod/notifications.php
+++ b/mod/notifications.php
@@ -64,110 +64,257 @@ function notifications_content(&$a) {
 	}
 
 	$o = '';
-	nav_set_selected("notifications");
-
-	if(($a->argc > 1) && ($a->argv[1] == 'all'))
-		$sql_extra = '';
-	else
-		$sql_extra = " AND `ignore` = 0 ";
-
-	$o .= '<h1>' . t('Pending Friend/Connect Notifications') . '</h1>' . "\r\n";
 	
-	$o .= '<div id="notification-show-hide-wrapper" >';
-	$o .= '<a href="' . ((strlen($sql_extra)) ? 'notifications/all' : 'notifications' ) . '" id="notifications-show-hide-link" >'
-		. ((strlen($sql_extra)) ? t('Show Ignored Requests') : t('Hide Ignored Requests')) . '</a></div>' . "\r\n";
-
-
-	$r = q("SELECT COUNT(*)	AS `total` FROM `intro` 
-		WHERE `intro`.`uid` = %d $sql_extra AND `intro`.`blocked` = 0 ",
-			intval($_SESSION['uid'])
-	);
-	if($r && count($r)) {
-		$a->set_pager_total($r[0]['total']);
-		$a->set_pager_itemspage(20);
-	}
-
-	$r = q("SELECT `intro`.`id` AS `intro_id`, `intro`.*, `contact`.*, `fcontact`.`name` AS `fname`,`fcontact`.`url` AS `furl`,`fcontact`.`photo` AS `fphoto`,`fcontact`.`request` AS `frequest`
-		FROM `intro` LEFT JOIN `contact` ON `contact`.`id` = `intro`.`contact-id` LEFT JOIN `fcontact` ON `intro`.`fid` = `fcontact`.`id`
-		WHERE `intro`.`uid` = %d $sql_extra AND `intro`.`blocked` = 0 ",
-			intval($_SESSION['uid']));
-
-	if(($r !== false) && (count($r))) {
-
-		$sugg = get_markup_template('suggestions.tpl');
-		$tpl = get_markup_template("intros.tpl");
-
-		foreach($r as $rr) {
-			if($rr['fid']) {
+	if( (($a->argc > 1) && ($a->argv[1] == 'intros')) || (($a->argc == 1))) {
+		
+		if(($a->argc > 2) && ($a->argv[2] == 'all'))
+			$sql_extra = '';
+		else
+			$sql_extra = " AND `ignore` = 0 ";
+		
+		$notif_tpl = get_markup_template('notifications.tpl');
+		
+		$notif_content .= '<a href="' . ((strlen($sql_extra)) ? 'notifications/intros/all' : 'notifications/intros' ) . '" id="notifications-show-hide-link" >'
+			. ((strlen($sql_extra)) ? t('Show Ignored Requests') : t('Hide Ignored Requests')) . '</a></div>' . "\r\n";
+
+		$r = q("SELECT COUNT(*)	AS `total` FROM `intro` 
+			WHERE `intro`.`uid` = %d $sql_extra AND `intro`.`blocked` = 0 ",
+				intval($_SESSION['uid'])
+		);
+		if($r && count($r)) {
+			$a->set_pager_total($r[0]['total']);
+			$a->set_pager_itemspage(20);
+		}
 
-				$return_addr = bin2hex($a->user['nickname'] . '@' . $a->get_hostname() . (($a->path) ? '/' . $a->path : ''));
-				$o .= replace_macros($sugg,array(
+		$r = q("SELECT `intro`.`id` AS `intro_id`, `intro`.*, `contact`.*, `fcontact`.`name` AS `fname`,`fcontact`.`url` AS `furl`,`fcontact`.`photo` AS `fphoto`,`fcontact`.`request` AS `frequest`
+			FROM `intro` LEFT JOIN `contact` ON `contact`.`id` = `intro`.`contact-id` LEFT JOIN `fcontact` ON `intro`.`fid` = `fcontact`.`id`
+			WHERE `intro`.`uid` = %d $sql_extra AND `intro`.`blocked` = 0 ",
+				intval($_SESSION['uid']));
+
+		if(($r !== false) && (count($r))) {
+
+			$sugg = get_markup_template('suggestions.tpl');
+			$tpl = get_markup_template("intros.tpl");
+
+			foreach($r as $rr) {
+				if($rr['fid']) {
+
+					$return_addr = bin2hex($a->user['nickname'] . '@' . $a->get_hostname() . (($a->path) ? '/' . $a->path : ''));
+					$notif_content .= replace_macros($sugg,array(
+						'$str_notifytype' => t('Notification type: '),
+						'$notify_type' => t('Friend Suggestion'),
+						'$intro_id' => $rr['intro_id'],
+						'$madeby' => sprintf( t('suggested by %s'),$rr['name']),
+						'$contact_id' => $rr['contact-id'],
+						'$photo' => ((x($rr,'fphoto')) ? $rr['fphoto'] : "images/default-profile.jpg"),
+						'$fullname' => $rr['fname'],
+						'$url' => $rr['furl'],
+						'$knowyou' => $knowyou,
+						'$approve' => t('Approve'),
+						'$note' => $rr['note'],
+						'$request' => $rr['frequest'] . '?addr=' . $return_addr,
+						'$ignore' => t('Ignore'),
+						'$discard' => t('Discard')
+
+					));
+
+					continue;
+
+				}
+				$friend_selected = (($rr['network'] !== NETWORK_OSTATUS) ? ' checked="checked" ' : ' disabled ');
+				$fan_selected = (($rr['network'] === NETWORK_OSTATUS) ? ' checked="checked" disabled ' : '');
+				$dfrn_tpl = get_markup_template('netfriend.tpl');
+
+				$knowyou   = '';
+				$dfrn_text = '';
+
+				if($rr['network'] === NETWORK_DFRN || $rr['network'] === NETWORK_DIASPORA) {
+					if($rr['network'] === NETWORK_DFRN)
+						$knowyou = t('Claims to be known to you: ') . (($rr['knowyou']) ? t('yes') : t('no'));
+					else
+						$knowyou = '';
+					$dfrn_text = replace_macros($dfrn_tpl,array(
+						'$intro_id' => $rr['intro_id'],
+						'$friend_selected' => $friend_selected,
+						'$fan_selected' => $fan_selected,
+						'$approve_as' => t('Approve as: '),
+						'$as_friend' => t('Friend'),
+						'$as_fan' => (($rr['network'] == NETWORK_DIASPORA) ? t('Sharer') : t('Fan/Admirer'))
+					));
+				}			
+
+				$notif_content .= replace_macros($tpl,array(
 					'$str_notifytype' => t('Notification type: '),
-					'$notify_type' => t('Friend Suggestion'),
+					'$notify_type' => (($rr['network'] !== NETWORK_OSTATUS) ? t('Friend/Connect Request') : t('New Follower')),
+					'$dfrn_text' => $dfrn_text,	
+					'$dfrn_id' => $rr['issued-id'],
+					'$uid' => $_SESSION['uid'],
 					'$intro_id' => $rr['intro_id'],
-					'$madeby' => sprintf( t('suggested by %s'),$rr['name']),
 					'$contact_id' => $rr['contact-id'],
-					'$photo' => ((x($rr,'fphoto')) ? $rr['fphoto'] : "images/default-profile.jpg"),
-					'$fullname' => $rr['fname'],
-					'$url' => $rr['furl'],
+					'$photo' => ((x($rr,'photo')) ? $rr['photo'] : "images/default-profile.jpg"),
+					'$fullname' => $rr['name'],
+					'$url' => $rr['url'],
 					'$knowyou' => $knowyou,
 					'$approve' => t('Approve'),
 					'$note' => $rr['note'],
-					'$request' => $rr['frequest'] . '?addr=' . $return_addr,
 					'$ignore' => t('Ignore'),
 					'$discard' => t('Discard')
 
 				));
-
-				continue;
-
 			}
-			$friend_selected = (($rr['network'] !== NETWORK_OSTATUS) ? ' checked="checked" ' : ' disabled ');
-			$fan_selected = (($rr['network'] === NETWORK_OSTATUS) ? ' checked="checked" disabled ' : '');
-			$dfrn_tpl = get_markup_template('netfriend.tpl');
-
-			$knowyou   = '';
-			$dfrn_text = '';
-						
-			if($rr['network'] === NETWORK_DFRN || $rr['network'] === NETWORK_DIASPORA) {
-				if($rr['network'] === NETWORK_DFRN)
-					$knowyou = t('Claims to be known to you: ') . (($rr['knowyou']) ? t('yes') : t('no'));
-				else
-					$knowyou = '';
-				$dfrn_text = replace_macros($dfrn_tpl,array(
-					'$intro_id' => $rr['intro_id'],
-					'$friend_selected' => $friend_selected,
-					'$fan_selected' => $fan_selected,
-					'$approve_as' => t('Approve as: '),
-					'$as_friend' => t('Friend'),
-					'$as_fan' => (($rr['network'] == NETWORK_DIASPORA) ? t('Sharer') : t('Fan/Admirer'))
-				));
-			}			
-
-
-
-			$o .= replace_macros($tpl,array(
-				'$str_notifytype' => t('Notification type: '),
-				'$notify_type' => (($rr['network'] !== NETWORK_OSTATUS) ? t('Friend/Connect Request') : t('New Follower')),
-				'$dfrn_text' => $dfrn_text,	
-				'$dfrn_id' => $rr['issued-id'],
-				'$uid' => $_SESSION['uid'],
-				'$intro_id' => $rr['intro_id'],
-				'$contact_id' => $rr['contact-id'],
-				'$photo' => ((x($rr,'photo')) ? $rr['photo'] : "images/default-profile.jpg"),
-				'$fullname' => $rr['name'],
-				'$url' => $rr['url'],
-				'$knowyou' => $knowyou,
-				'$approve' => t('Approve'),
-				'$note' => $rr['note'],
-				'$ignore' => t('Ignore'),
-				'$discard' => t('Discard')
-
-			));
 		}
+		else
+			info( t('No notifications.') . EOL);
+		
+		$o .= replace_macros($notif_tpl,array(
+			'$notif_content' => $notif_content,
+			'$activetab' => 'intros'
+		));
+		
+		$o .= paginate($a);
+		return $o;
+				
+	} else if (($a->argc > 1) && ($a->argv[1] == 'network')) {
+		
+		$notif_tpl = get_markup_template('notifications.tpl');
+		
+		$r = q("SELECT `item`.`id`,`item`.`parent`, `item`.`verb`, `item`.`author-name`, 
+				`item`.`author-link`, `item`.`author-avatar`, `item`.`created`, `item`.`object`, 
+				`pitem`.`author-name` as `pname`, `pitem`.`author-link` as `plink` 
+				FROM `item` INNER JOIN `item` as `pitem` ON  `pitem`.`id`=`item`.`parent`
+				WHERE `item`.`unseen` = 1 AND `item`.`visible` = 1 AND
+				 `item`.`deleted` = 0 AND `item`.`uid` = %d AND `item`.`wall` = 0 ORDER BY `item`.`created` DESC" ,
+			intval(local_user())
+		);
+		
+		$tpl_item_likes = get_markup_template('notifications_likes_item.tpl');
+		$tpl_item_dislikes = get_markup_template('notifications_dislikes_item.tpl');
+		$tpl_item_friends = get_markup_template('notifications_friends_item.tpl');
+		$tpl_item_comments = get_markup_template('notifications_comments_item.tpl');
+		
+		$notif_content = '';
+		
+		if (count($r) > 0) {
+			
+			foreach ($r as $it) {
+				switch($it['verb']){
+					case ACTIVITY_LIKE:
+						$notif_content .= replace_macros($tpl_item_likes,array(
+							'$item_link' => $a->get_baseurl().'/display/'.$a->user['nickname']."/".$it['parent'],
+							'$item_image' => $it['author-avatar'],
+							'$item_text' => sprintf( t("%s liked %s's post"), $it['author-name'], $it['pname']),
+							'$item_when' => relative_date($it['created'])
+						));
+
+						break;
+					case ACTIVITY_DISLIKE:
+						$notif_content .= replace_macros($tpl_item_dislikes,array(
+							'$item_link' => $a->get_baseurl().'/display/'.$a->user['nickname']."/".$it['parent'],
+							'$item_image' => $it['author-avatar'],
+							'$item_text' => sprintf( t("%s liked %s's post"), $it['author-name'], $it['pname']),
+							'$item_when' => relative_date($it['created'])
+						));
+
+						break;
+					case ACTIVITY_FRIEND:
+						$notif_content .= replace_macros($tpl_item_friends,array(
+							'$item_link' => $a->get_baseurl().'/display/'.$a->user['nickname']."/".$it['parent'],
+							'$item_image' => $it['author-avatar'],
+							'$item_text' => sprintf( t("%s is now friend with %s"), $it['author-name'], $it['fname']),
+							'$item_when' => relative_date($it['created'])
+						));
+
+						break;
+					default:
+						$notif_content .= replace_macros($tpl_item_comments,array(
+							'$item_link' => $a->get_baseurl().'/display/'.$a->user['nickname']."/".$it['parent'],
+							'$item_image' => $it['author-avatar'],
+							'$item_text' => sprintf( t("%s commented %s's post"), $it['author-name'], $it['pname']),
+							'$item_when' => relative_date($it['created'])
+						));
+				}
+			}
+			
+		} else {
+			
+			$notif_content = 'Nothing new!';
+		}
+		
+		$o .= replace_macros($notif_tpl,array(
+			'$notif_content' => $notif_content,
+			'$activetab' => 'network'
+		));
+		
+	} else if (($a->argc > 1) && ($a->argv[1] == 'home')) {
+		
+		$notif_tpl = get_markup_template('notifications.tpl');
+		
+		$r = q("SELECT `item`.`id`,`item`.`parent`, `item`.`verb`, `item`.`author-name`, 
+				`item`.`author-link`, `item`.`author-avatar`, `item`.`created`, `item`.`object`, 
+				`pitem`.`author-name` as `pname`, `pitem`.`author-link` as `plink` 
+				FROM `item` INNER JOIN `item` as `pitem` ON  `pitem`.`id`=`item`.`parent`
+				WHERE `item`.`unseen` = 1 AND `item`.`visible` = 1 AND
+				 `item`.`deleted` = 0 AND `item`.`uid` = %d AND `item`.`wall` = 1 ORDER BY `item`.`created` DESC",
+			intval(local_user())
+		);
+		
+		$tpl_item_likes = get_markup_template('notifications_likes_item.tpl');
+		$tpl_item_dislikes = get_markup_template('notifications_dislikes_item.tpl');
+		$tpl_item_friends = get_markup_template('notifications_friends_item.tpl');
+		$tpl_item_comments = get_markup_template('notifications_comments_item.tpl');
+		
+		$notif_content = '';
+		
+		if (count($r) > 0) {
+			
+			foreach ($r as $it) {
+				switch($it['verb']){
+					case ACTIVITY_LIKE:
+						$notif_content .= replace_macros($tpl_item_likes,array(
+							'$item_link' => $a->get_baseurl().'/display/'.$a->user['nickname']."/".$it['parent'],
+							'$item_image' => $it['author-avatar'],
+							'$item_text' => sprintf( t("%s liked %s's post"), $it['author-name'], $it['pname']),
+							'$item_when' => relative_date($it['created'])
+						));
+
+						break;
+					case ACTIVITY_DISLIKE:
+						$notif_content .= replace_macros($tpl_item_dislikes,array(
+							'$item_link' => $a->get_baseurl().'/display/'.$a->user['nickname']."/".$it['parent'],
+							'$item_image' => $it['author-avatar'],
+							'$item_text' => sprintf( t("%s liked %s's post"), $it['author-name'], $it['pname']),
+							'$item_when' => relative_date($it['created'])
+						));
+
+						break;
+					case ACTIVITY_FRIEND:
+						$notif_content .= replace_macros($tpl_item_friends,array(
+							'$item_link' => $a->get_baseurl().'/display/'.$a->user['nickname']."/".$it['parent'],
+							'$item_image' => $it['author-avatar'],
+							'$item_text' => sprintf( t("%s is now friend with %s"), $it['author-name'], $it['fname']),
+							'$item_when' => relative_date($it['created'])
+						));
+
+						break;
+					default:
+						$notif_content .= replace_macros($tpl_item_comments,array(
+							'$item_link' => $a->get_baseurl().'/display/'.$a->user['nickname']."/".$it['parent'],
+							'$item_image' => $it['author-avatar'],
+							'$item_text' => sprintf( t("%s commented %s's post"), $it['author-name'], $it['pname']),
+							'$item_when' => relative_date($it['created'])
+						));
+				}
+			}
+				
+		} else {
+			$notif_content = 'Nothing new!';
+		}
+		
+		$o .= replace_macros($notif_tpl,array(
+			'$notif_content' => $notif_content,
+			'$activetab' => 'home'
+		));
 	}
-	else
-		info( t('No notifications.') . EOL);
 
 	$o .= paginate($a);
 	return $o;
diff --git a/view/nav.tpl b/view/nav.tpl
index cf1c2a227..b6caa2c23 100644
--- a/view/nav.tpl
+++ b/view/nav.tpl
@@ -43,6 +43,7 @@
 			<li  id="nav-notifications-linkmenu" class="nav-menu-icon"><a href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1"><span class="icon s22 notify">$nav.notifications.1</span></a>
 				<span id="notify-update" class="nav-notify"></span>
 				<ul id="nav-notifications-menu" class="menu-popup">
+					<li id="nav-notifications-see-all"><a href="/notifications/network">See all notifications</a></li>
 					<li class="empty">$emptynotifications</li>
 				</ul>
 			</li>		
diff --git a/view/notifications.tpl b/view/notifications.tpl
new file mode 100644
index 000000000..8656ea9d1
--- /dev/null
+++ b/view/notifications.tpl
@@ -0,0 +1,13 @@
+
+<h1>Notifications</h1>
+
+<p id="notification-listing-desc">
+	<a href="/notifications/network" class="button tabs {{if $activetab==network}}active{{endif}}">Network</a>
+	<a href="/notifications/home" class="button tabs {{if $activetab==home}}active{{endif}}">Home</a>
+	<a href="/notifications/intros" class="button tabs {{if $activetab==intros}}active{{endif}}">Introductions</a>
+	<a href="/message" class="button tabs">Messages</a>
+</p>
+
+<div class="notif-network-wrapper">
+	$notif_content
+</div>
diff --git a/view/notifications_comments_item.tpl b/view/notifications_comments_item.tpl
new file mode 100644
index 000000000..96327b2d8
--- /dev/null
+++ b/view/notifications_comments_item.tpl
@@ -0,0 +1,3 @@
+<div class="notif-item">
+	<a href="$item_link"><img src="$item_image" class="notif-image">$item_text <span class="notif-when">$item_when</span></a>
+</div>
\ No newline at end of file
diff --git a/view/notifications_dislikes_item.tpl b/view/notifications_dislikes_item.tpl
new file mode 100644
index 000000000..96327b2d8
--- /dev/null
+++ b/view/notifications_dislikes_item.tpl
@@ -0,0 +1,3 @@
+<div class="notif-item">
+	<a href="$item_link"><img src="$item_image" class="notif-image">$item_text <span class="notif-when">$item_when</span></a>
+</div>
\ No newline at end of file
diff --git a/view/notifications_friends_item.tpl b/view/notifications_friends_item.tpl
new file mode 100644
index 000000000..96327b2d8
--- /dev/null
+++ b/view/notifications_friends_item.tpl
@@ -0,0 +1,3 @@
+<div class="notif-item">
+	<a href="$item_link"><img src="$item_image" class="notif-image">$item_text <span class="notif-when">$item_when</span></a>
+</div>
\ No newline at end of file
diff --git a/view/notifications_likes_item.tpl b/view/notifications_likes_item.tpl
new file mode 100644
index 000000000..96327b2d8
--- /dev/null
+++ b/view/notifications_likes_item.tpl
@@ -0,0 +1,3 @@
+<div class="notif-item">
+	<a href="$item_link"><img src="$item_image" class="notif-image">$item_text <span class="notif-when">$item_when</span></a>
+</div>
\ No newline at end of file
diff --git a/view/notifications_network_item.tpl b/view/notifications_network_item.tpl
new file mode 100644
index 000000000..f398f1210
--- /dev/null
+++ b/view/notifications_network_item.tpl
@@ -0,0 +1,3 @@
+<div class="notif-item">
+	<a href="{$item_link}"><img src="{$item_image}" class="notif-image">{$item_text} <span class="notif-when">{$item_when}</span></a>
+</div>
\ No newline at end of file
diff --git a/view/theme/testbubble/nav.tpl b/view/theme/testbubble/nav.tpl
index baf5f7d30..3fbd73e31 100644
--- a/view/theme/testbubble/nav.tpl
+++ b/view/theme/testbubble/nav.tpl
@@ -9,6 +9,7 @@
 		{{ if $nav.notifications }}<a rel="#nav-notifications-menu" id="intro-update" class="nav-ajax-update" href="$nav.notifications.0" title="$nav.notifications.1"></a>{{ endif }}
 		{{ if $nav.messages }}<a rel="#nav-notifications-menu" id="mail-update" class="nav-ajax-update" href="$nav.messages.0" title="$nav.messages.1"></a>{{ endif }}
 		<ul id="nav-notifications-menu" class="menu-popup">
+			<li id="nav-notifications-see-all"><a href="/notifications/network">See all notifications</a></li>
 			<li class="empty">$emptynotifications</li>
 		</ul>
 	</div>
@@ -54,5 +55,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<a href="{0}"><li>{2} <span class="notif-when">{3}</span></li></a>
+	<li><a href="{0}">{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/testbubble/style.css b/view/theme/testbubble/style.css
index 5e31a2c8a..fd7482ba3 100644
--- a/view/theme/testbubble/style.css
+++ b/view/theme/testbubble/style.css
@@ -25,7 +25,7 @@ body {
 	font-family: freesans,helvetica,arial,clean,sans-serif;
 	font-size: 15px;
 	color: #626262;
-	width: 100%;
+	width: 100%;	
 }
 
 img {  border: 0 none; max-width: 550px; }
@@ -113,10 +113,13 @@ input[type=submit]:active {
 ::-moz-selection { background:#fdf795; color: #000; /* Firefox */ }
 
 section {
-	margin: 20px 11% 0px 11%;
+	float: left;
+	margin-left: 8%;
+	padding-top: 50px;
+	width: 50%;	
+	margin: 20px 0px 30px 10%;
 	font-size: 0.9em;
 	line-height: 1.2em;
-	padding-right: 230px;
 }
 
 .lframe {
@@ -256,9 +259,11 @@ section {
 /* ======= */
 
 nav {
+	z-index: 10000;
 	height: 50px;
 	display: block;
-	position: relative;
+	position: fixed;
+	width: 100%;
 	padding: 0px 10%;
 	color: #efefef;
 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c7d7b), color-stop(1, #555753) );
@@ -273,7 +278,7 @@ nav a:hover { text-decoration: none;	color: #eeeeec; border:0px;}
 nav #banner {
 	display: block;
 	position: absolute;
-	margin-left: 20px;
+	margin-left: 10px;
 	margin-top: 5px;
 	padding-bottom:5px;	
 }
@@ -288,7 +293,7 @@ nav #user-menu {
     display: block;	
 	width: 250px;
     float: right;
-	margin-right:15px;
+	margin-right:20%;
     margin-top: 10px;
 	padding: 5px;
     position: relative;
@@ -361,7 +366,7 @@ ul#user-menu-popup li a.nav-sep { border-top: 1px solid #989898; border-style:in
 #notifications {
 	height: 32px;
 	position: absolute;
-	top:10px; left: 40%;
+	top:10px; left: 35%;
 }
 .nav-ajax-update {
 	width: 44px;
@@ -431,10 +436,11 @@ ul#user-menu-popup li a.nav-sep { border-top: 1px solid #989898; border-style:in
 /* ================= */
 
 aside {
-    position: absolute;
-    right: 11%;
-	width: 260px;
-	margin-top: auto;
+	float: right;
+    margin-right: 10%;
+	/*width: 21%;*/
+	width: 250px;
+	margin-top: 50px;
     font-size: 0.8em;
 	font-style: bold;
 }
@@ -475,16 +481,15 @@ aside a{
 
 aside h4 { font-size: 1.3em; }
 
-aside #viewcontacts {
+.allcontact-link {
+	color: #626262;
 	text-align: center;
 	font-weight: bold;
 	font-variant:small-caps;
 	font-size: 1.1em;
-	padding-top: 5px;
 }
-
-#viewcontacts a {
-	color: #898989;
+.allcontact-link a {
+	padding-bottom: 10px;
 }
 
 #profile-extra-links ul { margin-left: 0px; padding-left: 0px; list-style: none; }
@@ -841,7 +846,7 @@ profile-jot-banner-wrapper {
 /* ========= */
 
 .wall-item-outside-wrapper {
-	max-width: 83%;
+	max-width: 93%;
 	border-bottom: 1px solid #dedede;
 	margin-top: 20px;
 	padding-right: 10px;
@@ -2341,6 +2346,7 @@ margin-left: 0px;
 	padding: 20px;
 	padding-top: 10px;
 	margin: 0 0px;
+	margin-bottom: 10px;
 	background-color: #fff;
 	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
 	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
@@ -3030,7 +3036,7 @@ ul.menu-popup {
 #nav-notifications-menu {
 	width: 320px;
 	max-height: 400px;
-	overflow-y: scroll;
+	overflow-y: scroll;overflow-style:scrollbar;
 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #797979), color-stop(1, #898988) );
 	background:-moz-linear-gradient( center top, #797979 5%, #898988 100% );
 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#797979', endColorstr='#898988');
@@ -3049,7 +3055,7 @@ ul.menu-popup {
 #nav-notifications-menu img { float: left; margin-right: 5px; }
 #nav-notifications-menu .notif-when { font-size: 0.8em; display: block; }
 #nav-notifications-menu li {
-	padding: 7px 10px 7px 10px;
+	padding: 7px 0px 7px 10px;
 	word-wrap:normal;
 	border-bottom: 1px solid #626262;
 }
@@ -3060,3 +3066,23 @@ ul.menu-popup {
 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
 	background-color:#b20202;
 }
+
+.notif-item a {
+	vertical-align: middle;
+	color: #626262;
+	padding-bottom: 7px;
+}
+
+.notif-item a:hover {
+	color: #b20202;
+}
+
+.notif-image {
+	width: 32px;
+	height: 32px;
+	padding: 7px 7px 0px 0px;
+}
+
+#jGrowl {
+	z-index: 20000;
+}
\ No newline at end of file