diff --git a/Changelog.md b/Changelog.md index 13701219f..721209c86 100644 --- a/Changelog.md +++ b/Changelog.md @@ -50,6 +50,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure. * Redesign sidebars on stream pages [#6309](https://github.com/diaspora/diaspora/pull/6309) * Improve ignored users styling [#6349](https://github.com/diaspora/diaspora/pull/6349) * Use Blueimp image gallery instead of lightbox [#6301](https://github.com/diaspora/diaspora/6301) +* Unify mobile and desktop header design [#6285](https://github.com/diaspora/diaspora/6285) ## Bug fixes * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852) diff --git a/app/assets/images/fonts/diaspora-custom.ttf b/app/assets/images/fonts/diaspora-custom.ttf new file mode 100644 index 000000000..4b21e9b84 Binary files /dev/null and b/app/assets/images/fonts/diaspora-custom.ttf differ diff --git a/app/assets/images/fonts/svg-icons/compose_mobile.svg b/app/assets/images/fonts/svg-icons/compose_mobile.svg new file mode 100644 index 000000000..ff020cd60 --- /dev/null +++ b/app/assets/images/fonts/svg-icons/compose_mobile.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/app/assets/images/fonts/svg-icons/mail_white.svg b/app/assets/images/fonts/svg-icons/mail_white.svg new file mode 100644 index 000000000..5d21bd83a --- /dev/null +++ b/app/assets/images/fonts/svg-icons/mail_white.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/app/assets/images/mobile/compose_mobile.png b/app/assets/images/mobile/compose_mobile.png deleted file mode 100644 index 22bfd6f77..000000000 Binary files a/app/assets/images/mobile/compose_mobile.png and /dev/null differ diff --git a/app/assets/images/mobile/mail_white.png b/app/assets/images/mobile/mail_white.png deleted file mode 100644 index ad215505f..000000000 Binary files a/app/assets/images/mobile/mail_white.png and /dev/null differ diff --git a/app/assets/images/mobile/menu.png b/app/assets/images/mobile/menu.png deleted file mode 100644 index 59b11180c..000000000 Binary files a/app/assets/images/mobile/menu.png and /dev/null differ diff --git a/app/assets/images/mobile/notifications_white.png b/app/assets/images/mobile/notifications_white.png deleted file mode 100644 index 3f94e2848..000000000 Binary files a/app/assets/images/mobile/notifications_white.png and /dev/null differ diff --git a/app/assets/images/mobile/pencil_mobile_grey.png b/app/assets/images/mobile/pencil_mobile_grey.png deleted file mode 100644 index da72cc3d4..000000000 Binary files a/app/assets/images/mobile/pencil_mobile_grey.png and /dev/null differ diff --git a/app/assets/images/mobile/pencil_mobile_grey_active.png b/app/assets/images/mobile/pencil_mobile_grey_active.png deleted file mode 100644 index 5d4147ea0..000000000 Binary files a/app/assets/images/mobile/pencil_mobile_grey_active.png and /dev/null differ diff --git a/app/assets/javascripts/mobile/mobile.js b/app/assets/javascripts/mobile/mobile.js index aeda97c76..9fdd94215 100644 --- a/app/assets/javascripts/mobile/mobile.js +++ b/app/assets/javascripts/mobile/mobile.js @@ -38,7 +38,7 @@ $(document).ready(function(){ }; /* Drawer menu */ - $("#menu_badge").bind("tap click", function(evt){ + $("#menu-badge").bind("tap click", function(evt){ evt.preventDefault(); $("#app").toggleClass("draw"); }); diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss index dd9b0f9ad..c7c6b9ad8 100644 --- a/app/assets/stylesheets/mobile/header.scss +++ b/app/assets/stylesheets/mobile/header.scss @@ -2,56 +2,76 @@ $drawer-width: 400px; $drawer-width-offset: $drawer-width + 50px; +$mobile-navbar-height: 46px; -header { - position: fixed; - height: 45px; - top: 0px; - z-index: 10; - @include header-gradient($header-background-color); - box-shadow: 0 1px 2px #333; - border-bottom: 1px solid darken($header-background-color, 8%); -} - -#main_nav { +#main-nav.navbar-fixed-top { width: 100%; + height: $mobile-navbar-height !important; + min-height: $mobile-navbar-height !important; + max-height: $mobile-navbar-height !important; - #header_title { - display: inline-block; - width: 45px; - height: 100%; - padding: 7px; + .navbar { + margin: 0; + padding: 0; + border: none; + min-height: $mobile-navbar-height; } - #nav_badges { + #header-title { + padding: 7px 15px; + margin: 0 0 0 -15px; + height: $mobile-navbar-height; + } + + #nav-badges { float: right; - margin: 7px 0; - display: inline-block; + margin: 0 -15px; + display: inline-flex; + + li > a, li > button { + background-color: transparent; + + &.badge-link { + font-size: 26px; + padding: 14px 6px; + text-align: center; + width: $mobile-navbar-height; + height: $mobile-navbar-height; + + [class^="entypo-"], [class^="diaspora-custom-"] { + color: $white; + width: 100%; + padding: 0; + margin: 0; + + &.entypo-bell, &.diaspora-custom-compose { + text-align: center; + font-size: 22px; + + &:before { + position: relative; + top: -2px; + } + } + } + } + } + + .navbar-toggle { + display: unset; + margin: 6px 15px; + } .badge { - display: inline; - margin: 0 4px; - padding: 10px 6px; - font-weight: bold; - font-size: smaller; - background-color: transparent; - } - - .badge_count { - border-radius: 2px; z-index: 3; + top: 6px; + right: 6px; + padding: 2px 6px; position: absolute; - top: 3px; - padding: 1px 3px; background-color: $red; - margin-left: -8px; - } - - #conversation_icon { - height: 18px; } } - #nav_badges, #header_title{ + #header-title{ img { height: 30px; width: 30px; @@ -74,25 +94,23 @@ header { header { width: 100%; position: absolute; + height: $mobile-navbar-height; + background-color: $navbar-inverse-bg; + border-bottom: solid $navbar-inverse-border 1px; - #global_search { - + #global-search { form { padding: 0 15px; width: 100%; - input { - box-shadow: 0 1px 1px #444; - border-radius: 15px; - margin-top: 5px; - background-color: #444; - border: 1px solid #222; + margin-top: 7px; + background-color: $navbar-inverse-bg; font-size: 13px; color: black; &.active { - background-color: rgba(160,160,160,0.6); + background-color: $white; } &:focus { @@ -108,26 +126,25 @@ header { nav { position: absolute; - top: 45px; - bottom: 0px; + top: $mobile-navbar-height; + bottom: 0; overflow: auto; width: 100%; li { font-size: 1.8rem; line-height: 25px; - font-weight: bold; color: $light-grey; - border-bottom: solid rgb(53, 53, 53) 2px; + border-bottom: solid $navbar-inverse-border 1px; } li:hover { background-color: $link-grey; } - .no_border { - padding: 0px; - border-bottom: 0px; + .no-border { + padding: 0; + border-bottom: 0; &:hover { background-color: transparent; @@ -165,20 +182,18 @@ header { } } -#main_nav, -#drawer { +#main-nav, #drawer { transition: all 0.25s ease; z-index: 10; } /* This class is added when the user open the drawer */ #app.draw { - #main_nav, - #drawer { + #main-nav, #drawer { transform: translateX(-$drawer-width); } @media (max-width: $drawer-width-offset) { - #main_nav { + #main-nav { transform: translateX(-80%); } #drawer { diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss index 9738542e4..b86ee9a64 100644 --- a/app/assets/stylesheets/mobile/mobile.scss +++ b/app/assets/stylesheets/mobile/mobile.scss @@ -13,6 +13,8 @@ @import "mobile/stream_element"; @import "mobile/comments"; +@import "new_styles/typography"; + a { color: #2489ce; text-decoration: none; @@ -34,12 +36,16 @@ body { h3 { margin-top: 0; } .clear { clear: both; } -#main { padding: 55px 10px 0 10px; } +#main { padding: 56px 10px 0 10px; } .message { padding-left: 2px; } +.avatar { + border-radius: 4px; +} + .stream_element, .comments { overflow: auto; @@ -52,7 +58,6 @@ h3 { margin-top: 0; } * { max-width: 100%; } .avatar { - border-radius: 4px; float: left; margin-top: 0; max-width: 35px; diff --git a/app/assets/stylesheets/new_styles/_typography.scss b/app/assets/stylesheets/new_styles/_typography.scss index dca3ee64d..a9afb3ea8 100644 --- a/app/assets/stylesheets/new_styles/_typography.scss +++ b/app/assets/stylesheets/new_styles/_typography.scss @@ -16,3 +16,30 @@ src : image-url('fonts/Roboto-Light.ttf'); weight : normal; } + +/* diaspora custom icons font */ +@font-face { + font-family: "diaspora-custom"; + src: image-url("fonts/diaspora-custom.ttf"); + font-weight: normal; + font-style: normal; + +} + +[class^="diaspora-custom-"]:before, +[class*=" diaspora-custom-"]:before { + font-family: "diaspora-custom" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.diaspora-custom-compose:before { + content: "a"; +} +.diaspora-custom-mail:before { + content: "b"; +} diff --git a/app/views/layouts/_drawer.mobile.haml b/app/views/layouts/_drawer.mobile.haml new file mode 100644 index 000000000..97e9f6d89 --- /dev/null +++ b/app/views/layouts/_drawer.mobile.haml @@ -0,0 +1,35 @@ +#drawer + %header + #global-search + = form_tag("/search", :method => "get", :class => "search_form", "accept-charset" => "UTF-8") do + %div + = hidden_field_tag "utf8", "✓" + = search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", + autocomplete: "off", class: "ac_input form-control" + %nav.navbar-inverse + %ul + %li= link_to t("streams.activity.title"), activity_stream_path + %li= link_to t("streams.mentions.title"), mentioned_stream_path + %li#all_aspects + = link_to t("streams.aspects.title"), "#" + %li.no-border.hide + %ul + - current_user.aspects.each do |aspect| + %li= link_to aspect.name, aspects_stream_path(a_ids: [aspect.id]) + %li#followed_tags + = link_to t("streams.followed_tag.title"), "#" + %li.no-border.hide + %ul + - current_user.followed_tags.each do |tag| + %li= tag_link(tag) + - if current_user.followed_tags.length > 0 + %li.manage-followed-tags + = link_to t("tag_followings.manage.title"), manage_tag_followings_path + %li + = link_to user_profile_path(current_user.username) do + = t("layouts.header.profile") + = person_image_tag(current_user, size: :thumb_small) + %li= link_to t("_contacts"), contacts_path + %li= link_to t("layouts.header.settings"), users_edit_path + %li= link_to t("layouts.application.toggle"), toggle_mobile_path + %li= link_to t("layouts.header.logout"), destroy_user_session_path, method: :delete diff --git a/app/views/layouts/_header.mobile.haml b/app/views/layouts/_header.mobile.haml new file mode 100644 index 000000000..45a999a05 --- /dev/null +++ b/app/views/layouts/_header.mobile.haml @@ -0,0 +1,35 @@ +.nav.navbar-inverse.navbar-fixed-top#main-nav + .container-fluid + .navbar + = link_to(image_tag("mobile/asterisk_white_mobile.png", class: "img-responsive"), + stream_path, id: "header-title", class: "navbar-brand") + + %ul.nav.navbar-nav#nav-badges + -# Notifications + %li + = link_to notifications_path, class: "badge-link", id: "notification-badge" do + %i.entypo-bell + - if current_user.unread_notifications.size > 0 + %span.badge{id: "notification"} + = current_user.unread_notifications.size + + -# Conversations + %li + = link_to conversations_path, class: "badge-link", id: "conversations-badge" do + %i.diaspora-custom-mail + - if current_user.unread_message_count > 0 + %span.badge{id: "conversation"} + = current_user.unread_message_count + + -# Publisher + %li + = link_to new_status_message_path, class: "badge-link", id: "compose-badge" do + %i.diaspora-custom-compose + + -# Menu + %li + %button.navbar-toggle#menu-badge{type: "button"} + %span.sr-only + %span.icon-bar + %span.icon-bar + %span.icon-bar diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index c0c721c62..5ba79ce0c 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -52,69 +52,8 @@ %body #app - if user_signed_in? - %header#main_nav - #nav_badges - -# Notifications - = link_to notifications_path, class: "badge", id: "notification_badge" do - = image_tag("mobile/notifications_white.png") - - if current_user.unread_notifications.size > 0 - %span.badge_count{id: "notification"} - = current_user.unread_notifications.size - -# Conversations - = link_to conversations_path, class: "badge", id: "conversations_badge" do - = image_tag("mobile/mail_white.png", id: "conversation_icon") - - if current_user.unread_message_count > 0 - %span.badge_count{id: "conversation"} - = current_user.unread_message_count - -# Publisher - = link_to(image_tag("mobile/compose_mobile.png"), new_status_message_path, class: "badge", id: "compose_badge") - -# Menu - = link_to(image_tag("mobile/menu.png"), "#", id: "menu_badge", class: "badge") - = link_to(image_tag("mobile/asterisk_white_mobile.png"), stream_path, id: "header_title") - - - if user_signed_in? - #drawer - %header - #global_search - = form_tag('/search', method: 'get', class: 'search_form', "accept-charset" => "UTF-8") do - %div - = hidden_field_tag "utf8", "✓" - = search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", autocomplete: "off", class: "ac_input form-control" - %nav - %ul - %li - = link_to t("streams.activity.title"), activity_stream_path - %li - = link_to t("streams.mentions.title"), mentioned_stream_path - %li#all_aspects - = link_to t('streams.aspects.title'), "#" - %li.no_border.hide - %ul - - current_user.aspects.each do |aspect| - %li - = link_to aspect.name, aspects_stream_path(a_ids: [aspect.id]) - %li#followed_tags - = link_to t('streams.followed_tag.title'), "#" - %li.no_border.hide - %ul - - current_user.followed_tags.each do |tag| - %li - = tag_link(tag) - - if current_user.followed_tags.length > 0 - %li.manage_followed_tags - = link_to t("tag_followings.manage.title"), manage_tag_followings_path - %li - = link_to user_profile_path(current_user.username) do - = t('layouts.header.profile') - = person_image_tag(current_user, size: :thumb_small) - %li - = link_to t('_contacts'), contacts_path - %li - = link_to t('layouts.header.settings'), users_edit_path - %li - = link_to t('layouts.application.toggle'), toggle_mobile_path - %li - = link_to t('layouts.header.logout'), destroy_user_session_path, method: :delete + = render "layouts/header" + = render "layouts/drawer" #main{:role => "main"} - if current_page?(:activity_stream) diff --git a/features/mobile/drawer.feature b/features/mobile/drawer.feature index ef96f5105..fc1761e4d 100644 --- a/features/mobile/drawer.feature +++ b/features/mobile/drawer.feature @@ -15,19 +15,19 @@ Feature: Navigate between pages using the header menu and the drawer Scenario: navigate to the stream page When I open the drawer And I follow "My activity" - And I click on selector "#header_title" + And I click on selector "#header-title" Then I should see "There are no posts yet." within "#main_stream" Scenario: navigate to the notification page - When I click on selector "#notification_badge" + When I click on selector "#notification-badge" Then I should see "Notifications" within "#main" Scenario: navigate to the conversation page - When I click on selector "#conversations_badge" + When I click on selector "#conversations-badge" Then I should see "Inbox" within "#main" Scenario: navigate to the publisher page - When I click on selector "#compose_badge" + When I click on selector "#compose-badge" Then I should see "All aspects" within "#new_status_message" Scenario: search a user @@ -66,7 +66,7 @@ Feature: Navigate between pages using the header menu and the drawer And I search for "#boss" And I click on selector ".tag_following_action" # Loading another page to refresh the drawer and make the now followed tag appears - And I click on selector "#compose_badge" + And I click on selector "#compose-badge" And I open the drawer And I follow "#Followed tags" Then I should see "#boss" within "#followed_tags + li > ul" diff --git a/features/mobile/multiphoto.feature b/features/mobile/multiphoto.feature index f36966b3e..df8386fca 100644 --- a/features/mobile/multiphoto.feature +++ b/features/mobile/multiphoto.feature @@ -7,7 +7,7 @@ Feature: viewing photos on the mobile main page Background: Given a user with username "bob" When I sign in as "bob@bob.bob" on the mobile website - And I click on selector "#compose_badge" + And I click on selector "#compose-badge" Scenario: view full size image Given I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher" diff --git a/features/step_definitions/mobile_steps.rb b/features/step_definitions/mobile_steps.rb index 3162abd72..376e7dbda 100644 --- a/features/step_definitions/mobile_steps.rb +++ b/features/step_definitions/mobile_steps.rb @@ -1,17 +1,17 @@ When /^I toggle the mobile view$/ do - visit('/mobile/toggle') + visit("/mobile/toggle") end Given /^I visit the mobile publisher page$/ do - visit('/status_messages/new.mobile') + visit("/status_messages/new.mobile") end When /^I visit the mobile search page$/ do - visit('/people.mobile') + visit("/people.mobile") end When /^I open the drawer$/ do - find('#menu_badge').click + find("#menu-badge").click end Then /^the aspect dropdown within "([^"]*)" should be labeled "([^"]*)"/ do |selector, label|