Styling of mobile header compilant with desktop version

app/assets/images/fonts/svg-icons/compose_mobile.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   viewBox="0 0 744.09448819 1052.3622047"
+   height="40px"
+   width="40px">
+  <g
+     style="display:inline"
+     id="layer1"
+     transform="matrix(4.9383994,0,0,5.2618096,-1527.6262,-2214.8726)">
+    <path
+       id="path3511"
+       d="m 278.125,520.93362 0,-100 79.0625,0.0138 c 43.48437,0.008 81.17062,0.36221 83.74721,0.7881 3.3747,0.55781 6.95755,2.85698 12.8125,8.22198 l 8.12779,7.44764 0,16.13926 0,16.13926 -10,0 -10,0 -0.0158,-10.3125 -0.0157,-10.3125 -6.77054,-5.9375 -6.77057,-5.9375 -66.3387,0 -66.33869,0 0,83.75 0,83.75 24.54911,0 24.54912,0 -0.77696,6.5625 c -0.47778,4.0355 -1.59948,7.16416 -2.91302,8.125 -1.57019,1.14856 -10.18586,1.5625 -32.52216,1.5625 l -30.38609,0 0,-100 z m 75.01385,98.75856 c -0.95897,-0.59267 0.76874,-9.48251 5.61079,-28.86997 l 6.99644,-28.01359 39.00196,-39.14467 c 21.45108,-21.52956 40.5209,-39.95144 42.37738,-40.9375 1.87165,-0.99411 6.78352,-1.79283 11.02537,-1.79283 l 7.64993,0 12.71105,12.39542 12.71105,12.39542 0,12.61571 0,12.6157 -39.44885,39.44886 -39.44886,39.44885 -19.28755,4.7892 c -18.3445,4.55503 -36.89916,6.90323 -39.89871,5.0494 z m 33.55295,-18.06936 c 3.68049,-0.97963 6.89841,-1.98775 7.15094,-2.24027 0.25252,-0.25253 -3.66299,-4.55375 -8.70115,-9.55828 l -9.16028,-9.09915 -2.11015,8.40052 c -2.09814,8.35273 -2.09435,8.41733 0.66474,11.35425 3.24463,3.45376 3.41414,3.46969 12.1559,1.14293 z m 66.1351,-79.11794 -5.26283,-5.36242 -24.7019,24.67873 -24.70189,24.67874 5.26282,5.36243 5.26282,5.36242 24.70191,-24.67873 24.70189,-24.67875 -5.26282,-5.36242 z"
+       style="fill:#fefefe"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

app/assets/images/fonts/svg-icons/mail_white.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="70px"
+   height="40px">
+  <path
+     style="fill:#fefefe"
+     d="M 0,20.50854 C 0,4.9747198 0.0555205,1.0473598 0.2734375,1.1662098 c 0.15039063,0.082 3.756821,2.50162 8.0142897,5.3768802 4.2574688,2.87526 7.7723718,5.18087 7.8108958,5.12358 0.03852,-0.0573 0.197328,0.049 0.352898,0.23633 0.304769,0.36687 4.329729,3.16109 4.329729,3.00579 0,-0.0515 0.312191,0.17793 0.693756,0.50984 0.381567,0.33191 0.775316,0.55547 0.875001,0.49679 0.09968,-0.0587 0.181243,-0.0199 0.181243,0.0863 0,0.17515 1.4204,1.17408 1.798547,1.26487 0.08686,0.0208 0.475045,0.31377 0.862638,0.65092 0.387595,0.33716 0.740563,0.57887 0.784377,0.53714 0.04381,-0.0417 0.388343,0.19265 0.765625,0.52084 0.37728,0.32818 0.721811,0.56256 0.765625,0.52083 0.04381,-0.0417 0.386174,0.19076 0.760803,0.51664 0.374632,0.32588 0.762708,0.5445 0.862392,0.48583 0.09968,-0.0587 0.181243,-0.0233 0.181243,0.0786 0,0.23477 1.966416,1.59121 1.975402,1.36264 0.0037,-0.0931 0.106984,-0.005 0.22962,0.19539 0.122631,0.20052 0.311441,0.36458 0.419578,0.36458 0.108138,0 0.462148,0.23437 0.786697,0.52083 0.324548,0.28646 0.712838,0.52084 0.862866,0.52084 0.150029,0 0.334847,0.15404 0.410707,0.34232 0.07587,0.18827 0.199705,0.28348 0.275212,0.21157 0.07551,-0.0719 0.255963,0.0238 0.401017,0.21275 0.236803,0.30843 0.400949,0.25183 1.607568,-0.55426 0.739108,-0.49376 1.343833,-0.97792 1.343833,-1.0759 0,-0.098 0.07758,-0.15471 0.17241,-0.12607 0.18371,0.0555 18.700235,-12.40475 19.349573,-13.02083 0.211348,-0.20052 0.384267,-0.32198 0.384267,-0.26991 0,0.0521 2.534765,-1.618 5.632812,-3.7112702 3.098048,-2.09326 5.903516,-3.97477 6.234375,-4.18113 L 70,0.9937498 70,20.49687 70,40 35,40 0,40 0,20.50854 Z M 24.49916,15.76283 C 18.904168,11.96306 11.380861,6.86198 7.7806989,4.4270798 L 1.234951,-2e-7 l 33.759559,0 33.759558,0 -3.478598,2.36022 C 43.901195,16.86261 35.18624,22.70533 34.951873,22.68991 34.797875,22.67978 30.094154,19.56259 24.49916,15.76283 Z"
+     id="path3371"
+     inkscape:connector-curvature="0" />
+</svg>

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");
   });

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;
 
-    .badge {
-      display: inline;
-      margin: 0 4px;
-      padding: 10px 6px;
-      font-weight: bold;
-      font-size: smaller;
+    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;
+            }
+          }
+        }
+      }
     }
 
-    .badge_count {
-      border-radius: 2px;
+    .navbar-toggle {
+      display: unset;
+      margin: 6px 15px;
+    }
+
+    .badge {
       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 {

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;

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";
+}

app/views/layouts/_drawer.mobile.haml

+#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

app/views/layouts/_header.mobile.haml

+.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

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)

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"

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"

features/step_definitions/mobile_steps.rb

 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|