More improvements for echo notifications and the placement of them

Pivot.skin.php

@@ -180,6 +180,12 @@ class pivotTemplate extends BaseTemplate {
 								
 									<div class="row">
 										<div class="large-12 columns">
+												<?php if ($wgUser->isLoggedIn()): ?>
+												<div id="echo-notifications">
+												<div id="echo-notifications-alerts"></div>
+												<div id="echo-notifications-messages"></div>
+												</div>
+												<?php endif; ?>
 												<!--[if lt IE 9]>
 												<div id="siteNotice" class="sitenotice panel radius"><?php echo $this->text('sitename') . ' '. wfMessage( 'pivot-browsermsg' )->text(); ?></div>
 												<![endif]-->
@@ -195,12 +201,7 @@ class pivotTemplate extends BaseTemplate {
 											<?php foreach($this->data['content_actions'] as $key => $tab) { echo preg_replace(array('/\sprimary="1"/', '/\scontext="[a-z]+"/', '/\srel="archives"/'),'',$this->makeListItem($key, $tab)); } ?>
 											<?php wfRunHooks( 'SkinTemplateToolboxEnd', array( &$this, true ));  ?>
 										</ul>
-										<?php if ($wgUser->isLoggedIn()): ?>
+
-											<div id="echo-notifications">
-											<div id="echo-notifications-alerts"></div>
-											<div id="echo-notifications-messages"></div>
-											</div>
-										<?php endif; ?>
 									<?php endif;
 									$namespace = str_replace('_', ' ', $this->getSkin()->getTitle()->getNsText());
 									$displaytitle = $this->data['title'];

assets/scripts/pivot.js

@@ -11,7 +11,6 @@ jQuery(document).ready(function() {
   
   // 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-alerts");
   jQuery("#pt-notifications-message").prependTo("#echo-notifications-messages");
   jQuery("#pt-notifications-alert").prependTo("#echo-notifications-alerts");
   

assets/stylesheets/pivot.css

@@ -758,42 +758,23 @@ div.mw-htmlform-field-HTMLCheckField div.mw-label { height:0; }
 #p-toolboxend { display:none;}
 
 
-/* Jamie's Header Hider */
+/* Sitenotice */
-body.page-Main_Page h1.firstHeading,
-body.page-Main_Page #siteSub,
-body.page-Extension_Main_Page h1.firstHeading,
-body.page-Extension_Main_Page #siteSub,
-body.page-Skin_Main_Page h1.firstHeading,
-body.page-Skin_Main_Page #siteSub,
-body.page-Farm_Main_Pageh1.firstHeading,
-body.page-Farm_Main_Page #siteSub,
-body.mw-special-Userlogin h2.title {
-  display:none;
-}
 
-/* Don't like the black top bar? Copy this into your Common.css and change the colors
+#siteNotice {
-.top-bar,
+    display: block;
-.top-bar-section ul,
+    margin-top: 1.5em;
-.top-bar-section ul li.active > a,
+    margin-bottom: .25em;
-.top-bar-section li a:not(.button),
-.top-bar-section .has-form,
-.top-bar.expanded .title-area  {
-   background: black;
-   color: white;
 }
 
-.top-bar-section > ul > .divider,
-.top-bar-section > ul > [role="separator"] {
-  border-color: black;
-}
-*/
-
 /* Add improved styling for the Echo extension */
 
 #echo-notifications {
   float: right;
   display: inline-block;
-  margin: .5em 1em;
+  margin: -.5em 0;
+  position: relative;
+  z-index: 10000;
+  height: 23px;
 }
 
 #pt-notifications-alert .mw-echo-notifications-badge,
@@ -802,6 +783,7 @@ body.mw-special-Userlogin h2.title {
   display: inline !important;
   font-size: 1.2em;
   filter: invert(25%);
+  color: transparent;
 }
 
 #echo-notifications li {
@@ -815,78 +797,23 @@ body.mw-special-Userlogin h2.title {
   float: right;
 }
 
-#echo-notifications #pt-notifications {
+#pt-notifications-alert .mw-echo-unseen-notifications,
-  position: relative;
+#pt-notifications-message .mw-echo-unseen-notifications {
-  list-style: none;
+  color: #0645ad !important;
-}
-
-#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) {
+@media only screen and (max-width: 450px) {
-#echo-notifications .mw-echo-overlay { left: -420px; width: 450px; }
+.oo-ui-popupWidget-popup {
-#echo-notifications #mw-echo-overlay-pref-link { padding: 10px 0 10px 30px; }
+    width: auto !important;
-#echo-notifications #mw-echo-overlay-link { border-right: 1px solid #DDDDDD; margin-right: 2em; }
+    position: relative !important;
+    margin-left: -260px !important;
+    font-size: 75% !important;
+}
+.oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
+    width: 100% !important;
+}
 }
 
 /* Aside CSS */