diff --git a/app/assets/javascripts/app/views/notifications_view.js b/app/assets/javascripts/app/views/notifications_view.js
index d7b753f0c..d388865a1 100644
--- a/app/assets/javascripts/app/views/notifications_view.js
+++ b/app/assets/javascripts/app/views/notifications_view.js
@@ -54,7 +54,7 @@ app.views.Notifications = Backbone.View.extend({
var change = unread ? 1 : -1,
allNotes = $(".list-group > a:eq(0) .badge"),
typeNotes = $(".list-group > a[data-type=" + type + "] .badge"),
- headerBadge = $("#notifications-link .badge"),
+ headerBadge = $(".notifications-link .badge"),
note = $(".stream_element[data-guid=" + guid + "]"),
markAllReadLink = $("a#mark_all_read_link"),
translationKey = unread ? "notifications.mark_read" : "notifications.mark_unread";
diff --git a/app/assets/stylesheets/bootstrap-variables.scss b/app/assets/stylesheets/bootstrap-variables.scss
index bf0764955..c6c58d3a2 100644
--- a/app/assets/stylesheets/bootstrap-variables.scss
+++ b/app/assets/stylesheets/bootstrap-variables.scss
@@ -363,7 +363,7 @@ $navbar-height: 50px;
// $navbar-border-radius: $border-radius-base
// $navbar-padding-horizontal: floor(($grid-gutter-width / 2))
// $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2)
-// $navbar-collapse-max-height: 340px
+$navbar-collapse-max-height: 480px;
// $navbar-default-color: #777
// $navbar-default-bg: #f8f8f8
diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss
index b63f217f5..00d8172ee 100644
--- a/app/assets/stylesheets/header.scss
+++ b/app/assets/stylesheets/header.scss
@@ -9,6 +9,21 @@ header > .dark-header > nav {
@media (max-width: $grid-float-breakpoint-max) {
.col-lg-10 { padding: 0; }
+ .navbar-header > .nav li { display: inline-block !important; }
+ .nav-badge {
+ color: $navbar-inverse-link-color;
+ padding-left: 12px;
+ padding-right: 12px;
+ &:hover { color: $navbar-inverse-link-hover-color; }
+ &:hover, &:focus { background-color: transparent; }
+ }
+ #navbar-collapse {
+ .form-group, .twitter-typeahead {
+ display: block !important;
+ margin-bottom: 0;
+ &, & input { width: 100% }
+ }
+ }
}
@media (min-width: $grid-float-breakpoint) {
input[type="search"] {
@@ -21,79 +36,6 @@ header > .dark-header > nav {
width: 150px;
}
}
- .navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
- .nav-badges {
- margin-left: 20px;
- & > li { height: 50px; }
- .dropdown > a:focus { outline: 0px none; }
- .dropdown-open {
- background-color: $dropdown-bg;
- & > a { color: $dropdown-link-color; }
- .dropdown-menu { display: block; }
- }
- .dropdown-menu {
- border-top: none;
- margin-left: -1px;
- padding: 0px;
- width: 400px;
- .avatar {
- width: 35px;
- height: 35px;
- }
- .header {
- padding: 10px;
- border-bottom: 1px solid $border-grey;
- h4 { margin: 5px 0; }
- }
- .notifications {
- position: relative;
- max-height: 350px;
- }
- .stream_element.media {
- padding: 5px;
- .tooltip { position: fixed; }
- .unread-toggle {
- margin-right: 10px;
- opacity: 1;
- }
- & > .pull-right > .aspect_membership_dropdown { display: none; }
- }
- .ajax-loader {
- border-bottom: 1px solid $border-grey;
- padding: 10px;
- .spinner {
- height: 30px;
- width: 30px;
- }
- }
- .view_all {
- background-color: $link-color;
- border-top: 3px solid $white;
- text-align: center;
- a {
- color: $white;
- display: block;
- font-weight: bold;
- padding: 5px;
- &:hover { text-decoration: none; }
- }
- }
- }
- }
- [class^="entypo-"], [class*="entypo-"] {
- color: inherit;
- font-size: $font-size-h3;
- vertical-align: middle;
- }
- .nav-badge {
- margin-bottom: -2px;
- .badge {
- background-color: $brand-danger;
- position: absolute;
- right: 10px;
- top: 10px;
- }
- }
#user_menu {
&.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
.dropdown-toggle {
@@ -116,6 +58,79 @@ header > .dark-header > nav {
}
}
+ .navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
+ .nav-badges {
+ & > li { height: 50px; }
+ .dropdown > a:focus { outline: 0px none; }
+ .dropdown-open {
+ background-color: $dropdown-bg;
+ & > a { color: $dropdown-link-color; }
+ .dropdown-menu { display: block; }
+ }
+ .dropdown-menu {
+ border-top: none;
+ margin-left: -1px;
+ padding: 0px;
+ width: 400px;
+ .avatar {
+ width: 35px;
+ height: 35px;
+ }
+ .header {
+ padding: 10px;
+ border-bottom: 1px solid $border-grey;
+ h4 { margin: 5px 0; }
+ }
+ .notifications {
+ position: relative;
+ max-height: 350px;
+ }
+ .stream_element.media {
+ padding: 5px;
+ .tooltip { position: fixed; }
+ .unread-toggle {
+ margin-right: 10px;
+ opacity: 1;
+ }
+ & > .pull-right > .aspect_membership_dropdown { display: none; }
+ }
+ .ajax-loader {
+ border-bottom: 1px solid $border-grey;
+ padding: 10px;
+ .spinner {
+ height: 30px;
+ width: 30px;
+ }
+ }
+ .view_all {
+ background-color: $link-color;
+ border-top: 3px solid $white;
+ text-align: center;
+ a {
+ color: $white;
+ display: block;
+ font-weight: bold;
+ padding: 5px;
+ &:hover { text-decoration: none; }
+ }
+ }
+ }
+ }
+ [class^="entypo-"], [class*="entypo-"] {
+ color: inherit;
+ font-size: $font-size-h3;
+ vertical-align: middle;
+ }
+ .nav-badge {
+ margin-bottom: -2px;
+ .badge {
+ background-color: $brand-danger;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+ }
+
#user_menu {
.avatar {
height: 30px;
diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs
index e835337a1..4e050172f 100644
--- a/app/assets/templates/header_tpl.jst.hbs
+++ b/app/assets/templates/header_tpl.jst.hbs
@@ -12,24 +12,37 @@
{{ podname }}
+
-
+
-
-
-
-
-
-
- {{t "header.notifications"}}
-
-
+
+
{{current_user.notifications_count}}
@@ -61,14 +74,8 @@
-
-
-
-
-
-
- {{t "header.conversations"}}
-
-
+
+
{{current_user.unread_messages_count}}
diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml
index 695a00c89..9095edb24 100644
--- a/config/locales/javascript/javascript.en.yml
+++ b/config/locales/javascript/javascript.en.yml
@@ -268,6 +268,7 @@ en:
admin: "Admin"
log_out: "Log out"
toggle_navigation: "Toggle navigation"
+ toggle_mobile: "Toggle mobile"
notifications: "Notifications"
conversations: "Conversations"
diff --git a/spec/javascripts/app/views/header_view_spec.js b/spec/javascripts/app/views/header_view_spec.js
index 2b1987ff8..cd789c2aa 100644
--- a/spec/javascripts/app/views/header_view_spec.js
+++ b/spec/javascripts/app/views/header_view_spec.js
@@ -14,14 +14,14 @@ describe("app.views.Header", function() {
it("displays a count when the current user has a notification", function(){
loginAs(_.extend(this.userAttrs, {notifications_count : 1}));
this.view.render();
- expect(this.view.$("#notifications-link .badge").hasClass("hidden")).toBe(false);
- expect(this.view.$("#notifications-link .badge").text()).toContain("1");
+ expect(this.view.$(".notifications-link .badge").hasClass("hidden")).toBe(false);
+ expect(this.view.$(".notifications-link .badge").text()).toContain("1");
});
it("does not display a count when the current user has a notification", function(){
loginAs(_.extend(this.userAttrs, {notifications_count : 0}));
this.view.render();
- expect(this.view.$("#notifications-link .badge").hasClass("hidden")).toBe(true);
+ expect(this.view.$(".notifications-link .badge").hasClass("hidden")).toBe(true);
});
});
diff --git a/spec/javascripts/app/views/notifications_view_spec.js b/spec/javascripts/app/views/notifications_view_spec.js
index a13907d4a..3c5df5003 100644
--- a/spec/javascripts/app/views/notifications_view_spec.js
+++ b/spec/javascripts/app/views/notifications_view_spec.js
@@ -87,14 +87,21 @@ describe("app.views.Notifications", function(){
});
it("changes the header notifications count", function() {
- var badge = $("#notifications-link .badge");
- var count = parseInt(badge.text(), 10);
+ var badge1 = $(".notifications-link:eq(0) .badge");
+ var badge2 = $(".notifications-link:eq(1) .badge");
+ var count = parseInt(badge1.text(), 10);
this.view.updateView(this.guid, this.type, true);
- expect(parseInt(badge.text(), 10)).toBe(count + 1);
+ expect(parseInt(badge1.text(), 10)).toBe(count + 1);
this.view.updateView(this.guid, this.type, false);
- expect(parseInt(badge.text(), 10)).toBe(count);
+ expect(parseInt(badge1.text(), 10)).toBe(count);
+
+ this.view.updateView(this.guid, this.type, true);
+ expect(parseInt(badge2.text(), 10)).toBe(count + 1);
+
+ this.view.updateView(this.guid, this.type, false);
+ expect(parseInt(badge2.text(), 10)).toBe(count);
});
context("markAllRead", function() {