New menu for the mobile version #4673

Merged
merged 15 commits into from Feb 9, 2014

Conversation

Projects
None yet
8 participants
Contributor

Flaburgan commented Jan 6, 2014

This pull request contains the work of @taratatach and myself.
It adds a drawer to the mobile version, allowing the user to do actions which was hard to access before (aspects stream, log out, toggle mobile, contacts, settings, search and activity stream...)

screen

We also change the header menu, which is now way more easy to click, and change the icon to white to have a bigger contrast (useful when your outside with your mobile)

menu-after

Bonus: when you're in the drawer, you now have a direct access to the search field :D

@Flaburgan Flaburgan and 1 other commented on an outdated diff Jan 6, 2014

app/views/layouts/application.mobile.haml
+ = 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"
+
+ .container
+ %nav
+ %ul
+ %li
+ = link_to t("streams.activity.title"), activity_stream_path
+ %li
+ = t('streams.aspects.title')
+ %li
+ %ul#aspects_list
+ %li
+ = "One Aspect"
@Flaburgan

Flaburgan Jan 6, 2014

Contributor

We need help here, we didn't success to load the aspects list of the user..

@jhass

jhass Jan 6, 2014

Owner

You mean current_user.aspects?

Contributor

Flaburgan commented Jan 7, 2014

Can someone launch travis please? Dunno why it doesn't start again.

Ready to review btw.

Owner

Raven24 commented Jan 7, 2014

if travis doesn't run, you probably have to rebase (I guess)

Contributor

Flaburgan commented Jan 7, 2014

Travis is green :)

@jhass jhass commented on an outdated diff Jan 7, 2014

app/views/layouts/application.mobile.haml
+ %div
+ = hidden_field_tag "utf8", ""
+ = search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", autocomplete: "off", class: "ac_input"
+
+ .container
+ %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
+ - for aspect in current_user.aspects
@jhass

jhass Jan 7, 2014

Owner

Nitpick but we tend to prefer current_user.aspects.each do |aspect|

@fabianrbz fabianrbz commented on an outdated diff Jan 7, 2014

app/views/layouts/application.mobile.haml
@@ -46,35 +46,75 @@
= yield(:head)
%body
- %header
- = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title')
+ #app
+ %header#main_nav
+ = link_to(image_tag('icons/asterisk_white_mobile.png'), stream_path, id: 'header_title')
+ - if user_signed_in?
+ #nav_badges
+ -# Notifications
+ = link_to notifications_path, class: "badge", id: "notification_badge" do
+ = image_tag('icons/notifications_white.png')
+ - if current_user.unread_notifications.count > 0
@fabianrbz

fabianrbz Jan 7, 2014

Contributor

can you use #size instead of #count everywhere? that way we can save a sql query or a cache hit

@fabianrbz fabianrbz commented on an outdated diff Jan 7, 2014

app/views/layouts/application.mobile.haml
+ - if user_signed_in?
+ #nav_badges
+ -# 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?

Flaburgan referenced this pull request Jan 14, 2014

Closed

Add Aspects On Mobile #4694

Contributor

maliktunga commented Jan 18, 2014

Shouldn't the drawer have icons as well? Like a silhouette for Profile, a cog for the settings and the shutdown icon for Log out...

Contributor

Flaburgan commented Jan 21, 2014

@maliktunga I thought about that yeah, but I'm not a designer. If you want to help with that, you're welcome ;)

In a different topic, it looks like users have bugs with the current mobile version:

This is another good reason to review this PR \o/

@Flaburgan Flaburgan referenced this pull request in goobertron/diaspora Jan 31, 2014

@goobertron goobertron Caught more instances 2b9692a

@fabianrbz fabianrbz commented on an outdated diff Feb 2, 2014

app/assets/javascripts/mobile.js
@@ -25,6 +25,39 @@ $(document).ready(function(){
.toggleClass('inactive');
};
+ /* Drawer menu */
+ $('#menu_badge').bind("tap click", function(evt){
+ evt.preventDefault();
+ toggleDrawerMenu();
+ });
+
+ var toggleDrawerMenu = function(){
+ var app = $("#app");
+
+ if (app.hasClass('draw')){

@fabianrbz fabianrbz commented on an outdated diff Feb 2, 2014

app/assets/javascripts/mobile.js
+ app.removeClass('draw');
+ } else {
+ app.addClass('draw');
+ }
+ };
+
+ /* Show / hide aspects in the drawer */
+ $('#all_aspects').bind("tap click", function(evt){
+ evt.preventDefault();
+ toggleAspectsMenu();
+ });
+
+ var toggleAspectsMenu = function(){
+ var aspect_list = $("#all_aspects + li");
+
+ if (aspect_list.hasClass('hide')){
@fabianrbz

fabianrbz Feb 2, 2014

Contributor

same as above, use toggleClass, it does the same in fewer lines :)

Contributor

Flaburgan commented Feb 8, 2014

@fabianrbz I replace the js code to use toggleClass. Any other suggestions? I would love to see that merged.

@jhass jhass added a commit that referenced this pull request Feb 9, 2014

@jhass jhass Merge pull request #4673 from Flaburgan/drawer-scrollable
New menu for the mobile version
11b3fe7

@jhass jhass merged commit 119ed2d into diaspora:develop Feb 9, 2014

Owner

jhass commented Feb 9, 2014

Nice work! Thank you!

jhass added this to the next milestone Feb 9, 2014

Contributor

Flaburgan commented Feb 9, 2014

Thank you :D

Member

svbergerem commented Feb 9, 2014

This is awesome! Thank you!

Looks very nice Flaburgan! :-) I often use the actual mobile website with smartphones und tablets. And the website ist horrible! :-(

Flaburgan deleted the Flaburgan:drawer-scrollable branch Jun 17, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment