diff --git a/Changelog.md b/Changelog.md index f70d5846d..15eef0061 100644 --- a/Changelog.md +++ b/Changelog.md @@ -47,6 +47,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure. * Remove unused header icons and an unused favicon [#6283](https://github.com/diaspora/diaspora/pull/6283) * Replace mobile icons for post interactions with Entypo icons [#6291](https://github.com/diaspora/diaspora/pull/6291) * Replace jquery.autocomplete with typeahead.js [#6293](https://github.com/diaspora/diaspora/pull/6293) +* Redesign sidebars on stream pages [#6309](https://github.com/diaspora/diaspora/pull/6309) ## Bug fixes * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852) diff --git a/app/assets/javascripts/app/views/aspect_view.js b/app/assets/javascripts/app/views/aspect_view.js index ef6a8c205..69367a6eb 100644 --- a/app/assets/javascripts/app/views/aspect_view.js +++ b/app/assets/javascripts/app/views/aspect_view.js @@ -8,7 +8,7 @@ app.views.Aspect = app.views.Base.extend({ className: 'hoverable', events: { - "click .entypo-check+a": "toggleAspect" + "click .aspect-item": "toggleAspect" }, toggleAspect: function(evt) { diff --git a/app/assets/javascripts/app/views/aspects_list_view.js b/app/assets/javascripts/app/views/aspects_list_view.js index d6575e3fb..321132857 100644 --- a/app/assets/javascripts/app/views/aspects_list_view.js +++ b/app/assets/javascripts/app/views/aspects_list_view.js @@ -31,7 +31,7 @@ app.views.AspectsList = app.views.Base.extend({ }, appendAspect: function(aspect) { - $("#aspects_list > *:last").before(new app.views.Aspect({ + $("#aspects_list > .hoverable:last").before(new app.views.Aspect({ model: aspect, attributes: {'data-aspect_id': aspect.get('id')} }).render().el); }, diff --git a/app/assets/javascripts/app/views/sidebar.js b/app/assets/javascripts/app/views/sidebar.js index d73dbf100..446137bb0 100644 --- a/app/assets/javascripts/app/views/sidebar.js +++ b/app/assets/javascripts/app/views/sidebar.js @@ -1,10 +1,10 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later app.views.Sidebar = app.views.Base.extend({ - el: '.rightBar', + el: ".rightbar", events: { - 'click input#invite_code': 'selectInputText' + "click input#invite_code": "selectInputText" }, selectInputText: function(event) { diff --git a/app/assets/javascripts/app/views/tag_following_view.js b/app/assets/javascripts/app/views/tag_following_view.js index 838fd896d..ef6d08e5d 100644 --- a/app/assets/javascripts/app/views/tag_following_view.js +++ b/app/assets/javascripts/app/views/tag_following_view.js @@ -9,7 +9,7 @@ app.views.TagFollowing = app.views.Base.extend({ tagName: "li", events : { - "click .delete_tag_following": "destroyModel" + "click .delete-tag-following": "destroyModel" }, initialize : function(){ @@ -31,6 +31,6 @@ app.views.TagFollowing = app.views.Base.extend({ tag : this.model }); } - + }); // @license-end diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index 549a7ff00..c866c1534 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -81,11 +81,11 @@ @import 'post-content'; /* right bar */ -@import 'sidebar'; +@import 'navbar_right'; /* contacts */ @import 'contacts'; -@import 'leftnavbar'; +@import 'navbar_left'; /* code */ @import 'new_styles/code'; diff --git a/app/assets/stylesheets/color_themes/_color_theme_override.scss b/app/assets/stylesheets/color_themes/_color_theme_override.scss index c9c0385a7..acdde2690 100644 --- a/app/assets/stylesheets/color_themes/_color_theme_override.scss +++ b/app/assets/stylesheets/color_themes/_color_theme_override.scss @@ -24,7 +24,7 @@ body { } } - #leftNavBar .hoverable:hover { background-color: $main-color-essence; } + #left-navbar .hoverable:hover { background-color: $main-color-essence; } .poll_form .progress .bar { background-color: $main-color-dark; } diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss index 272821cc7..b36b09f6b 100644 --- a/app/assets/stylesheets/colors.scss +++ b/app/assets/stylesheets/colors.scss @@ -25,6 +25,10 @@ $red: #A80000; $blue: #3F8FBA; $dark-blue: darken(#0984C8,10%); +$sidebars-background: #f0f0f0; +$sidebars-sub-background: darken($sidebars-background, 12%); +$left-navbar-drawer-background: darken($sidebars-background, 6%); + /* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */ $cyan : rgb(8,204,249); $yellow : rgb(242,244,9); diff --git a/app/assets/stylesheets/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss deleted file mode 100644 index 7d1ceacd1..000000000 --- a/app/assets/stylesheets/leftnavbar.scss +++ /dev/null @@ -1,127 +0,0 @@ -#leftNavBar { - a { - color: $link-grey; - font-weight: bold; - text-decoration: none; - } - - ul { - margin: 0px; - padding: 0px; - list-style: none; - } - - .selected { color: $black; } - .selected a { color: $black; } - - .hoverable { - display: block; - margin-right: 6px; - padding: 4px; - &:hover { background-color: $background-blue; } - } - - .selectable { - display: block; - margin-left: 21px; - overflow: hidden; - text-overflow: ellipsis; - } - - #home_user_badge { - border-bottom: 1px dashed $border-grey; - margin-bottom: 10px; - min-height: 50px; - padding-bottom: 20px; - padding-left: 4px; - - .avatar { - float: left; - height: 50px; - width: 50px; - } - - h4 { - margin-left: 60px; - padding-top: 15px; - overflow: hidden; - text-overflow: ellipsis; - - a { color: $black; } - } - } - - #stream_selection { - & > li { - margin-bottom: 5px; - } - } - - #aspects_list, #tags_list { - .hoverable > .action { - visibility: hidden; - margin: 0 3px; - } - .hoverable:hover > .action { - visibility: visible; - } - } - - #aspects_list { - .entypo-check { - float: left; - visibility: hidden; - &.selected { visibility: visible; } - } - .selected + a { - color: #333333; - } - } - - #tags_list { - .delete_tag_following { - font-size: 20px; - line-height: 15px; - } - - #new_tag_following { - margin-left: 20px; - margin-top: 5px; - } - - /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */ - .as-original{ width: 100%; } - .tag_input { - line-height: $font-size-base; - vertical-align: top; - width: 100%; - } - - .as-result { - margin-top: -1px; - margin-left: 1px; - } - - .as-list { - em { - background-color: #aabbcc; - color: black; - padding: 0px; - } - - color: black; - position: static; /* override absolute */ - margin: 0px; - border-radius: 0px 0px 3px 3px; - box-shadow: 0px 1px 1px #666; - } - - .as-result-item.active { - color: black; - text-shadow: none; - background-color: $background-blue; - border-color: $background-blue; - } - /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */ - } -} diff --git a/app/assets/stylesheets/navbar_left.scss b/app/assets/stylesheets/navbar_left.scss new file mode 100644 index 000000000..282136518 --- /dev/null +++ b/app/assets/stylesheets/navbar_left.scss @@ -0,0 +1,140 @@ +/* Fixed backgrounds are a common practice to avoid height issues */ +#left-navbar-fixed-sub-background { + background: $sidebars-sub-background; + position: fixed; + height: 100%; +} + +#left-navbar-fixed-background { + background: $sidebars-background; + border-right: 1px solid $light-grey; + position: fixed; + height: 100%; +} + +#left-navbar { + background: $sidebars-background; + border-right: 1px solid $light-grey; + a { + color: $link-grey; + font-weight: bold; + text-decoration: none; + outline: 0; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + &#stream_selection { + margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */ + } + } + + .selected, .selected a { color: $black; } + + .hoverable { + display: block; + &.selected a, &.selected a:hover, + .followed-tags-sidebar a.hoverable.selected { + color: white; + background: #666; + } + } + + a.hoverable, li.hoverable { + padding: 10px 20px; + display: block; + font-weight: normal; + color: $link-grey; + border-bottom: 1px solid #ddd; + &:hover, &:hover a, + &:hover .entypo-check{ + background-color: $blue; + color: $white; + } + &:not(:hover) [class^="entypo"] { visibility: hidden; } + .entypo-check.selected { visibility: visible; } + } + + #aspects_list, #tags_list { + background: $left-navbar-drawer-background; + li { padding: 0; } + .selectable { + display: block; + overflow: hidden; + text-overflow: ellipsis; + padding: 10px 20px 10px 40px; + } + .action.modify_aspect, .action.delete-tag-following { + position: relative; + bottom: 30px; + right: 20px; + } + } + + #home_user_badge { + min-height: 90px; + padding: 20px; + margin: 0 -15px; + + .avatar { + float: left; + height: 50px; + width: 50px; + } + + h4 { + margin: 0 0 0 60px; + overflow: hidden; + text-overflow: ellipsis; + line-height: 25px; + + a { + color: $black; + font-weight: normal; + } + } + } + + #tags_list { + #new_tag_following { + padding: 10px 20px 10px 30px; + } + + /* ---- override app/stylesheets/vendor/autoSuggest.css ---- */ + .as-original{ width: 100%; } + .tag_input { + line-height: $font-size-base; + vertical-align: top; + width: 100%; + } + + .as-result { + margin-top: -1px; + margin-left: 1px; + } + + .as-list { + em { + background-color: #aabbcc; + color: black; + padding: 0px; + } + + color: black; + position: static; /* override absolute */ + margin: 0px; + border-radius: 0px 0px 3px 3px; + box-shadow: 0px 1px 1px #666; + } + + .as-result-item.active { + color: black; + text-shadow: none; + background-color: $background-blue; + border-color: $background-blue; + } + /* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */ + } +} diff --git a/app/assets/stylesheets/sidebar.scss b/app/assets/stylesheets/navbar_right.scss similarity index 64% rename from app/assets/stylesheets/sidebar.scss rename to app/assets/stylesheets/navbar_right.scss index ecf57eb35..4a75bd450 100644 --- a/app/assets/stylesheets/sidebar.scss +++ b/app/assets/stylesheets/navbar_right.scss @@ -1,21 +1,39 @@ -.rightBar { +#right-sidebar-fixed-background { + height: 100%; + border-left: 1px solid $light-grey; + background: $sidebars-background; + position: fixed; + right: 0; +} +#right-sidebar-fixed-sub-background { + height: 100%; + background: $sidebars-sub-background; + position: fixed; + right: 0; +} + +.right-sidebar-padder { + max-width: 400px; +} +.rightbar { padding-top: 20px; + border-left: 1px solid $light-grey; + background: $sidebars-background; .section { margin-bottom: 20px; > .title { border-bottom: 1px solid $border-grey; - padding-bottom: 2px; + padding-bottom: 5px; &.no_icon { padding-left: 8px; } h5 { color: $text-dark-grey; - font-weight: bold; + font-weight: normal; font-size: $font-size-base; margin: 0; - &.title-header { margin-left: 5px; } } } @@ -23,7 +41,7 @@ color: $text-grey; font-size: $font-size-small; line-height: 18px; - padding: 5px; + padding: 10px 0; p, ul { margin: 0; } @@ -69,3 +87,9 @@ } } } + +@media screen and (min-width: 1200px) { + #right-sidebar-fixed-background { + margin-right: 8.33333%; /* Only for LARGE screens, same as lg-offset-1 class, BS3 does not provide right side offsetting */ + } +} diff --git a/app/assets/stylesheets/rtl.scss b/app/assets/stylesheets/rtl.scss index dc1e6c5e0..b54d18fe6 100644 --- a/app/assets/stylesheets/rtl.scss +++ b/app/assets/stylesheets/rtl.scss @@ -59,7 +59,7 @@ footer ul#footer_nav { right: auto; } -.rightBar .right { +.rightbar .right { margin-right: 70px; } diff --git a/app/assets/stylesheets/stream.scss b/app/assets/stylesheets/stream.scss index 55545d529..69a5b900b 100644 --- a/app/assets/stylesheets/stream.scss +++ b/app/assets/stylesheets/stream.scss @@ -1,5 +1,4 @@ .stream_container { - border-left: 1px solid $border-grey; padding-left: 10px; padding-top: 20px; margin-left: -10px; diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs index 07e4209ad..38c23ec22 100644 --- a/app/assets/templates/aspect_tpl.jst.hbs +++ b/app/assets/templates/aspect_tpl.jst.hbs @@ -1,9 +1,11 @@ + + {{#if selected}} + + {{else}} +
+ {{/if}} + {{name}} + -{{#if selected}} - -{{else}} -
-{{/if}} - {{name}} diff --git a/app/assets/templates/aspects-list_tpl.jst.hbs b/app/assets/templates/aspects-list_tpl.jst.hbs index 9883ad5b3..63c34834d 100644 --- a/app/assets/templates/aspects-list_tpl.jst.hbs +++ b/app/assets/templates/aspects-list_tpl.jst.hbs @@ -7,5 +7,5 @@ {{ t "aspect_navigation.add_an_aspect" }} -
+
diff --git a/app/assets/templates/tag_following_tpl.jst.hbs b/app/assets/templates/tag_following_tpl.jst.hbs index 61b564c9d..5733c7273 100644 --- a/app/assets/templates/tag_following_tpl.jst.hbs +++ b/app/assets/templates/tag_following_tpl.jst.hbs @@ -1,4 +1,6 @@ -× #{{ name }} + + + diff --git a/app/views/shared/_right_sections.html.haml b/app/views/shared/_right_sections.html.haml index 82af44da1..dc1ec229d 100644 --- a/app/views/shared/_right_sections.html.haml +++ b/app/views/shared/_right_sections.html.haml @@ -2,99 +2,93 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. +.right-sidebar-padder + + - if AppConfig.settings.invitations.open? + .section + .title + %h5.title-header + = t('shared.invitations.invite_your_friends') + .content + = render "shared/invitations" -- if AppConfig.settings.invitations.open? .section .title %h5.title-header - %i.entypo-plus - = t('shared.invitations.invite_your_friends') + = t('aspects.index.new_here.title') .content - = render "shared/invitations" + != t('aspects.index.new_here.follow', link: link_to("#"+t('shared.publisher.new_user_prefill.newhere'), tag_path(name: t('shared.publisher.new_user_prefill.newhere')))) + %br + = link_to(t('aspects.index.new_here.learn_more'), "http://wiki.diasporafoundation.org/Welcoming_Committee") -.section - .title - %h5.title-header - %i.entypo-users - = t('aspects.index.new_here.title') - .content - != t('aspects.index.new_here.follow', link: link_to("#"+t('shared.publisher.new_user_prefill.newhere'), tag_path(name: t('shared.publisher.new_user_prefill.newhere')))) - %br - = link_to(t('aspects.index.new_here.learn_more'), "http://wiki.diasporafoundation.org/Welcoming_Committee") - -.section - .title - %h5.title-header - %i.entypo-circled-help - = t('aspects.index.help.need_help') - .content - %p - = t('aspects.index.help.here_to_help') - %p - = t('aspects.index.help.do_you') - %ul - %li - != t('aspects.index.help.have_a_question', :link => link_to("#"+t('aspects.index.help.tag_question'), tag_path(:name => t('aspects.index.help.tag_question')))) - %li - != t('aspects.index.help.find_a_bug', :link => link_to("#"+t('aspects.index.help.tag_bug'), tag_path(:name => t('aspects.index.help.tag_bug')))) - %li - != t('aspects.index.help.feature_suggestion', :link => link_to("#"+t('aspects.index.help.tag_feature'), tag_path(:name => t('aspects.index.help.tag_feature')))) - %p - != t('aspects.index.help.tutorials_and_wiki', - :faq => link_to(t('_help'), help_path), - :tutorial => link_to(t('aspects.index.help.tutorial_link_text'), "https://diasporafoundation.org/tutorials", :target => '_blank'), - :wiki => link_to('Wiki','http://wiki.diasporafoundation.org', :target => '_blank'), :target => '_blank') - -- unless AppConfig.configured_services.blank? || all_services_connected? .section .title %h5.title-header - %i.entypo-cog - = t('aspects.index.services.heading') - .content - %div - = t('aspects.index.services.content') - - #right_service_icons - - AppConfig.configured_services.each do |service| - - if AppConfig.show_service?(service, current_user) - - unless current_user.services.any?{|x| x.provider == service} - = link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}") - -.section - .title - %h5.title-header - %i.entypo-bookmark - = t('bookmarklet.heading') - .content - != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code)) - -- if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address - .section - .title - %h5.title-header - %i.entypo-heart - = t('aspects.index.donate') + = t('aspects.index.help.need_help') .content %p - = t('aspects.index.keep_pod_running', :pod => AppConfig.pod_uri.host) - = render 'shared/donatepod' + = t('aspects.index.help.here_to_help') + %p + = t('aspects.index.help.do_you') + %ul + %li + != t('aspects.index.help.have_a_question', :link => link_to("#"+t('aspects.index.help.tag_question'), tag_path(:name => t('aspects.index.help.tag_question')))) + %li + != t('aspects.index.help.find_a_bug', :link => link_to("#"+t('aspects.index.help.tag_bug'), tag_path(:name => t('aspects.index.help.tag_bug')))) + %li + != t('aspects.index.help.feature_suggestion', :link => link_to("#"+t('aspects.index.help.tag_feature'), tag_path(:name => t('aspects.index.help.tag_feature')))) + %p + != t('aspects.index.help.tutorials_and_wiki', + :faq => link_to(t('_help'), help_path), + :tutorial => link_to(t('aspects.index.help.tutorial_link_text'), "https://diasporafoundation.org/tutorials", :target => '_blank'), + :wiki => link_to('Wiki','http://wiki.diasporafoundation.org', :target => '_blank'), :target => '_blank') + + - unless AppConfig.configured_services.blank? || all_services_connected? + .section + .title + %h5.title-header + = t('aspects.index.services.heading') + .content + %div + = t('aspects.index.services.content') + + #right_service_icons + - AppConfig.configured_services.each do |service| + - if AppConfig.show_service?(service, current_user) + - unless current_user.services.any?{|x| x.provider == service} + = link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}") -- if AppConfig.admins.podmin_email.present? .section .title %h5.title-header - %i.entypo-mail - = t('aspects.index.help.any_problem') + = t('bookmarklet.heading') .content - %p - = t('aspects.index.help.contact_podmin') - %p - = link_to t('aspects.index.help.mail_podmin'), "mailto:#{AppConfig.admins.podmin_email}", :class => "button" + != t('bookmarklet.explanation', :link => link_to(t('bookmarklet.post_something'), bookmarklet_code)) -.section - .title - .content - %ul - = render "shared/links" + - if AppConfig.settings.paypal_donations.enable? || AppConfig.bitcoin_donation_address + .section + .title + %h5.title-header + = t('aspects.index.donate') + .content + %p + = t('aspects.index.keep_pod_running', :pod => AppConfig.pod_uri.host) + = render 'shared/donatepod' + + - if AppConfig.admins.podmin_email.present? + .section + .title + %h5.title-header + = t('aspects.index.help.any_problem') + .content + %p + = t('aspects.index.help.contact_podmin') + %p + = link_to t('aspects.index.help.mail_podmin'), "mailto:#{AppConfig.admins.podmin_email}", :class => "button" + + .section + .title + .content + %ul + = render "shared/links" diff --git a/app/views/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml index 1effeb5b1..6c9479bd2 100644 --- a/app/views/streams/main_stream.html.haml +++ b/app/views/streams/main_stream.html.haml @@ -22,7 +22,9 @@ %div.container-fluid .row - .col-md-offset-1.col-md-2#leftNavBar + #left-navbar-fixed-sub-background.col-lg-1.visible-lg + #left-navbar-fixed-background.col-lg-offset-1.col-lg-2.col-md-3.hidden-sm.hidden-xs + #left-navbar.col-lg-offset-1.col-lg-2.col-md-3 #home_user_badge = owner_image_link %h4 @@ -37,16 +39,18 @@ = link_to t("streams.mentions.title"), mentioned_stream_path, rel: "backbone", class: "hoverable" %li.all_aspects = render "aspects/aspect_listings", stream: @stream - %li + %li.followed-tags-sidebar = render "tags/followed_tags_listings" .col-md-6 #aspect_stream_container.stream_container = render 'aspects/aspect_stream', stream: @stream - .col-md-2.rightBar + #right-sidebar-fixed-sub-background.col-lg-3.visible-lg + #right-sidebar-fixed-background.col-md-3.col-lg-2.hidden-sm.hidden-xs + .col-md-3.col-lg-2.hidden-xs.hidden-sm.rightbar #selected_aspect_contacts.section - .title.no_icon + .title %h5.stream_title = @stream.title .content diff --git a/features/step_definitions/aspects_steps.rb b/features/step_definitions/aspects_steps.rb index b29946ece..4bc883209 100644 --- a/features/step_definitions/aspects_steps.rb +++ b/features/step_definitions/aspects_steps.rb @@ -42,10 +42,10 @@ When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name| end When /^I select only "([^"]*)" aspect$/ do |aspect_name| - click_link 'My aspects' - within('#aspects_list') do - click_link 'Deselect all' - current_scope.should have_no_css '.selected' + click_link "My aspects" + within("#aspects_list") do + all(".selected").each {|node| node.find(:xpath, "..").click } + expect(current_scope).to have_no_css ".selected" end step %Q(I select "#{aspect_name}" aspect as well) end diff --git a/features/step_definitions/tag_steps.rb b/features/step_definitions/tag_steps.rb index c1a6bc46c..2f4cf160d 100644 --- a/features/step_definitions/tag_steps.rb +++ b/features/step_definitions/tag_steps.rb @@ -1,8 +1,8 @@ When(/^I unfollow the "(.*?)" tag$/) do |tag| within("#tags_list") do - li = find('li', text: tag) + li = find("li", text: tag) li.hover - li.find('.delete_tag_following').click + li.find(".delete-tag-following").click end - step 'I confirm the alert' + step "I confirm the alert" end diff --git a/spec/javascripts/app/views/aspect_view_spec.js b/spec/javascripts/app/views/aspect_view_spec.js index 254a89ab5..09f6eb7bd 100644 --- a/spec/javascripts/app/views/aspect_view_spec.js +++ b/spec/javascripts/app/views/aspect_view_spec.js @@ -10,7 +10,7 @@ describe("app.views.Aspect", function(){ }); it("should show the aspect selected", function(){ - expect(this.view.$el.children(".entypo-check").hasClass("selected")).toBeTruthy(); + expect(this.view.$el.find(".entypo-check").hasClass("selected")).toBeTruthy(); }); it('should show the name of the aspect', function(){ diff --git a/spec/javascripts/app/views/aspects_list_view_spec.js b/spec/javascripts/app/views/aspects_list_view_spec.js index 0e2715da2..25e87b0ec 100644 --- a/spec/javascripts/app/views/aspects_list_view_spec.js +++ b/spec/javascripts/app/views/aspects_list_view_spec.js @@ -18,13 +18,13 @@ describe("app.views.AspectsList", function(){ this.view.render(); }); - it('should show the corresponding aspects selected', function(){ - expect(this.view.$('.selected').length).toBe(1); - expect(this.view.$('.selected + a.selectable').text()).toMatch('Work'); + it("should show the corresponding aspects selected", function(){ + expect(this.view.$(".selected").length).toBe(1); + expect(this.view.$(".selected").parent().text()).toMatch("Work"); }); it("should show all the aspects", function(){ - var aspectSelectors = this.view.$(".entypo-check + a.selectable"); + var aspectSelectors = this.view.$(".entypo-check").parent(); expect(aspectSelectors.length).toBe(3); expect(aspectSelectors[0].text).toMatch("Work"); expect(aspectSelectors[1].text).toMatch("Friends");