Added initial support to display the Echo extension better

Foreground.skin.php

@@ -42,7 +42,7 @@ class foregroundTemplate extends BaseTemplate {
 
 						<section class="top-bar-section">
 
-		    		<ul class="left">
+		    		<ul id="top-bar-left" class="left">
 		 						<li class="divider"></li>
 									<?php foreach ( $this->getSidebar() as $boxName => $box ) { if ( ($box['header'] != "Toolbox") && ($box['header'] != "Tools") ) { ?>
 									<li class="has-dropdown active"  id='<?php echo Sanitizer::escapeId( $box['id'] ) ?>'<?php echo Linker::tooltip( $box['id'] ) ?>>
@@ -56,7 +56,7 @@ class foregroundTemplate extends BaseTemplate {
 									<?php } ?>
 		    		</ul>
 
-		        <ul class="right">
+		        <ul id="top-bar-right" class="right">
 			      <li class="has-form">
 		        	<form action="<?php $this->text( 'wgScript' ); ?>" id="searchform" class="mw-search">
 		        		<div class="row collapse">
@@ -81,7 +81,7 @@ class foregroundTemplate extends BaseTemplate {
 								</li>
 
 							<?php if ($wgUser->isLoggedIn()): ?>
-								<li class="has-dropdown active"><a href="#"><i class="icon-user"></i></a>
+								<li id="personal-tools-dropdown" class="has-dropdown active"><a href="#"><i class="icon-user"></i></a>
 									<ul class="dropdown">
 									<?php foreach ( $this->getPersonalTools() as $key => $item ) { echo $this->makeListItem($key, $item); } ?>
 									</ul>

assets/scripts/foreground.js

@@ -35,4 +35,8 @@ jQuery(document).ready(function() {
     jQuery('ul#drop1').removeClass('open').css('top', '-9999px').css('left', '785px');
   });
 
+  // The Echo extension puts an item in personal tools that Foreground really should have in the top menu
+  // to make this easier, we move it here
+  jQuery("#pt-notifications").prependTo("#top-bar-right");
+
 });

assets/stylesheets/foreground.css

@@ -601,3 +601,13 @@ body.mw-special-Userlogin h2.title {
   border-color: black;
 }
 */
+
+/* Add styling for the Echo extension */
+.mw-echo-notifications-badge {
+  width: 30px !important;
+  height: 35px !important;
+  text-align: center !important;
+  border-radius: 6px !important;
+  margin-top: 5px !important;
+  margin-bottom: 5px !important;
+}