diff --git a/app/assets/images/icons/asterisk_white_mobile.png b/app/assets/images/icons/asterisk_white_mobile.png new file mode 100644 index 000000000..9fcb0eea8 Binary files /dev/null and b/app/assets/images/icons/asterisk_white_mobile.png differ diff --git a/app/assets/images/icons/compose_mobile.png b/app/assets/images/icons/compose_mobile.png index b3284d33b..bab735201 100644 Binary files a/app/assets/images/icons/compose_mobile.png and b/app/assets/images/icons/compose_mobile.png differ diff --git a/app/assets/images/icons/mail_white.png b/app/assets/images/icons/mail_white.png new file mode 100644 index 000000000..ad215505f Binary files /dev/null and b/app/assets/images/icons/mail_white.png differ diff --git a/app/assets/images/icons/menu.png b/app/assets/images/icons/menu.png index d63e735af..59b11180c 100755 Binary files a/app/assets/images/icons/menu.png and b/app/assets/images/icons/menu.png differ diff --git a/app/assets/images/icons/notifications_white.png b/app/assets/images/icons/notifications_white.png new file mode 100644 index 000000000..3f94e2848 Binary files /dev/null and b/app/assets/images/icons/notifications_white.png differ diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss index 40f38c34b..7e0e1beca 100644 --- a/app/assets/stylesheets/mobile.css.scss +++ b/app/assets/stylesheets/mobile.css.scss @@ -22,7 +22,7 @@ body { } #main.container { - padding-top: 55px; + margin: 55px 10px 0px 10px; } h3 { @@ -33,17 +33,6 @@ h3 { clear: both; } -#menu_badge { - float: right; - display: inline-block; - padding: 0px 10px 0px 12px; - margin-top: 3px; - - img.menu { - height: 40px; - } -} - #app { position: relative; left: 0; @@ -162,10 +151,6 @@ h3 { } } -.row { - margin-left: 20px !important; -} - .message { padding-left: 2px; } @@ -312,8 +297,6 @@ h3 { #main_stream { - margin-left: 10px; - margin-right: 10px; .from { white-space: nowrap; overflow: hidden; @@ -471,7 +454,12 @@ header { @include box-shadow(0, 1px, 2px, #333); border-bottom: 1px solid #222; - #header_title { display: inline-block; } + #header_title { + display: inline-block; + width: 30px; + height: 30px; + padding: 7px; + } #nav_badges { float: right; @@ -480,49 +468,32 @@ header { .badge { display: inline; - margin-left: 3px; - padding: 8px 3px; - padding-bottom: 9px; + margin: 0px 4px; + padding: 10px 6px; font-weight: bold; font-size: smaller; - width: 28px; + background-color: #333333; + + img { + height: 30px; + width: 30px; + } } - .badge:hover .badge_count { - background-color: #bd0902; + .badge_count { + @include border-radius(2px); + z-index: 3; + position: absolute; + top: 3px; + padding: 1px 3px; + background-color: $red; + margin-left: -8px; } - - a { - padding: 5px 0px; + + #conversation_icon { + height: 18px; } } - - .badge_count { - -moz-border-radius: 2px 2px 2px 2px; - -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; - } } footer { @@ -687,12 +658,7 @@ footer { } #new_status_message { - text-align: left; - position: absolute; - left: 0; - top: 40px; - width: 100%; - min-height: 250px; + margin: 0px; fieldset { padding: 10px; @@ -799,12 +765,6 @@ select { } } -.compose_icon { - height: 28px; - width: 28px; - margin-left: 10px; -} - .navbar-inner .right { position: absolute; right: 12px; @@ -835,28 +795,6 @@ select { margin-bottom: 5px; } -#header-nav { - font-weight: bold; - height: 100%; - margin-right: 5px; - margin-top: 3px; -display: inline-block; -} - -#header-nav a { - padding: 0 10px; - width: 100%; - color: $text-grey; -} - -#header-nav > div { - display: inline; - font-weight: bold; - margin: 0 2px; - position: relative; - width: 28px; -} - .message_count { border-radius: 2px 2px 2px 2px; float: right; diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index 1eeae2c54..6e9591d94 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -48,23 +48,30 @@ %body #app %header#main_nav - = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title') + = link_to(image_tag('icons/asterisk_white_mobile.png'), stream_path, id: 'header_title') - if user_signed_in? - = link_to(image_tag('icons/menu.png', :class => 'menu'),"#", id: "menu_badge") - #nav_badges - = 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 - .badge_count{id: "notification"} - = 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") - - if current_user.unread_message_count > 0 - .badge_count{id: "conversation"} - = current_user.unread_message_count + -# Notifications + = link_to notifications_path, class: "badge", id: "notification_badge" do + = image_tag('icons/notifications_white.png') + - if current_user.unread_notifications.count > 0 + %span.badge_count{id: "notification"} + = current_user.unread_notifications.count + -# Conversations + = link_to conversations_path, class: "badge", id: "conversations_badge" do + = image_tag('icons/mail_white.png', id: 'conversation_icon') + - if current_user.unread_message_count > 0 + %span.badge_count{id: "conversation"} + = current_user.unread_message_count + -# Composition - if yield(:header_action).present? = yield(:header_action) - else - = link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path) + = link_to(image_tag('icons/compose_mobile.png'), new_status_message_path, class: "badge") + -# Menu + = link_to(image_tag('icons/menu.png'), "#", id: "menu_badge", class: "badge") + + #main.container{:role => "main"} - if current_page?(:activity_stream) diff --git a/app/views/shared/_publisher.mobile.haml b/app/views/shared/_publisher.mobile.haml index 23cd4d299..31720888a 100644 --- a/app/views/shared/_publisher.mobile.haml +++ b/app/views/shared/_publisher.mobile.haml @@ -9,9 +9,8 @@ = include_gon = form_for StatusMessage.new, {:data => {:ajax => false}} do |status| - #message_container - = status.hidden_field :provider_display_name, :value => 'mobile' - = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :rows => 4, :autofocus => "autofocus" + = status.hidden_field :provider_display_name, :value => 'mobile' + = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :rows => 4, :autofocus => "autofocus" %fieldset %span#publisher_service_icons