Improved responsive header
This commit is contained in:
flaburgan
parent
9d2d20e854
commit
ae73294f41
5 changed files with 122 additions and 108 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
|
||||
|
||||
|
|
|
|||
|
|
@ -6,63 +6,47 @@
|
|||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
font-size: $font-size-h3;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
#header-title {
|
||||
margin-top: -7px;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
opacity: .7;
|
||||
}
|
||||
img:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header > ul,
|
||||
.navbar-header > ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[class^="entypo-"],
|
||||
[class*="entypo-"] {
|
||||
color: inherit;
|
||||
font-size: $font-size-h3;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
#navbar-collapse {
|
||||
.form-group, .twitter-typeahead {
|
||||
display: block !important;
|
||||
margin-bottom: 0;
|
||||
&, & input { width: 100% }
|
||||
}
|
||||
}
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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 }}
|
||||
</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 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>
|
||||
</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() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue