scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-10 00:11:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #194 from ZmagoD/zd_SCI_531_533

Browse source 
Notification style fixes
This commit is contained in:
Zmago Devetak 2016-10-05 15:27:36 +02:00 • committed by GitHub
commit eea310514a
4 changed files with 159 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/assets/javascripts/navigation.js
View file

@ -32,6 +32,7 @@
} }
}); });
$('#count-notifications').hide(); $('#count-notifications').hide();
toggleNotificationBellPosition();
}); });
} }
@ -46,6 +47,7 @@
if ( data.notificationNmber > 0 ) { if ( data.notificationNmber > 0 ) {
notificationCount.html(data.notificationNmber); notificationCount.html(data.notificationNmber);
notificationCount.show(); notificationCount.show();
toggleNotificationBellPosition();
} else { } else {
notificationCount.hide(); notificationCount.hide();
} }
@ -54,7 +56,24 @@
}); });
} }
function toggleNotificationBellPosition() {
var notificationCount = $('#count-notifications');
var button = $('#notifications-dropdown');
if ( notificationCount.is(":hidden") ) {
button
.find('.fa-bell')
.css('position', 'relative');
} else {
button
.find('.fa-bell')
.css('position', 'absolute');
}
}
// init // init
loadDropdownNotifications(); loadDropdownNotifications();
loadUnseenNotificationsNumber(); loadUnseenNotificationsNumber();
toggleNotificationBellPosition();
})(); })();

53
app/assets/stylesheets/extend/bootstrap.scss vendored
View file

@ -57,3 +57,56 @@
.result-comment .col-xs-12 { .result-comment .col-xs-12 {
float: none; float: none;
} }
@media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
}
.navbar-fixed-top {
border-width: 0 0 1px;
top: 0;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-bottom: 10px;
padding-top: 10px;
}
.collapse.in {
display: block !important;
}
.container {
width: 100%;
}
}

47
app/assets/stylesheets/themes/scinote.scss
View file

@ -75,29 +75,20 @@ table {
#notifications-dropdown { #notifications-dropdown {
.fa-bell { .fa-bell {
font-size: 15px; font-size: 15px;
position: absolute;
} }
#count-notifications { #count-notifications {
background-color: $color-theme-primary; background-color: $color-theme-primary;
border-radius: 5px; border-radius: 5px;
color: $color-wild-sand; color: $color-wild-sand;
font-size: 12px;
font-weight: bold;
margin-left: 10px;
margin-top: -10px;
padding-left: 4px;
padding-right: 4px;
position: fixed;
z-index: 999999;
display: none; display: none;
} font-size: 11px;
} font-weight: bold;
margin-left: 12px;
@media(max-width:768px) { padding: 1px 6px;
#count-notifications { position: relative;
position: absolute !important; z-index: 999999;
margin-left: -4px !important;
margin-top: 10px !important;
} }
} }
@ -131,24 +122,36 @@ table {
} }
.text-center { .text-center {
margin-left: 10px; margin-left: 12px;
padding-top: 10px; }
.avatar {
top: 0px;
margin-top: 5px;
height: 45px;
width: 45px;
} }
.assignment { .assignment {
background-color: $color-theme-primary; background-color: $color-theme-primary;
border-radius: 50%; border-radius: 50%;
color: $color-wild-sand; color: $color-wild-sand;
font-size: 15px; display: block;
padding: 7px; font-size: 23px;
height: 45px;
padding-top: 5px;
width: 45px;
} }
.system_message { .system_message {
background-color: $color-theme-secondary; background-color: $color-theme-secondary;
border-radius: 50%; border-radius: 50%;
color: $color-wild-sand; color: $color-wild-sand;
font-size: 13px; display: block;
padding: 7px 10px; font-size: 23px;
height: 45px;
padding-top: 8px;
width: 45px;
} }
.notifications-dropdown-header { .notifications-dropdown-header {

126
app/views/shared/_navigation.html.erb
View file

@ -28,95 +28,93 @@
<li> <li>
<a href="<%= projects_path %>"> <a href="<%= projects_path %>">
<span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-home"></span>
<span class="visible-xs-inline"><%= t('nav.label.projects') %></span> <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.projects') %></span>
</a> </a>
</li> </li>
<li> <li>
<a href="<%= protocols_path %>"> <a href="<%= protocols_path %>">
<span class="glyphicon glyphicon-list-alt"></span> <span class="glyphicon glyphicon-list-alt"></span>
<span class="visible-xs-inline"><%= t('nav.label.protocols') %></span> <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.protocols') %></span>
</a> </a>
</li> </li>
<% if false %> <% if false %>
<li> <li>
<a href="#"> <a href="#">
<span class="glyphicon glyphicon-calendar"></span> <span class="glyphicon glyphicon-calendar"></span>
<span class="visible-xs-inline"><%= t('nav.label.calendar') %></span> <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.calendar') %></span>
</a> </a>
</li> </li>
<% end %> <% end %>
<li> <li>
<a class="btn-activity" href="<%= activities_path(format: :json) %>" role="button" data-remote="true"> <a class="btn-activity" href="<%= activities_path(format: :json) %>" role="button" data-remote="true">
<span class="glyphicon glyphicon-equalizer"></span> <span class="glyphicon glyphicon-equalizer"></span>
<span class="visible-xs-inline"><%= t('nav.label.activities') %></span> <span class="visible-xs-inline visible-sm-inline"><%= t('nav.label.activities') %></span>
</a> </a>
</li> </li>
</ul> </ul>
<div> <!-- profile info -->
<!-- profile info --> <ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right"> <li class="dropdown">
<li class="dropdown"> <a href="#"
<a href="#" id="notifications-dropdown"
id="notifications-dropdown" class="dropdown-toggle"
class="dropdown-toggle" data-toggle="dropdown"
data-toggle="dropdown" role="button"
role="button" aria-haspopup="true"
aria-haspopup="true" aria-expanded="false"
aria-expanded="false" data-href="<%= recent_notifications_url(current_user) %>">
data-href="<%= recent_notifications_url(current_user) %>"> <%= fa_icon 'bell'%>
<%= fa_icon 'bell'%> <span id="count-notifications"
<span id="count-notifications" data-href="<%= unseen_notification_url(current_user) %>"></span>
data-href="<%= unseen_notification_url(current_user) %>"></span> </a>
</a> <ul class="dropdown-menu dropdown-notifications">
<ul class="dropdown-menu dropdown-notifications"> <li class="notifications-dropdown-header"><span><%= t('notifications.title') %></span><span class="pull-right"><%= t('nav.user.settings') %></span></li>
<li class="notifications-dropdown-header"><span><%= t('notifications.title') %></span><span class="pull-right"><%= t('nav.user.settings') %></span></li> <li class="notifications-dropdown-footer">link to method goes here</li>
<li class="notifications-dropdown-footer">link to method goes here</li> </ul>
</ul> </li>
</li> <li class="dropdown">
<li class="dropdown"> <a href="#" id="help-link" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<a href="#" id="help-link" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-info-sign"></span>
<span class="glyphicon glyphicon-info-sign"></span> </a>
</a> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><%= link_to t('nav.help.tutorials'), TUTORIALS_URL, target: "_blank" %></li>
<li><%= link_to t('nav.help.tutorials'), TUTORIALS_URL, target: "_blank" %></li> <li><%= link_to t('nav.help.faq'), FAQ_URL, target: "_blank" %></li>
<li><%= link_to t('nav.help.faq'), FAQ_URL, target: "_blank" %></li> <li><%= link_to t('nav.help.release_notes'), RELEASE_NOTES_URL, target: "_blank" %></li>
<li><%= link_to t('nav.help.release_notes'), RELEASE_NOTES_URL, target: "_blank" %></li> <li><%= link_to t('nav.help.support'), SUPPORT_URL, target: "_blank" %></li>
<li><%= link_to t('nav.help.support'), SUPPORT_URL, target: "_blank" %></li> <li><%= link_to t('nav.help.plans'), PLANS_URL, target: "_blank" %></li>
<li><%= link_to t('nav.help.plans'), PLANS_URL, target: "_blank" %></li> <li><%= link_to t('nav.help.contact'), CONTACT_URL, target: "_blank" %></li>
<li><%= link_to t('nav.help.contact'), CONTACT_URL, target: "_blank" %></li> </ul>
</ul> </li>
</li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span><%= t('nav.user_greeting', full_name: current_user.full_name) %></span> <span><%= t('nav.user_greeting', full_name: current_user.full_name) %></span>
<%= image_tag avatar_path(current_user, :icon_small), class: "avatar" %> <%= image_tag avatar_path(current_user, :icon_small), class: "avatar" %>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><%= link_to t('nav.user.profile'), edit_user_registration_path %></li> <li><%= link_to t('nav.user.profile'), edit_user_registration_path %></li>
<li><%= link_to t('nav.user.settings'), preferences_path %></li> <li><%= link_to t('nav.user.settings'), preferences_path %></li>
<li role="separator" class="divider"></li> <li role="separator" class="divider"></li>
<li><%= link_to t('nav.user.logout'), destroy_user_session_path, :method => :delete %></li> <li><%= link_to t('nav.user.logout'), destroy_user_session_path, :method => :delete %></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<!-- search form --> <!-- search form -->
<%= form_tag search_path, method: :get, id: 'search-bar', class: 'navbar-form navbar-right', role: 'search' do %> <%= form_tag search_path, method: :get, id: 'search-bar', class: 'navbar-form navbar-right', role: 'search' do %>
<div class="form-group"> <div class="form-group">
<div class="input-group"> <div class="input-group">
<input class="form-control" type="text" name="q" maxlength="50" placeholder="<%= t('nav.search') %>"> <input class="form-control" type="text" name="q" maxlength="50" placeholder="<%= t('nav.search') %>">
<span class="input-group-btn"> <span class="input-group-btn">
<button id="search-button" class="btn btn-default" type="submit"> <button id="search-button" class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-search"></span>
</button> </button>
</span> </span>
</div>
</div> </div>
<% end %> </div>
</div> <% end %>
</div> </div>
<% end %> <% end %>