refactor mobile header, close #4579
This commit is contained in:
flaburgan
parent
fdfe50b581
commit
0f2773053e
3 changed files with 73 additions and 90 deletions
|
|
@ -32,6 +32,7 @@
|
||||||
* Add a white background to images shown in the lightbox [#4475](https://github.com/diaspora/diaspora/issues/4475)
|
* Add a white background to images shown in the lightbox [#4475](https://github.com/diaspora/diaspora/issues/4475)
|
||||||
* Refactor getting_started page, test if facebook is available, fix [#4520](https://github.com/diaspora/diaspora/issues/4520)
|
* Refactor getting_started page, test if facebook is available, fix [#4520](https://github.com/diaspora/diaspora/issues/4520)
|
||||||
* Avoid publishing empty posts [#4542](https://github.com/diaspora/diaspora/pull/4542)
|
* Avoid publishing empty posts [#4542](https://github.com/diaspora/diaspora/pull/4542)
|
||||||
|
* Refactor mobile header, fix [#4579](https://github.com/diaspora/diaspora/issues/4579)
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
* Add oEmbed content to the mobile view [#4343](https://github.com/diaspora/diaspora/pull/4353)
|
* Add oEmbed content to the mobile view [#4343](https://github.com/diaspora/diaspora/pull/4353)
|
||||||
|
|
|
||||||
|
|
@ -308,84 +308,68 @@ body {
|
||||||
.right {
|
.right {
|
||||||
float: right; }
|
float: right; }
|
||||||
|
|
||||||
.navbar {
|
header {
|
||||||
@include box-shadow(0,1px,2px,#333);
|
position: fixed;
|
||||||
}
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
.navbar-inner {
|
right: 0px;
|
||||||
@include box-shadow(0,1px,2px,#333);
|
min-width: 250px;
|
||||||
|
|
||||||
background: {
|
|
||||||
image: image-url("header-bg-long.jpg");
|
|
||||||
}
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
background: url("header-bg-long.jpg") rgb(40,35,35);
|
||||||
|
@include box-shadow(0, 1px, 2px, #333);
|
||||||
|
border-bottom: 1px solid #222;
|
||||||
|
|
||||||
border: {
|
#header_title { display: inline-block; }
|
||||||
bottom: 1px solid #222;
|
|
||||||
|
#nav_badges {
|
||||||
|
float: right;
|
||||||
|
margin: 4px 12px;
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline;
|
||||||
|
margin-left: 3px;
|
||||||
|
padding: 8px 3px;
|
||||||
|
padding-bottom: 9px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: smaller;
|
||||||
|
width: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge:hover .badge_count {
|
||||||
|
background-color: #bd0902;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 5px 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#nav_badges {
|
.badge_count {
|
||||||
display: inline-block;
|
-moz-border-radius: 2px 2px 2px 2px;
|
||||||
float: right;
|
-webkit-border-radius: 2px 2px 2px 2px;
|
||||||
padding: 4px 12px;
|
border-radius: 2px 2px 2px 2px;
|
||||||
|
z-index: 3;
|
||||||
a:hover {
|
position: absolute;
|
||||||
text-decoration: none;
|
top: 1px;
|
||||||
}
|
padding: 0 2px;
|
||||||
|
padding-bottom: 1px;
|
||||||
.badge {
|
background-color: $red;
|
||||||
position: relative;
|
line-height: 12px;
|
||||||
display: inline;
|
color: white;
|
||||||
margin-left: 3px;
|
|
||||||
padding: 8px 3px;
|
|
||||||
padding-bottom: 9px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
width: 28px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge:hover .badge_count {
|
#notification {
|
||||||
background-color: #bd0902;
|
right: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
#conversation {
|
||||||
padding: 5px 0px;
|
right: 110px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.badge_count {
|
.badge-inverse {
|
||||||
-moz-border-radius: 2px 2px 2px 2px;
|
background-color: #333333 !important;
|
||||||
-webkit-border-radius: 2px 2px 2px 2px;
|
}
|
||||||
border-radius: 2px 2px 2px 2px;
|
|
||||||
z-index: 3;
|
|
||||||
position: absolute;
|
|
||||||
top: 1px;
|
|
||||||
padding: 0 2px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
background-color: $red;
|
|
||||||
line-height: 12px;
|
|
||||||
color: white;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notification {
|
|
||||||
right: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversation {
|
|
||||||
right: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-inverse {
|
|
||||||
background-color: #333333 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header_title {
|
|
||||||
position: relative;
|
|
||||||
top: -3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|
|
||||||
|
|
@ -46,28 +46,26 @@
|
||||||
= yield(:head)
|
= yield(:head)
|
||||||
|
|
||||||
%body
|
%body
|
||||||
.navbar.navbar-fixed-top
|
%header
|
||||||
.navbar-inner
|
= link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title')
|
||||||
.container{:style => "position: relative;"}
|
|
||||||
= link_to(image_tag('branding/header-logo2x.png', :height => 40, :width => 40, :id => 'header_title'), stream_path)
|
|
||||||
|
|
||||||
- if user_signed_in?
|
- if user_signed_in?
|
||||||
#nav_badges
|
#nav_badges
|
||||||
= link_to(image_tag('icons/my_activity.png', :class => 'my_activity'), activity_stream_path, :class => "badge badge-inverse", :id => "my_activity_badge")
|
= link_to(image_tag('icons/my_activity.png', class: 'my_activity'), activity_stream_path, class: "badge badge-inverse", id: "my_activity_badge")
|
||||||
= link_to(image_tag('icons/notifications_grey.png', :height => 16, :width => 16, :id => 'notification-flag'), notifications_path, :class => "badge badge-inverse", :id => "notification_badge")
|
= link_to(image_tag('icons/notifications_grey.png', height: 16, width: 16, id: 'notification-flag'), notifications_path, class: "badge badge-inverse", id: "notification_badge")
|
||||||
- if current_user.unread_notifications.count > 0
|
- if current_user.unread_notifications.count > 0
|
||||||
.badge_count{:id => "notification"}
|
.badge_count{id: "notification"}
|
||||||
= current_user.unread_notifications.count
|
= current_user.unread_notifications.count
|
||||||
= link_to(image_tag('icons/mail_grey.png', :height => 11, :width => 17), conversations_path, :class => "badge badge-inverse", :id => "conversations_badge")
|
= link_to(image_tag('icons/mail_grey.png', height: 11, width: 17), conversations_path, class: "badge badge-inverse", id: "conversations_badge")
|
||||||
- if current_user.unread_message_count > 0
|
- if current_user.unread_message_count > 0
|
||||||
.badge_count{:id => "conversation"}
|
.badge_count{id: "conversation"}
|
||||||
= current_user.unread_message_count
|
= current_user.unread_message_count
|
||||||
= link_to(image_tag('icons/search_grey.png', :height => 14, :width => 14), people_path, :class => "badge badge-inverse", :id => "people_badge")
|
= link_to(image_tag('icons/search_grey.png', height: 14, width: 14), people_path, class: "badge badge-inverse", id: "people_badge")
|
||||||
= link_to(image_tag('icons/user_grey.png', :height => 16, :width => 16), contacts_path, :class => "badge badge-inverse", :id => "contacts_badge")
|
= link_to(image_tag('icons/user_grey.png', height: 16, width: 16), contacts_path, class: "badge badge-inverse", id: "contacts_badge")
|
||||||
- if yield(:header_action).present?
|
- if yield(:header_action).present?
|
||||||
= yield(:header_action)
|
= yield(:header_action)
|
||||||
- else
|
- else
|
||||||
= link_to(image_tag('icons/compose_mobile2.png', :class => 'compose_icon'), new_status_message_path)
|
= link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path)
|
||||||
|
|
||||||
#main.container{:role => "main"}
|
#main.container{:role => "main"}
|
||||||
.row
|
.row
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue