friendlier mobile buttons

Changelog.md

@@ -36,7 +36,7 @@
 * User interface enhancements [#3832](https://github.com/diaspora/diaspora/pull/3832), [#3839](https://github.com/diaspora/diaspora/pull/3839), [#3834](https://github.com/diaspora/diaspora/pull/3834), [#3840](https://github.com/diaspora/diaspora/issues/3840), [#3846](https://github.com/diaspora/diaspora/issues/3846), [#3851](https://github.com/diaspora/diaspora/issues/3851), [#3828](https://github.com/diaspora/diaspora/issues/3828), [#3874](https://github.com/diaspora/diaspora/issues/3874), [#3806](https://github.com/diaspora/diaspora/issues/3806), [#3906](https://github.com/diaspora/diaspora/issues/3906).
 * Add settings web mobile. [#3701](https://github.com/diaspora/diaspora/pull/3701)
 * Stream form on profile page [#3910](https://github.com/diaspora/diaspora/issues/3910).
-* Add Add Getting_Started page mobile. [#3949](https://github.com/diaspora/diaspora/issues/3949).
+* Add Getting_Started page mobile. [#3949](https://github.com/diaspora/diaspora/issues/3949).
 
 ## Bug Fixes
 
@@ -60,6 +60,7 @@
 * Excessive padding with select aspect in mobile publisher. [#3951](https://github.com/diaspora/diaspora/issues/3951)
 * Adapt css for search mobile page. [#3953](https://github.com/diaspora/diaspora/issues/3953)
 * Twitter/Facebook/Tumblr count down characters is hidden by the picture of the post. [#3963](https://github.com/diaspora/diaspora/issues/3963)
+* Buttons on mobile are hard to click on. [#3973](https://github.com/diaspora/diaspora/issues/3973)
 
 ## Gem Updates
 

app/assets/stylesheets/mobile.css.scss

@@ -307,7 +307,7 @@ body {
   #nav_badges .badge {
     position: relative;
     display: inline;
-    margin: 0 2px;
+    margin-left: 3px;
     padding: 8px 3px;
       padding-bottom: 9px;
     font-weight: bold;
@@ -322,13 +322,26 @@ body {
   border-radius: 2px 2px 2px 2px;
   z-index: 3;
   position: absolute;
-  top: -2px;
+  top: 1px;
-  left: 13px;
   padding: 0 2px;
     padding-bottom: 1px;
   background-color: #a40802;
   line-height: 12px;
-  color: white; }
+  color: white;
+  font-size: smaller;
+}
+
+#notification {
+  right: 140px;
+}
+
+#conversation {
+  right: 110px;
+}
+
+.badge-inverse {
+  background-color: #333333 !important;
+}
 
 #header_title {
   position: relative;

app/views/layouts/application.mobile.haml

@@ -52,22 +52,17 @@
           
           - if user_signed_in?
             #nav_badges
-              .badge{:class => "badge-inverse", :id => "my_activity_badge"}
+              = link_to(image_tag('icons/my_activity.png', :height => 16, :width => 16), activity_stream_path, :class => "badge badge-inverse", :id => "my_activity_badge")
-                = link_to(image_tag('icons/my_activity.png', :height => 16, :width => 16), activity_stream_path)
+              = link_to(image_tag('icons/notifications_grey.png', :height => 16, :width => 16, :id => 'notification-flag'), notifications_path, :class => "badge badge-inverse", :id => "notification_badge")
-              .badge{:class => "badge-inverse", :id => "notification_badge"}
+              - if current_user.unread_notifications.count > 0
-                = link_to(image_tag('icons/notifications_grey.png', :height => 16, :width => 16, :id => 'notification-flag'), notifications_path)
+                .badge_count{:id => "notification"}
-                - if current_user.unread_notifications.count > 0
+                  = current_user.unread_notifications.count
-                  .badge_count
+              = link_to(image_tag('icons/mail_grey.png', :height => 11, :width => 17), conversations_path, :class => "badge badge-inverse", :id => "conversations_badge")
-                    = current_user.unread_notifications.count
+              - if current_user.unread_message_count > 0
-              .badge{:class => "badge-inverse", :id => "conversations_badge"}
+                .badge_count{:id => "conversation"}
-                = link_to(image_tag('icons/mail_grey.png', :height => 11, :width => 17), conversations_path)
+                  = current_user.unread_message_count
-                - if current_user.unread_message_count > 0
+              = link_to(image_tag('icons/search_grey.png', :height => 14, :width => 14), people_path, :class => "badge badge-inverse", :id => "people_badge")
-                  .badge_count
+              = link_to(image_tag('icons/user_grey.png', :height => 16, :width => 16), contacts_path, :class => "badge badge-inverse", :id => "contacts_badge")
-                    = current_user.unread_message_count
-              .badge{:class => "badge-inverse", :id => "people_badge"}
-                = link_to(image_tag('icons/search_grey.png', :height => 14, :width => 14), people_path)
-              .badge{:class => "badge-inverse", :id => "contacts_badge"}
-                = link_to(image_tag('icons/user_grey.png', :height => 16, :width => 16), contacts_path)
               - if yield(:header_action).present?
                 = yield(:header_action)
               - else