diff --git a/Changelog.md b/Changelog.md
index b8fe3820e5bf798e77fa2ec8ed232a34afbdcb26..f9d8dab4bbf1460fe33b150050fe38ec2b5375b8 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -43,6 +43,7 @@ If so, please delete it since it will prevent the federation from working proper
* Support direct links to comments on mobile [#7508](https://github.com/diaspora/diaspora/pull/7508)
* Add inviter first and last name in the invitation e-mail [#7484](https://github.com/diaspora/diaspora/pull/7484)
* Add markdown editor for comments and conversations [#7482](https://github.com/diaspora/diaspora/pull/7482)
+* Improve responsive header in desktop version [#7509](https://github.com/diaspora/diaspora/pull/7509)
# 0.6.8.0
diff --git a/app/assets/javascripts/app/views/notification_dropdown_view.js b/app/assets/javascripts/app/views/notification_dropdown_view.js
index c33287787b03c3d406942662c042b4e0ed309afa..1d14cac08e0de96b0d58e1c9ab22fb3423acf488 100644
--- a/app/assets/javascripts/app/views/notification_dropdown_view.js
+++ b/app/assets/javascripts/app/views/notification_dropdown_view.js
@@ -26,7 +26,6 @@ app.views.NotificationDropdown = app.views.Base.extend({
toggleDropdown: function(evt){
evt.stopPropagation();
- if (!$("#notifications-link .entypo-bell:visible").length) { return true; }
evt.preventDefault();
if(this.dropdownShowing()){ this.hideDropdown(evt); }
else{ this.showDropdown(); }
diff --git a/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss b/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss
index fe2f17f111a21dbe01bf6e80c0371d1e45348055..ec5e4ef46ceb2e13c6c31005f3c81d28ff14b44f 100644
--- a/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss
+++ b/app/assets/stylesheets/color_themes/_color_theme_override_dark.scss
@@ -1,11 +1,6 @@
// Only overriding existing selectors here, so disable some lint rules
// scss-lint:disable IdSelector, SelectorFormat, NestingDepth, SelectorDepth, QualifyingElement
body {
- .navbar.navbar-fixed-top #user_menu .dropdown-menu > li > a {
- color: $text-color;
- &:hover { color: $white; }
- }
-
.publisher {
form {
#publisher_textarea_wrapper { background-color: $gray; }
diff --git a/app/assets/stylesheets/color_themes/dark/_style.scss b/app/assets/stylesheets/color_themes/dark/_style.scss
index 1078d86bc127286959e2af4d83a22bd42d86814a..62e74dee6eda6e2b4c26dc334253740d3c3a0442 100644
--- a/app/assets/stylesheets/color_themes/dark/_style.scss
+++ b/app/assets/stylesheets/color_themes/dark/_style.scss
@@ -59,7 +59,8 @@ $dropdown-link-hover-color: $dropdown-link-color;
//== Navbar
$navbar-inverse-bg: $gray-darker;
-$navbar-inverse-link-hover-color: $text-color;
+$navbar-inverse-link-color: $gray-lighter;
+$navbar-inverse-link-hover-color: $white;
$navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color;
//== Tabs
diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss
index 4e883094e09f031bda18f0feaabd9b748bb58727..9bd9df45ab6111c1c4ce2f66e81002cf2dd2bdac 100644
--- a/app/assets/stylesheets/header.scss
+++ b/app/assets/stylesheets/header.scss
@@ -1,68 +1,68 @@
+.not-connected-menu {
+ .navbar-left {
+ float: left;
+ }
+
+ .navbar-right,
+ .navbar-right li {
+ float: right;
+ }
+}
+
.navbar.navbar-fixed-top {
border-bottom: none;
box-shadow: 1px 0 2px $black;
- a:focus {outline: 0 none; }
+ a:focus { outline: 0 none; }
+
+ .in {
+ overflow-y: visible; // Avoid search result dropdown to be hidden
+ }
.navbar-brand {
font-weight: bold;
font-size: $font-size-h3;
+ margin-left: -15px;
}
- @media (max-width: $grid-float-breakpoint-max) {
- .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;
- }
+ .header-title {
+ margin: (($navbar-height - 32px - 2 * $navbar-padding-vertical) / 2) 0;
+
+ img {
+ height: 32px;
+ opacity: .7;
}
- #navbar-collapse {
- .form-group, .twitter-typeahead {
- display: block !important;
- margin-bottom: 0;
- &, & input { width: 100% }
- }
+
+ img:hover {
+ opacity: 1;
}
}
- @media (min-width: $grid-float-breakpoint) {
- input[type="search"] {
- @include transition(width);
- margin-top: 2px;
- width: 200px;
- &:not(.active) {
- background-color: $navbar-inverse-bg;
- border-color: $gray-light;
- width: 150px;
- }
- }
- #user_menu {
- &.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
- .dropdown-toggle {
- margin: 0 1px;
- min-width: 160px;
- }
- .dropdown-menu {
- background-color: darken($navbar-inverse-bg, 7%);
- border-top: none;
- width: 100%;
- & > li > a {
- color: $gray-light;
- padding-left: 55px;
- &:hover {
- background-color: $brand-primary;
- color: $gray-lighter;
- }
- }
- }
+
+ .navbar-header > ul,
+ .navbar-header > ul li {
+ float: left;
+ }
+
+ [class^="entypo-"],
+ [class*="entypo-"] {
+ color: inherit;
+ font-size: $font-size-h3;
+ vertical-align: middle;
+ }
+
+ .nav-badge {
+ padding: $navbar-padding-vertical 12px;
+
+ .badge {
+ position: absolute;
+ right: 10px;
+ top: 10px;
}
}
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges {
+ margin: 0;
+
li { height: $navbar-height; }
.dropdown-open {
background-color: $dropdown-bg;
@@ -118,31 +118,141 @@
}
}
}
- [class^="entypo-"], [class*="entypo-"] {
- color: inherit;
- font-size: $font-size-h3;
- vertical-align: middle;
- }
- .nav-badge {
- margin-bottom: -2px;
- .badge {
- position: absolute;
- right: 10px;
- top: 10px;
- }
+
+ .user-menu-dropdown {
+ padding: 0;
}
- #user_menu {
+ .user-avatar {
+ height: $navbar-height;
+ margin-bottom: -$navbar-padding-vertical;
+ margin-right: 10px;
+ margin-top: -$navbar-padding-vertical;
+ padding: ($navbar-height - 30px) / 2 0;
+
.avatar {
height: 30px;
width: 30px;
}
- .user-avatar {
- height: $navbar-height;
- padding: ($navbar-height - 30px)/2 0;
- margin-bottom: -$navbar-padding-vertical;
- margin-top: -$navbar-padding-vertical;
- margin-right: 10px;
+ }
+
+ .navbar-form .form-control { display: inline-block; }
+
+ @media (max-width: $grid-float-breakpoint-max) {
+
+ .navbar-nav.hidden-xs {
+ margin: 0;
+
+ a {
+ padding-bottom: $navbar-padding-vertical;
+ padding-top: $navbar-padding-vertical;
+ }
+ }
+
+ .nav-badge {
+ color: $navbar-inverse-link-color;
+ &:hover { color: $navbar-inverse-link-hover-color; }
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ }
+ }
+
+ .form-group,
+ .twitter-typeahead {
+ margin-bottom: 0;
+
+ &,
+ input { width: 100%; }
+ }
+
+ .nav-badges .dropdown-menu {
+ width: 300px;
+ }
+
+ .navbar-collapse {
+ padding-top: $navbar-padding-vertical / 2;
+
+ .navbar-nav {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ }
+
+ .user-menu-dropdown {
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ display: block;
+ padding: 0;
+ position: static;
+ width: 100%;
+
+ a {
+ color: $navbar-inverse-link-color;
+ font-weight: bold;
+ padding: $nav-link-padding;
+
+ &:hover {
+ background-color: $navbar-inverse-link-hover-bg;
+ color: $navbar-inverse-link-hover-color;
+ }
+ }
+ }
+ }
+
+ @media (min-width: $grid-float-breakpoint) {
+
+ .navbar-form { // set correct margin for small inputs
+ margin-bottom: ($navbar-height - $input-height-small) / 2;
+ margin-top: ($navbar-height - $input-height-small) / 2;
+ }
+
+ [type="search"] {
+ @include transition(width);
+ width: 200px;
+
+ &:not(.active) {
+ background-color: $navbar-inverse-bg;
+ border-color: $gray-light;
+ width: 150px;
+ }
+ }
+
+ .user-menu {
+ &.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
+ .dropdown-toggle {
+ margin: 0 1px;
+ min-width: 160px;
+ }
+ }
+
+ .user-menu-dropdown {
+ background-color: darken($navbar-inverse-bg, 7%);
+ border-top: 0;
+ width: 100%;
+
+ a {
+ color: $navbar-inverse-link-color;
+ padding-left: 55px;
+
+ &:hover {
+ background-color: $list-group-hover-bg;
+ color: $list-group-link-hover-color;
+ }
+ }
+
+ li:last-child a {
+ padding-bottom: 6px;
+ }
+ }
+ }
+
+ @media (max-width: $screen-xs-max) {
+ .nav-badges .dropdown-menu {
+ position: fixed;
+ top: $navbar-height;
+ width: 100%;
}
}
}
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index c1813042eaa4dbfe3dbca8c58b82893e6053161b..159e6a5363c2eacd047c5de079324ab581b69ede 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -33,10 +33,15 @@ $mobile-navbar-height: 46px;
li { float: left; }
}
- #header-title {
+ .header-title {
padding: 7px 15px;
margin: 0 0 0 -15px;
height: $mobile-navbar-height;
+
+ img {
+ height: 30px;
+ width: 30px;
+ }
}
#nav-badges {
@@ -87,12 +92,6 @@ $mobile-navbar-height: 46px;
background-color: $red;
}
}
- #header-title{
- img {
- height: 30px;
- width: 30px;
- }
- }
}
#drawer {
diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs
index ee9eb0fb717a03f633ff413b90dd5ae97daf6643..9c3270e5bff41a64c4c071edd5fd39c9ef65300c 100644
--- a/app/assets/templates/header_tpl.jst.hbs
+++ b/app/assets/templates/header_tpl.jst.hbs
@@ -10,46 +10,24 @@
<span class="icon-bar"></span>
</button>
<a href="/stream" class="navbar-brand" data-stream-title="{{t "my_stream"}}">
- {{ podname }}
+ <span class="hidden-xs">{{ podname }}</span>
+ <div class="visible-xs-block header-title">
+ <img src="{{imageUrl 'branding/logos/asterisk_white_mobile.png'}}" alt="{{ podname }}" />
+ </div>
</a>
- <ul class="nav nav-badges visible-sm">
- <li>
- <a href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge">
- <i class="entypo-bell"></i>
- <span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
- {{current_user.notifications_count}}
- </span>
- </a>
- </li>
- <li>
- <a href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge">
- <i class="entypo-mail"></i>
- <span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
- {{current_user.unread_messages_count}}
- </span>
- </a>
- </li>
- </ul>
- </div>
-
- <div class="collapse navbar-collapse" id="navbar-collapse">
- <ul class="nav navbar-nav navbar-left">
+ <ul class="nav navbar-nav hidden-xs">
<li><a href="/stream">{{t "my_stream"}}</a></li>
<li><a href="/activity">{{t "my_activity"}}</a></li>
- <li class="visible-xs"><a href="/notifications">{{t "header.notifications"}}</a></li>
- <li class="visible-xs"><a href="/conversations">{{t "header.conversations"}}</a></li>
- <li class="visible-sm visible-xs"><a href="/mobile/toggle">{{t "header.toggle_mobile"}}</a></li>
</ul>
-
- <ul class="nav navbar-nav navbar-left nav-badges hidden-sm hidden-xs">
+ <ul class="nav navbar-nav nav-badges">
<li class="dropdown" id="notification-dropdown">
- <a id="notifications-link" href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge hidden-sm hidden-xs" role="button" data-toggle="dropdown" aria-expanded="false" data-target=" ">
+ <a id="notifications-link" href="/notifications" title="{{t "header.notifications"}}" class="notifications-link nav-badge"
+ role="button" data-toggle="dropdown" aria-expanded="false" data-target=" ">
<i class="entypo-bell"></i>
<span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
{{current_user.notifications_count}}
</span>
</a>
-
<ul class="dropdown-menu" role="menu">
<div class="header">
<div class="pull-right">
@@ -71,11 +49,9 @@
</a>
</div>
</ul>
-
</li>
-
<li>
- <a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge hidden-sm hidden-xs">
+ <a id="conversations-link" href="/conversations" title="{{t "header.conversations"}}" class="conversations-link nav-badge">
<i class="entypo-mail"></i>
<span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
{{current_user.unread_messages_count}}
@@ -83,10 +59,17 @@
</a>
</li>
</ul>
+ </div>
+ <div class="collapse navbar-collapse" id="navbar-collapse">
+ <ul class="nav navbar-nav navbar-left visible-sm-block visible-xs-block">
+ <li class="visible-xs-block"><a href="/stream">{{t "my_stream"}}</a></li>
+ <li class="visible-xs-block"><a href="/activity">{{t "my_activity"}}</a></li>
+ <li><a href="/mobile/toggle">{{t "header.toggle_mobile"}}</a></li>
+ </ul>
<ul class="nav navbar-nav navbar-right">
- <li class="dropdown" id="user_menu">
- <a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+ <li class="dropdown user-menu" id="user-menu">
+ <a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="user-avatar pull-left">
{{{personImage current_user "small"}}}
</span>
@@ -94,7 +77,7 @@
<span class="caret"></span>
</a>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu user-menu-dropdown" role="menu">
<li><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
<li><a href="/contacts">{{t "header.contacts"}}</a></li>
<li><a href="/user/edit">{{t "header.settings"}}</a></li>
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index b5a82390cec4519e0b94d8993c56389f0ee5e792..68acaad41324d7a42ec0cd6e09f620df657266a5 100644
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -9,14 +9,11 @@
.container-fluid
.row
.col-md-12
- .navbar-header
- %button.navbar-toggle.collapsed{type: "button", data: {toggle: "collapse", target: "#navbar-collapse"}}
- %span.sr-only
- = t("layouts.header.toggle_navigation")
- %span.icon-bar
- %span.icon-bar
- %span.icon-bar
- = link_to AppConfig.settings.pod_name, root_path, class: "navbar-brand"
-
- .collapse.navbar-collapse#navbar-collapse
+ .not-connected-menu
+ .navbar-header.navbar-left
+ .hidden-xs
+ = link_to AppConfig.settings.pod_name, root_path, class: "navbar-brand"
+ .visible-xs-block.header-title
+ = link_to(image_tag("branding/logos/asterisk_white_mobile.png", class: "img-responsive"),
+ root_path, class: "navbar-brand")
= render "layouts/header_not_connected"
diff --git a/app/views/layouts/_header.mobile.haml b/app/views/layouts/_header.mobile.haml
index 30c7790988885765194b7934cdcb4c190dec2c44..73ecc6e7ae6d53e99a4816eb0ec8e79d379f9629 100644
--- a/app/views/layouts/_header.mobile.haml
+++ b/app/views/layouts/_header.mobile.haml
@@ -2,7 +2,7 @@
.container-fluid
.navbar
= link_to(image_tag("branding/logos/asterisk_white_mobile.png", class: "img-responsive"),
- stream_path, id: "header-title", class: "navbar-brand")
+ stream_path, class: "navbar-brand header-title")
- if user_signed_in?
%ul.nav.navbar-nav#nav-badges
diff --git a/features/mobile/drawer.feature b/features/mobile/drawer.feature
index 42f9345816bdc5cd0fc1b514f341b03f464b2400..700fc95b8f390621a4a6ff608cea0ed5538f6b59 100644
--- a/features/mobile/drawer.feature
+++ b/features/mobile/drawer.feature
@@ -9,7 +9,7 @@ Feature: Navigate between pages using the header menu and the drawer
Scenario: navigate to the stream page
When I go to the activity stream page
- And I click on selector "#header-title"
+ And I click on selector ".header-title"
Then I should be on the stream page
Scenario: navigate to the notification page
diff --git a/features/support/user_cuke_helpers.rb b/features/support/user_cuke_helpers.rb
index 5ec5e3abb5d29aff17c390281e158db08eb6ecc8..abf5e5e6eece0b7b9c7bffbf25fe40518ab9765f 100644
--- a/features/support/user_cuke_helpers.rb
+++ b/features/support/user_cuke_helpers.rb
@@ -47,7 +47,7 @@ module UserCukeHelpers
if mobile
expect(page).to have_css "#menu-badge"
else
- expect(find("#user_menu")).to have_content "#{@me.first_name} #{@me.last_name}"
+ expect(find("#user-menu")).to have_content "#{@me.first_name} #{@me.last_name}"
end
end
@@ -58,8 +58,8 @@ module UserCukeHelpers
# go to user menu, expand it, and click logout
def manual_logout
- find("#user_menu .dropdown-toggle").click
- find("#user_menu li:last-child a").click
+ find("#user-menu .dropdown-toggle").click
+ find("#user-menu li:last-child a").click
end
def manual_logout_mobile
diff --git a/spec/javascripts/app/views/header_view_spec.js b/spec/javascripts/app/views/header_view_spec.js
index cdf3fedc823ff1e85c8bed0f59eacf7210c5997f..56c2272e7ac385b4ab29eb3c081e9c1d4b56c45f 100644
--- a/spec/javascripts/app/views/header_view_spec.js
+++ b/spec/javascripts/app/views/header_view_spec.js
@@ -44,13 +44,13 @@ describe("app.views.Header", function() {
it("displays if the current user is an admin", function(){
loginAs(_.extend(this.userAttrs, {admin : true}));
this.view.render();
- expect(this.view.$("#user_menu").html()).toContain("/admins");
+ expect(this.view.$("#user-menu").html()).toContain("/admins");
});
it("does not display if the current user is not an admin", function(){
loginAs(_.extend(this.userAttrs, {admin : false}));
this.view.render();
- expect(this.view.$("#user_menu").html()).not.toContain("/admins");
+ expect(this.view.$("#user-menu").html()).not.toContain("/admins");
});
});
});
diff --git a/spec/javascripts/app/views/notifications_view_spec.js b/spec/javascripts/app/views/notifications_view_spec.js
index 4e520a57c4638d2828bb0a3729cda99ac40edbc1..d15e21bc18dcf8ee7c8d0ec8d841f619a8d21164 100644
--- a/spec/javascripts/app/views/notifications_view_spec.js
+++ b/spec/javascripts/app/views/notifications_view_spec.js
@@ -142,18 +142,13 @@ describe("app.views.Notifications", function() {
});
it("changes the header notifications count", function() {
- var badge1 = $(".notifications-link:eq(0) .badge");
- var badge2 = $(".notifications-link:eq(1) .badge");
+ var badge = $(".notifications-link .badge");
- expect(parseInt(badge1.text(), 10)).toBe(this.collection.unreadCount);
- expect(parseInt(badge2.text(), 10)).toBe(this.collection.unreadCount);
+ expect(parseInt(badge.text(), 10)).toBe(this.collection.unreadCount);
this.collection.unreadCount++;
this.view.updateView();
- expect(parseInt(badge1.text(), 10)).toBe(this.collection.unreadCount);
-
- this.view.updateView();
- expect(parseInt(badge2.text(), 10)).toBe(this.collection.unreadCount);
+ expect(parseInt(badge.text(), 10)).toBe(this.collection.unreadCount);
});
it("disables the mark-all-read-link button", function() {