Merge pull request #7509 from Flaburgan/responsive-header
Improve responsive header in desktop version
This commit is contained in:
Steffen van Bergerem
commit
757a5fbd10
13 changed files with 222 additions and 142 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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(); }
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue