mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-11-09 16:01:30 +08:00
Merge pull request #194 from ZmagoD/zd_SCI_531_533
Notification style fixes
This commit is contained in:
Zmago Devetak
GitHub
commit
eea310514a
4 changed files with 159 additions and 86 deletions
|
|
@ -32,6 +32,7 @@
|
|||
}
|
||||
});
|
||||
$('#count-notifications').hide();
|
||||
toggleNotificationBellPosition();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
if ( data.notificationNmber > 0 ) {
|
||||
notificationCount.html(data.notificationNmber);
|
||||
notificationCount.show();
|
||||
toggleNotificationBellPosition();
|
||||
} else {
|
||||
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
|
||||
loadDropdownNotifications();
|
||||
loadUnseenNotificationsNumber();
|
||||
toggleNotificationBellPosition();
|
||||
})();
|
||||
|
|
|
|||
53
app/assets/stylesheets/extend/bootstrap.scss
vendored
53
app/assets/stylesheets/extend/bootstrap.scss
vendored
|
|
@ -57,3 +57,56 @@
|
|||
.result-comment .col-xs-12 {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,29 +75,20 @@ table {
|
|||
#notifications-dropdown {
|
||||
.fa-bell {
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#count-notifications {
|
||||
background-color: $color-theme-primary;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
#count-notifications {
|
||||
position: absolute !important;
|
||||
margin-left: -4px !important;
|
||||
margin-top: 10px !important;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
padding: 1px 6px;
|
||||
position: relative;
|
||||
z-index: 999999;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -131,24 +122,36 @@ table {
|
|||
}
|
||||
|
||||
.text-center {
|
||||
margin-left: 10px;
|
||||
padding-top: 10px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
top: 0px;
|
||||
margin-top: 5px;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.assignment {
|
||||
background-color: $color-theme-primary;
|
||||
border-radius: 50%;
|
||||
color: $color-wild-sand;
|
||||
font-size: 15px;
|
||||
padding: 7px;
|
||||
display: block;
|
||||
font-size: 23px;
|
||||
height: 45px;
|
||||
padding-top: 5px;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.system_message {
|
||||
background-color: $color-theme-secondary;
|
||||
border-radius: 50%;
|
||||
color: $color-wild-sand;
|
||||
font-size: 13px;
|
||||
padding: 7px 10px;
|
||||
display: block;
|
||||
font-size: 23px;
|
||||
height: 45px;
|
||||
padding-top: 8px;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.notifications-dropdown-header {
|
||||
|
|
|
|||
|
|
@ -28,95 +28,93 @@
|
|||
<li>
|
||||
<a href="<%= projects_path %>">
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<a href="<%= protocols_path %>">
|
||||
<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>
|
||||
</li>
|
||||
<% if false %>
|
||||
<li>
|
||||
<a href="#">
|
||||
<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>
|
||||
</li>
|
||||
<% end %>
|
||||
<li>
|
||||
<a class="btn-activity" href="<%= activities_path(format: :json) %>" role="button" data-remote="true">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<!-- profile info -->
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#"
|
||||
id="notifications-dropdown"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
data-href="<%= recent_notifications_url(current_user) %>">
|
||||
<%= fa_icon 'bell'%>
|
||||
<span id="count-notifications"
|
||||
data-href="<%= unseen_notification_url(current_user) %>"></span>
|
||||
</a>
|
||||
<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-footer">link to method goes here</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<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>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<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.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.plans'), PLANS_URL, target: "_blank" %></li>
|
||||
<li><%= link_to t('nav.help.contact'), CONTACT_URL, target: "_blank" %></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- profile info -->
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#"
|
||||
id="notifications-dropdown"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
data-href="<%= recent_notifications_url(current_user) %>">
|
||||
<%= fa_icon 'bell'%>
|
||||
<span id="count-notifications"
|
||||
data-href="<%= unseen_notification_url(current_user) %>"></span>
|
||||
</a>
|
||||
<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-footer">link to method goes here</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<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>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<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.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.plans'), PLANS_URL, target: "_blank" %></li>
|
||||
<li><%= link_to t('nav.help.contact'), CONTACT_URL, target: "_blank" %></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="dropdown">
|
||||
<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>
|
||||
<%= image_tag avatar_path(current_user, :icon_small), class: "avatar" %>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><%= link_to t('nav.user.profile'), edit_user_registration_path %></li>
|
||||
<li><%= link_to t('nav.user.settings'), preferences_path %></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><%= link_to t('nav.user.logout'), destroy_user_session_path, :method => :delete %></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<li class="dropdown">
|
||||
<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>
|
||||
<%= image_tag avatar_path(current_user, :icon_small), class: "avatar" %>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><%= link_to t('nav.user.profile'), edit_user_registration_path %></li>
|
||||
<li><%= link_to t('nav.user.settings'), preferences_path %></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><%= link_to t('nav.user.logout'), destroy_user_session_path, :method => :delete %></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- search form -->
|
||||
<%= form_tag search_path, method: :get, id: 'search-bar', class: 'navbar-form navbar-right', role: 'search' do %>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" name="q" maxlength="50" placeholder="<%= t('nav.search') %>">
|
||||
<span class="input-group-btn">
|
||||
<button id="search-button" class="btn btn-default" type="submit">
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- search form -->
|
||||
<%= form_tag search_path, method: :get, id: 'search-bar', class: 'navbar-form navbar-right', role: 'search' do %>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" name="q" maxlength="50" placeholder="<%= t('nav.search') %>">
|
||||
<span class="input-group-btn">
|
||||
<button id="search-button" class="btn btn-default" type="submit">
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue