move notification icon to be visible outside the account menu

app/assets/stylesheets/application.scss.erb

@@ -826,7 +826,7 @@ label {
     position:absolute;
     pointer-events:none;
     background-repeat:no-repeat;
-    background-image: url(<%= asset_data_uri('user_sprite.png') %>);
+    background-image: url(<%= asset_path('user_sprite.png') %>);
 }
 .accountSettings .accountIcon {
     background-position: 0 0;
@@ -837,9 +837,6 @@ label {
 .accountApps .accountIcon {
     background-position: 0 -32px;
 }
-.accountNotifications .accountIcon {
-    background-position: 0 -128px;
-}
 .accountInvite .accountIcon {
     background-position: 0 -64px;
 }
@@ -854,12 +851,6 @@ label {
 .accountListItem:hover a {
     color: #424242;
 }
-.accountNotifications {
-    position: relative;
-}
-.accountNotifications.unread a {
-    font-weight: 900;
-}
 .accountListItem:hover .accountIcon {
     background-position-x: -32px;
 }
@@ -867,16 +858,6 @@ li.accountInvite span {
     display: block;
     padding: 9px 0 9px 62px;
 }
-$unread_notifications_dot_size: 8px;
-.unread-notifications-dot {
-  width: $unread_notifications_dot_size;
-  height: $unread_notifications_dot_size;
-  background-color: #e22;
-  border-radius: $unread_notifications_dot_size / 2;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
 .accountImage {
     background-image: url(<%= asset_data_uri 'user.png' %>);
     background-size: 84px 84px;

app/assets/stylesheets/clean.css.erb

@@ -210,7 +210,10 @@
 }
 .addMap {
     background-position: -96px 0;
-    margin-right:10px;
+}
+.notificationsIcon {
+    background-position: -128px 0;
+    margin-right: 10px; // make it look more natural next to the account menu icon
 }
 .importDialog:hover {
     background-position: 0 -32px;
@@ -758,7 +761,7 @@
 }
 
 .exploreMapsCenter .authedApps .exploreMapsIcon {
-    background-image: url(<%= asset_data_uri('user_sprite.png') %>);
+    background-image: url(<%= asset_path('user_sprite.png') %>);
     background-position: 0 -32px;
 }
 .exploreMapsCenter .myMaps .exploreMapsIcon {

app/assets/stylesheets/mobile.scss.erb

@@ -213,7 +213,7 @@
   line-height: 50px;
 }
 
-#menu_icon .unread-notifications-dot {
+#mobile_header #menu_icon .unread-notifications-dot {
   top: 5px;
   left: 29px;
   width: 12px;

app/assets/stylesheets/notifications.scss.erb

@@ -1,3 +1,20 @@
+$unread_notifications_dot_size: 8px;
+.unread-notifications-dot {
+  width: $unread_notifications_dot_size;
+  height: $unread_notifications_dot_size;
+  background-color: #e22;
+  border-radius: $unread_notifications_dot_size / 2;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.upperRightUI {
+  .notificationsIcon {
+    position: relative;
+  }
+}
+
 .controller-notifications {
   ul.notifications {
     list-style: none;

app/views/layouts/_account.html.erb

@@ -8,16 +8,6 @@
   <%= image_tag account.image.url(:sixtyfour), :size => "48x48", :class => "sidebarAccountImage" %>
   <h3 class="accountHeader"><%= account.name.split[0...1][0] %></h3>
   <ul>
-    <% if current_user.present? %>
-      <li class="accountListItem accountNotifications <%= user_has_unread_notifications? ? 'unread' : 'read' %>">
-        <div class="accountIcon">
-          <% if user_has_unread_notifications? %>
-            <div class="unread-notifications-dot"></div>
-          <% end %>
-        </div>
-        <%= link_to "Notifications", notifications_path %>
-      </li>
-    <% end %>
     <li class="accountListItem accountSettings">
       <div class="accountIcon"></div>
       <%= link_to "Account", edit_user_url(account) %>

app/views/layouts/_upperelements.html.erb

@@ -71,12 +71,20 @@
   </a><!-- end addMap -->
   <% end %>
 
+  <% if current_user.present? %>
+    <%= link_to notifications_path, target: '_blank', class: "notificationsIcon upperRightEl upperRightIcon #{user_has_unread_notifications? ? 'unread' : 'read'}" do %>
+      <div class="tooltipsUnder">
+        Notifications
+      </div>
+      <% if user_has_unread_notifications? %>
+        <div class="unread-notifications-dot"></div>
+      <% end %>
+    <% end %>
+  <% end %>
+
   <!-- Account / Sign in -->
   <% if !(controller_name == "sessions" && action_name == "new") %>
   <div class="sidebarAccount upperRightEl">
-    <% if user_has_unread_notifications? %>
-      <div class="unread-notifications-dot"></div>
-    <% end %>
     <div class="sidebarAccountIcon"><div class="tooltipsUnder">Account</div>
       <% if current_user && current_user.image %>
         <%= image_tag current_user.image.url(:thirtytwo), :size => "32x32" %>