Commit ae73294f authored by flaburgan's avatar flaburgan

Improved responsive header

parent 9d2d20e8
......@@ -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
......
......@@ -6,63 +6,47 @@
.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-top: -7px;
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: 16px 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,19 +102,6 @@
}
}
}
[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 {
.avatar {
......@@ -145,4 +116,75 @@
margin-right: 10px;
}
}
@media (max-width: $grid-float-breakpoint-max) {
.navbar-nav.hidden-xs {
margin: 0;
margin-top: 6px;
}
.nav-badge {
color: $navbar-inverse-link-color;
&: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%; }
}
}
.nav-badges .dropdown-menu {
width: 300px;
}
}
@media (min-width: $grid-float-breakpoint) {
[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: 0;
width: 100%;
> li > a {
color: $gray-light;
padding-left: 55px;
&:hover {
background-color: $brand-primary;
color: $gray-lighter;
}
}
}
}
}
}
......@@ -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>
<span id="header-title" class="visible-xs">
<img src="/assets/branding/logos/asterisk_white_mobile.png" alt="{{ podname }}" />
</span>
</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 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,6 +59,13 @@
</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left visible-sm visible-xs">
<li class="visible-xs"><a href="/stream">{{t "my_stream"}}</a></li>
<li class="visible-xs"><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">
......
......@@ -10,13 +10,6 @@
.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
= render "layouts/header_not_connected"
......@@ -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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment