Fixes for echo extension

Foreground.skin.php

@@ -159,6 +159,9 @@ class foregroundTemplate extends BaseTemplate {
 							<?php foreach( $this->data['content_actions'] as $key => $item ) { echo preg_replace(array('/\sprimary="1"/','/\scontext="[a-z]+"/','/\srel="archives"/'),'',$this->makeListItem($key, $item)); } ?>
 							<?php wfRunHooks( SkinTemplateToolboxEnd, array( &$this, true ) );  ?>
 						</ul>
+						<?php if ($wgUser->isLoggedIn()): ?>
+							<div id="echo-notifications"></div>
+						<?php endif; ?>
 					<?php endif;
 					$namespace = str_replace('_', ' ', $this->getSkin()->getTitle()->getNsText());
 					$displaytitle = $this->data['title'];

assets/scripts/foreground.js

@@ -8,6 +8,12 @@ jQuery(document).ready(function() {
     // console.log(response.errors); < this line will produce error in ie9!
     if (window.console) console.log(response.errors);
   });
+  
+  // 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 and loaded earlier to speed up transform
+  jQuery("#pt-notifications").prependTo("#echo-notifications");
+  
+  // Add classes for font-awesome
 
   jQuery('[id^=ca-nstab] a').addClass('fa fa-file fa-fw').text(' ' + jQuery('[id^=ca-nstab] a').text());
   jQuery('li#ca-talk a').addClass('fa fa-comments fa-fw').text(' ' + jQuery('li#ca-talk a').text());
@@ -66,8 +72,4 @@ 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

@@ -624,12 +624,95 @@ body.mw-special-Userlogin h2.title {
 }
 */
 
-/* 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;
+/* Add improved styling for the Echo extension */
+
+#echo-notifications {
+  float: right;
+  display: inline-block;
+  margin: .5em 1em;
+}
+
+#echo-notifications #pt-notifications {
+  position: relative;
+  list-style: none;
+}
+
+#echo-notifications #pt-notifications .mw-echo-notifications-badge
+{
+  width: 30px;
+  height: 35px;
+  text-align: center;
+  border-radius: 6px;
+  margin: 0;
+  padding:6px;
+}
+
+#echo-notifications #pt-notifications a.mw-echo-short-link .mw-badge
+{
+  margin:0;
+  padding:6px;
+}
+
+#echo-notifications #pt-notifications .mw-badge-content {
+  font-size: 1.3em;
+  line-height: 1.1;
+}
+
+#echo-notifications .mw-echo-overlay-pokey {
+  top: 30px;
+  left: -1px;
+}
+#echo-notifications .mw-echo-overlay {
+  left: -185px;
+  width: 300px;
+  top: 40px;
+}
+
+#echo-notifications .mw-echo-overlay-title {
+  padding: 10px;
+}
+
+#echo-notifications .mw-echo-icon {
+  margin: 5px;
+}
+
+#echo-notifications a.mw-echo-short-link .mw-badge {
+  margin-left: 0;
+}
+
+#echo-notifications #mw-echo-overlay-pref-link {
+  background-image:none;
+  font-size: 14px;
+  padding-left:0;
+  border-left:none;
+}
+
+#echo-notifications #mw-echo-overlay-link {
+  padding: 10px 0px 10px 15px;
+  background-position: left 50%;
+  border-right: none;
+  margin-right:0;
+}
+
+#echo-notifications .mw-echo-dismiss {
+  padding: 10px;
+  font-size: .8em;
+  min-width: 100%;
 }
+
+#echo-notifications .mw-echo-notification {
+  overflow: visible;
+}
+
+#echo-notifications .mw-echo-title {
+  max-width: 99%;
+}
+
+/* Make Echo extension more mobile friendly on small widths */
+
+@media only screen and (min-width: 550px) {
+#echo-notifications .mw-echo-overlay { left: -420px; width: 450px; }
+#echo-notifications #mw-echo-overlay-pref-link { padding: 10px 0 10px 30px; }
+#echo-notifications #mw-echo-overlay-link { border-right: 1px solid #DDDDDD; margin-right: 2em; }
+}
+