From 3a5406a6e1e7b77ca965857bffb9297c3ebefc73 Mon Sep 17 00:00:00 2001 From: augier Date: Sun, 2 Aug 2015 21:38:02 +0200 Subject: [PATCH] Styling of mobile header compilant with desktop version --- app/assets/images/fonts/diaspora-custom.ttf | Bin 0 -> 1796 bytes .../images/fonts/svg-icons/compose_mobile.svg | 21 +++ .../images/fonts/svg-icons/mail_white.svg | 18 +++ app/assets/images/mobile/compose_mobile.png | Bin 1520 -> 0 bytes app/assets/images/mobile/mail_white.png | Bin 992 -> 0 bytes app/assets/images/mobile/menu.png | Bin 262 -> 0 bytes .../images/mobile/notifications_white.png | Bin 2357 -> 0 bytes .../images/mobile/pencil_mobile_grey.png | Bin 1316 -> 0 bytes .../mobile/pencil_mobile_grey_active.png | Bin 871 -> 0 bytes app/assets/javascripts/mobile/mobile.js | 2 +- app/assets/stylesheets/mobile/header.scss | 131 ++++++++++-------- app/assets/stylesheets/mobile/mobile.scss | 9 +- .../stylesheets/new_styles/_typography.scss | 27 ++++ app/views/layouts/_drawer.mobile.haml | 35 +++++ app/views/layouts/_header.mobile.haml | 35 +++++ app/views/layouts/application.mobile.haml | 65 +-------- features/mobile/drawer.feature | 10 +- features/mobile/multiphoto.feature | 2 +- features/step_definitions/mobile_steps.rb | 8 +- 19 files changed, 229 insertions(+), 134 deletions(-) create mode 100644 app/assets/images/fonts/diaspora-custom.ttf create mode 100644 app/assets/images/fonts/svg-icons/compose_mobile.svg create mode 100644 app/assets/images/fonts/svg-icons/mail_white.svg delete mode 100644 app/assets/images/mobile/compose_mobile.png delete mode 100644 app/assets/images/mobile/mail_white.png delete mode 100644 app/assets/images/mobile/menu.png delete mode 100644 app/assets/images/mobile/notifications_white.png delete mode 100644 app/assets/images/mobile/pencil_mobile_grey.png delete mode 100644 app/assets/images/mobile/pencil_mobile_grey_active.png create mode 100644 app/views/layouts/_drawer.mobile.haml create mode 100644 app/views/layouts/_header.mobile.haml diff --git a/app/assets/images/fonts/diaspora-custom.ttf b/app/assets/images/fonts/diaspora-custom.ttf new file mode 100644 index 0000000000000000000000000000000000000000..4b21e9b84da8b55ed39b28e17a22e3a4021def56 GIT binary patch literal 1796 zcmcgtO>7%Q6#m}q?5^Y3ah$q#TY}?4DO4qnvq|izZsSx+oVFAiDOChg(%>Y{kJQ+a zouYE%z<~=ALWLVb;=&OSTtOfq1Y9Bx2qBPKsUU%nxS$^RX~H+_H3~(llnX1(&iB6e z=FK-VZ)YI@qIdxorpx8aPd3ZdZvf{fvb|FilVx~tXn#&Sb7^M4yY%PW+kiYxdvnc#d3Ahde*`IWmbpZF25dg;HhR;?`C_RVkU`<^YoMnVrL zo4y3?V{02**EtyIu!}vtKYV3dwT_+54AdaIL2qPt$4moroE5$ z8JlXfPn$sTx$z)O6yz1y2+2iRAvYEDcW@Xln*4T05P47b>6OW4jH7}@xwU%>frhq% zmZFxvHfA2~x!-z&xCvTDb1(Hh#@=Bs{-PFnLguNMe)p|*UW(w>x0gxr!4~+jtykN* zhuSx^THCenasU4SQ+K{tzd8=$IEGLJ4$F|2O7_XYhtJ4>9E}gTU2;+i$4e?-$QOl< zm~skZQj+|DxK3IX9*vPL$wwbXIui$S-Q7E%Jf~Fn{P_>8czk}oBOLEZ_bn`BXC`#W zQj$#CTEd}sqQ%qEXt8K&N=f3t%mYVav7O8Dc*wG*&Mhyxx-WCKT8*Se#S)Q2sbses zk?pS1c(kijGP`9?u*MpE6=!h)7#Yr|lBp!cdsLrGB}cqOGUfHjFrn|sC(<(Fr4mC7 zGhHfKQeM6!iF`@Lj~23Kxvuk&h%OWq=Zw3q?Wj&Aw&U22C~_fJ#Ils5l(Hlo7WI<0 zQaxF{gZI1Vx^nXCk?-_h^PcEqkEp1&Ee5(`YvtHVizrc!W*()qdAY94X(h2}+S7&3#y{iFR}ZjizEpX0v^nWf4G7rO3i&u~Vg7qitybG=^63}$KUH)ree_0QV8 x + + + + + 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 22bfd6f770f035edb125f192b74bfede5e05fdc1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1520 zcmd5+>r>Kc6b6*I37HoNOxLVzE42%)ZILF43Yw#S|qMFJ%~FHRF_JvXM%T zRG4jpipy_{O(}G%ttN$>a7|#1vCT07GZV)p*Zs90cBh&B19r}w=bZCA?|J9U`EaTe z6JoGv5*h-5U>S5;G8o%HzlK}{B6%)e0)|Bg<6>x#g-<5aw2DCn#iM6_3xQxfKRFcA zcx5R_BKVB>D1_M!OCYZxo!z(%q=@{e41Q!GmwUK?4~Z-~e1L!W8~@T=KF2?X5ucb| zi6cND@C*ixno>4wGe18{Vt7Sc?(fA3-5+bk(Cco4L>Y3Bs2~p|yDFC`e4$^$F80)c zHsf-A?GyOH8{_r{ilF~`Y&24E_g)>F8Bml~yONx@%2xLEEw0bbvJXW$JEmp=7-p!GZ13ImSE&sznFFx{$;n2|v5sj~Z$<1M&-co=I(;q6Hr}l^Jo|IPGJ2Bi z#4$;p6W1s;+uzi7uc8EdBi7}%PUpUk%v-6c&vap~#X9`>n5GN)M13A<1qf}1w9~p2b>fO~9}d)r$wyj}##DqyXPjdb06dsoSeaVt zTh(a^d7;sI0K$29Yo2Fi7c7`vUfJYsS_JlE9Wc`bZ^G_%whM5j{b1bDfu>0>x1S)WkR3}3@B?;4J&^+YtC(ut(=0V~vqPE#n#DzyfxHAxnBB>6hYj3i5HCIeDmlI|oICF$-+(v#$zBy*Bnp5*%^YEJ!X zU6T1#Rb7?j*d!mse|il2VJcq1R<#=1f_E?rlW<>yPj(piNg1>^Zp1qLGtS|y$D+dI zRJ^(UkLhQ^Cfr#_pMsUxJPyJ2;v-y!Jun-;?Kmhq39teumTi3x){Y~1KjJwYgk$jR z{|(G80)2<;u@5f5s&Vjc{1n%s16N}8&IV@y0sHU_rr}ULQvRW_ra$l!j>Hjoa3GU1 zhy^}ISEygP>AeTF%u>Mkie%}4`m{7VlPt8*Nl!iL=#+}2{*reg{g;Mc(f$PgEP z3m2D@`nqC&b~k;AdBvWbkM5xa$uJW5wiwENaauX4b{EgM9OsqX@4%X&2FfrK>BDO{ zqa<@PzG`!OvJjJTI-Vb{tH=l?_IWYi70$%VZ3ypeT#AXfp_t@hD?Fb2cw-ddt;W^Z6P?9+{XLQkq)CbYf){WA4k=f` z#sSl+gJx;j4U=&{erU!bY2pL)7K3_4sm2S78E>|J#!Z-j8Krx&rCE!m1rPKSo-7@W z!^``qSz3jYu~&h(w%HY*7Hy|3cptM$HFgyrIg-_WZvl5$xzqNx;=x)4aC;v%zd$@1 z%SIsP7sWbN#ip!jrJ-*%z(zH$C|!>Z+*a<`L(!6Qot%V6i?MI1Mgw3&-{6{3jWccg z<}jF3zO&3d$+jNesAx0+HmY$k_P4D~_7FDiV$SP0xK!^gt$NqBE5L?6#JQ!SI`!WL z-iTYvn5m^9FzRX-fbb{oDktd_yokTb&EY*9U#hOtAbWPrRE2i?h`v0@f~u-|FgMAh zBu^xnnB;*ZbK5D|b_AFt>yzA_WLZ^JeK;%0(@CbcTcYg>u%SgsHYJ%?Dls*{F{X|h zK@G45SOcs9)~W&40Be9Xz*;rH8ek2u23V^GSOcs9jvGx#(pzH~y8Z?BM|lG+8Me9r O0000FdgVmxoh~pKZ;Z#797($(}BbAs)xyPT9zN$brZ8{{9%p z=7fgH8ksNGC(QCW8uX@sTZL6fMEvrSh0a|(z4w{ozipq-aOMr0%!kxzCY#vaoyjq* zpBD96Qh~AB;m6{jQ=A^06(5zOvi%b-?0R%^_vL%Pm7mwJzLRvgB)Eg2`SS+Z7xJ;Q zZf?8usH0Af3V~5$F4&HK<6=dy85}Sb4q9e E0C>P*H2?qr diff --git a/app/assets/images/mobile/notifications_white.png b/app/assets/images/mobile/notifications_white.png deleted file mode 100644 index 3f94e2848dbcdc8955a0bfb2369eee1612c071b1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2357 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 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|