glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

notification dot for mobile

Browse source
This commit is contained in:
Devin Howard 2016-11-24 16:48:44 -05:00
parent 93ad92f7e8
commit 1e6d96fce2
3 changed files with 34 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/assets/stylesheets/mobile.scss.erb
View file

@ -213,6 +213,15 @@
line-height: 50px; line-height: 50px;
} }
#menu_icon .unread-notifications-dot {
top: 5px;
left: 29px;
width: 12px;
height: 12px;
border: 3px solid #eee;
border-radius: 9px;
}
#mobile_menu { #mobile_menu {
display: none; display: none;
background: #EEE; background: #EEE;
@ -223,29 +232,19 @@
width: 200px; width: 200px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16); box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16);
#menu_icon .unread-notifications-dot {
top: 5px;
left: 29px;
width: 12px;
height: 12px;
border: 3px solid #eee;
}
li { li {
padding: 10px; padding: 10px;
list-style: none; list-style: none;
&.notifications { &.notifications {
position: relative; position: relative;
}
.unread-notifications-dot { .unread-notifications-dot {
top: 4px; top: 17px;
right: 4px; left: 0px;
}
} }
} }
} }
/* /*

20
app/views/layouts/_account.html.erb
View file

@ -8,6 +8,16 @@
<%= image_tag account.image.url(:sixtyfour), :size => "48x48", :class => "sidebarAccountImage" %> <%= image_tag account.image.url(:sixtyfour), :size => "48x48", :class => "sidebarAccountImage" %>
<h3 class="accountHeader"><%= account.name.split[0...1][0] %></h3> <h3 class="accountHeader"><%= account.name.split[0...1][0] %></h3>
<ul> <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"> <li class="accountListItem accountSettings">
<div class="accountIcon"></div> <div class="accountIcon"></div>
<%= link_to "Account", edit_user_url(account) %> <%= link_to "Account", edit_user_url(account) %>
@ -22,16 +32,6 @@
<div class="accountIcon"></div> <div class="accountIcon"></div>
<%= link_to "Apps", oauth_authorized_applications_path %> <%= link_to "Apps", oauth_authorized_applications_path %>
</li> </li>
<% 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 accountInvite openLightbox" data-open="invite"> <li class="accountListItem accountInvite openLightbox" data-open="invite">
<div class="accountIcon"></div> <div class="accountIcon"></div>
<span>Share Invite</span> <span>Share Invite</span>

12
app/views/layouts/_mobilemenu.html.erb
View file

@ -2,7 +2,11 @@
<div id="header_content"> <div id="header_content">
<%= yield(:mobile_title) %> <%= yield(:mobile_title) %>
</div> </div>
<div id="menu_icon"></div> <div id="menu_icon">
<% if user_has_unread_notifications? %>
<div class="unread-notifications-dot"></div>
<% end %>
</div>
</div> </div>
<div id="mobile_menu"> <div id="mobile_menu">
<ul> <ul>
@ -49,6 +53,12 @@
<li> <li>
<%= link_to "Account", edit_user_url(current_user) %> <%= link_to "Account", edit_user_url(current_user) %>
</li> </li>
<li class="notifications">
<%= link_to "Notifications", notifications_path %>
<% if user_has_unread_notifications? %>
<div class="unread-notifications-dot"></div>
<% end %>
</li>
<li> <li>
<%= link_to "Sign Out", "/logout", id: "Logout" %> <%= link_to "Sign Out", "/logout", id: "Logout" %>
</li> </li>