Skip to content
Extraits de code Groupes Projets
Non vérifiée Valider 757a5fbd rédigé par Steffen van Bergerem's avatar Steffen van Bergerem
Parcourir les fichiers

Merge pull request #7509 from Flaburgan/responsive-header 

Improve responsive header in desktop version
parents 9d2d20e8 39110c6b
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 222 ajouts et 142 suppressions
Changelog.md
+ 1
− 0
Voir le fichier @ 757a5fbd
...@@ -43,6 +43,7 @@ If so, please delete it since it will prevent the federation from working proper ...@@ -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) * 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 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) * 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 # 0.6.8.0
......
app/assets/javascripts/app/views/notification_dropdown_view.js
+ 0
− 1
Voir le fichier @ 757a5fbd
...@@ -26,7 +26,6 @@ app.views.NotificationDropdown = app.views.Base.extend({ ...@@ -26,7 +26,6 @@ app.views.NotificationDropdown = app.views.Base.extend({
toggleDropdown: function(evt){ toggleDropdown: function(evt){
evt.stopPropagation(); evt.stopPropagation();
if (!$("#notifications-link .entypo-bell:visible").length) { return true; }
evt.preventDefault(); evt.preventDefault();
if(this.dropdownShowing()){ this.hideDropdown(evt); } if(this.dropdownShowing()){ this.hideDropdown(evt); }
else{ this.showDropdown(); } else{ this.showDropdown(); }
......
app/assets/stylesheets/color_themes/_color_theme_override_dark.scss
+ 0
− 5
Voir le fichier @ 757a5fbd
// Only overriding existing selectors here, so disable some lint rules // Only overriding existing selectors here, so disable some lint rules
// scss-lint:disable IdSelector, SelectorFormat, NestingDepth, SelectorDepth, QualifyingElement // scss-lint:disable IdSelector, SelectorFormat, NestingDepth, SelectorDepth, QualifyingElement
body { body {
.navbar.navbar-fixed-top #user_menu .dropdown-menu > li > a {
color: $text-color;
&:hover { color: $white; }
}
.publisher { .publisher {
form { form {
#publisher_textarea_wrapper { background-color: $gray; } #publisher_textarea_wrapper { background-color: $gray; }
......
app/assets/stylesheets/color_themes/dark/_style.scss
+ 2
− 1
Voir le fichier @ 757a5fbd
...@@ -59,7 +59,8 @@ $dropdown-link-hover-color: $dropdown-link-color; ...@@ -59,7 +59,8 @@ $dropdown-link-hover-color: $dropdown-link-color;
//== Navbar //== Navbar
$navbar-inverse-bg: $gray-darker; $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; $navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color;
//== Tabs //== Tabs
......
app/assets/stylesheets/header.scss
+ 177
− 67
Voir le fichier @ 757a5fbd
.not-connected-menu {
.navbar-left {
float: left;
}
.navbar-right,
.navbar-right li {
float: right;
}
}
.navbar.navbar-fixed-top { .navbar.navbar-fixed-top {
border-bottom: none; border-bottom: none;
box-shadow: 1px 0 2px $black; 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 { .navbar-brand {
font-weight: bold; font-weight: bold;
font-size: $font-size-h3; font-size: $font-size-h3;
margin-left: -15px;
} }
@media (max-width: $grid-float-breakpoint-max) { .header-title {
.navbar-header > .nav li { display: inline-block !important; } margin: (($navbar-height - 32px - 2 * $navbar-padding-vertical) / 2) 0;
.nav-badge {
color: $navbar-inverse-link-color; img {
padding-left: 12px; height: 32px;
padding-right: 12px; opacity: .7;
&:hover { color: $navbar-inverse-link-hover-color; }
&:hover,
&:focus {
background-color: transparent;
}
} }
#navbar-collapse {
.form-group, .twitter-typeahead { img:hover {
display: block !important; opacity: 1;
margin-bottom: 0;
&, & input { width: 100% }
}
} }
} }
@media (min-width: $grid-float-breakpoint) {
input[type="search"] { .navbar-header > ul,
@include transition(width); .navbar-header > ul li {
margin-top: 2px; float: left;
width: 200px; }
&:not(.active) {
background-color: $navbar-inverse-bg; [class^="entypo-"],
border-color: $gray-light; [class*="entypo-"] {
width: 150px; color: inherit;
} font-size: $font-size-h3;
} vertical-align: middle;
#user_menu { }
&.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
.dropdown-toggle { .nav-badge {
margin: 0 1px; padding: $navbar-padding-vertical 12px;
min-width: 160px;
} .badge {
.dropdown-menu { position: absolute;
background-color: darken($navbar-inverse-bg, 7%); right: 10px;
border-top: none; top: 10px;
width: 100%;
& > li > a {
color: $gray-light;
padding-left: 55px;
&:hover {
background-color: $brand-primary;
color: $gray-lighter;
}
}
}
} }
} }
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; } .navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges { .nav-badges {
margin: 0;
li { height: $navbar-height; } li { height: $navbar-height; }
.dropdown-open { .dropdown-open {
background-color: $dropdown-bg; background-color: $dropdown-bg;
...@@ -118,31 +118,141 @@ ...@@ -118,31 +118,141 @@
} }
} }
} }
[class^="entypo-"], [class*="entypo-"] {
color: inherit; .user-menu-dropdown {
font-size: $font-size-h3; padding: 0;
vertical-align: middle;
}
.nav-badge {
margin-bottom: -2px;
.badge {
position: absolute;
right: 10px;
top: 10px;
}
} }
#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 { .avatar {
height: 30px; height: 30px;
width: 30px; width: 30px;
} }
.user-avatar { }
height: $navbar-height;
padding: ($navbar-height - 30px)/2 0; .navbar-form .form-control { display: inline-block; }
margin-bottom: -$navbar-padding-vertical;
margin-top: -$navbar-padding-vertical; @media (max-width: $grid-float-breakpoint-max) {
margin-right: 10px;
.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%;
} }
} }
} }
app/assets/stylesheets/mobile/header.scss
+ 6
− 7
Voir le fichier @ 757a5fbd
...@@ -33,10 +33,15 @@ $mobile-navbar-height: 46px; ...@@ -33,10 +33,15 @@ $mobile-navbar-height: 46px;
li { float: left; } li { float: left; }
} }
#header-title { .header-title {
padding: 7px 15px; padding: 7px 15px;
margin: 0 0 0 -15px; margin: 0 0 0 -15px;
height: $mobile-navbar-height; height: $mobile-navbar-height;
img {
height: 30px;
width: 30px;
}
} }
#nav-badges { #nav-badges {
...@@ -87,12 +92,6 @@ $mobile-navbar-height: 46px; ...@@ -87,12 +92,6 @@ $mobile-navbar-height: 46px;
background-color: $red; background-color: $red;
} }
} }
#header-title{
img {
height: 30px;
width: 30px;
}
}
} }
#drawer { #drawer {
......
app/assets/templates/header_tpl.jst.hbs
+ 19
− 36
Voir le fichier @ 757a5fbd
...@@ -10,46 +10,24 @@ ...@@ -10,46 +10,24 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a href="/stream" class="navbar-brand" data-stream-title="{{t "my_stream"}}"> <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> </a>
<ul class="nav nav-badges visible-sm"> <ul class="nav navbar-nav hidden-xs">
<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">
<li><a href="/stream">{{t "my_stream"}}</a></li> <li><a href="/stream">{{t "my_stream"}}</a></li>
<li><a href="/activity">{{t "my_activity"}}</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>
<ul class="nav navbar-nav nav-badges">
<ul class="nav navbar-nav navbar-left nav-badges hidden-sm hidden-xs">
<li class="dropdown" id="notification-dropdown"> <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> <i class="entypo-bell"></i>
<span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}"> <span class="badge badge-important {{#unless current_user.notifications_count}} hidden {{/unless}}">
{{current_user.notifications_count}} {{current_user.notifications_count}}
</span> </span>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<div class="header"> <div class="header">
<div class="pull-right"> <div class="pull-right">
...@@ -71,11 +49,9 @@ ...@@ -71,11 +49,9 @@
</a> </a>
</div> </div>
</ul> </ul>
</li> </li>
<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> <i class="entypo-mail"></i>
<span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}"> <span class="badge badge-important {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
{{current_user.unread_messages_count}} {{current_user.unread_messages_count}}
...@@ -83,10 +59,17 @@ ...@@ -83,10 +59,17 @@
</a> </a>
</li> </li>
</ul> </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"> <ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="user_menu"> <li class="dropdown user-menu" id="user-menu">
<a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <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"> <span class="user-avatar pull-left">
{{{personImage current_user "small"}}} {{{personImage current_user "small"}}}
</span> </span>
...@@ -94,7 +77,7 @@ ...@@ -94,7 +77,7 @@
<span class="caret"></span> <span class="caret"></span>
</a> </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="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
<li><a href="/contacts">{{t "header.contacts"}}</a></li> <li><a href="/contacts">{{t "header.contacts"}}</a></li>
<li><a href="/user/edit">{{t "header.settings"}}</a></li> <li><a href="/user/edit">{{t "header.settings"}}</a></li>
......
app/views/layouts/_header.html.haml
+ 7
− 10
Voir le fichier @ 757a5fbd
...@@ -9,14 +9,11 @@ ...@@ -9,14 +9,11 @@
.container-fluid .container-fluid
.row .row
.col-md-12 .col-md-12
.navbar-header .not-connected-menu
%button.navbar-toggle.collapsed{type: "button", data: {toggle: "collapse", target: "#navbar-collapse"}} .navbar-header.navbar-left
%span.sr-only .hidden-xs
= t("layouts.header.toggle_navigation") = link_to AppConfig.settings.pod_name, root_path, class: "navbar-brand"
%span.icon-bar .visible-xs-block.header-title
%span.icon-bar = link_to(image_tag("branding/logos/asterisk_white_mobile.png", class: "img-responsive"),
%span.icon-bar root_path, class: "navbar-brand")
= link_to AppConfig.settings.pod_name, root_path, class: "navbar-brand"
.collapse.navbar-collapse#navbar-collapse
= render "layouts/header_not_connected" = render "layouts/header_not_connected"
app/views/layouts/_header.mobile.haml
+ 1
− 1
Voir le fichier @ 757a5fbd
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.container-fluid .container-fluid
.navbar .navbar
= link_to(image_tag("branding/logos/asterisk_white_mobile.png", class: "img-responsive"), = 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? - if user_signed_in?
%ul.nav.navbar-nav#nav-badges %ul.nav.navbar-nav#nav-badges
......
features/mobile/drawer.feature
+ 1
− 1
Voir le fichier @ 757a5fbd
...@@ -9,7 +9,7 @@ Feature: Navigate between pages using the header menu and the drawer ...@@ -9,7 +9,7 @@ Feature: Navigate between pages using the header menu and the drawer
Scenario: navigate to the stream page Scenario: navigate to the stream page
When I go to the activity 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 Then I should be on the stream page
Scenario: navigate to the notification page Scenario: navigate to the notification page
......
features/support/user_cuke_helpers.rb
+ 3
− 3
Voir le fichier @ 757a5fbd
...@@ -47,7 +47,7 @@ module UserCukeHelpers ...@@ -47,7 +47,7 @@ module UserCukeHelpers
if mobile if mobile
expect(page).to have_css "#menu-badge" expect(page).to have_css "#menu-badge"
else 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
end end
...@@ -58,8 +58,8 @@ module UserCukeHelpers ...@@ -58,8 +58,8 @@ module UserCukeHelpers
# go to user menu, expand it, and click logout # go to user menu, expand it, and click logout
def manual_logout def manual_logout
find("#user_menu .dropdown-toggle").click find("#user-menu .dropdown-toggle").click
find("#user_menu li:last-child a").click find("#user-menu li:last-child a").click
end end
def manual_logout_mobile def manual_logout_mobile
......
spec/javascripts/app/views/header_view_spec.js
+ 2
− 2
Voir le fichier @ 757a5fbd
...@@ -44,13 +44,13 @@ describe("app.views.Header", function() { ...@@ -44,13 +44,13 @@ describe("app.views.Header", function() {
it("displays if the current user is an admin", function(){ it("displays if the current user is an admin", function(){
loginAs(_.extend(this.userAttrs, {admin : true})); loginAs(_.extend(this.userAttrs, {admin : true}));
this.view.render(); 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(){ it("does not display if the current user is not an admin", function(){
loginAs(_.extend(this.userAttrs, {admin : false})); loginAs(_.extend(this.userAttrs, {admin : false}));
this.view.render(); this.view.render();
expect(this.view.$("#user_menu").html()).not.toContain("/admins"); expect(this.view.$("#user-menu").html()).not.toContain("/admins");
}); });
}); });
}); });
......
spec/javascripts/app/views/notifications_view_spec.js
+ 3
− 8
Voir le fichier @ 757a5fbd
...@@ -142,18 +142,13 @@ describe("app.views.Notifications", function() { ...@@ -142,18 +142,13 @@ describe("app.views.Notifications", function() {
}); });
it("changes the header notifications count", function() { it("changes the header notifications count", function() {
var badge1 = $(".notifications-link:eq(0) .badge"); var badge = $(".notifications-link .badge");
var badge2 = $(".notifications-link:eq(1) .badge");
expect(parseInt(badge1.text(), 10)).toBe(this.collection.unreadCount); expect(parseInt(badge.text(), 10)).toBe(this.collection.unreadCount);
expect(parseInt(badge2.text(), 10)).toBe(this.collection.unreadCount);
this.collection.unreadCount++; this.collection.unreadCount++;
this.view.updateView(); this.view.updateView();
expect(parseInt(badge1.text(), 10)).toBe(this.collection.unreadCount); expect(parseInt(badge.text(), 10)).toBe(this.collection.unreadCount);
this.view.updateView();
expect(parseInt(badge2.text(), 10)).toBe(this.collection.unreadCount);
}); });
it("disables the mark-all-read-link button", function() { it("disables the mark-all-read-link button", function() {
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter