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/sidebar.js b/app/assets/javascripts/app/views/sidebar.js
index d73dbf100..9a9f7d49e 100644
--- a/app/assets/javascripts/app/views/sidebar.js
+++ b/app/assets/javascripts/app/views/sidebar.js
@@ -1,7 +1,7 @@
// @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'
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/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/leftnavbar.scss b/app/assets/stylesheets/leftnavbar.scss
index 7d570d549..548405ce6 100644
--- a/app/assets/stylesheets/leftnavbar.scss
+++ b/app/assets/stylesheets/leftnavbar.scss
@@ -11,7 +11,7 @@
height: 100%;
}
-#leftNavBar {
+#left-navbar {
background: $left-navbar-background;
a {
color: $link-grey;
@@ -21,46 +21,54 @@
}
ul {
- margin: 0px;
- padding: 0px;
+ margin: 0;
+ padding: 0;
list-style: none;
&#stream_selection {
margin: 0px -15px; /* -15px overrides Bootstrap's default gutter width */
}
}
- .selected { color: $black; }
- .selected a { color: $black; }
+ .selected, .selected a { color: $black; }
.hoverable {
display: block;
- &.selected a, &.selected a:hover {
+ &.selected a, &.selected a:hover,
+ .followed-tags-sidebar a.hoverable.selected {
color: white;
background: #666;
}
}
- .all_aspects a.hoverable.selected, .followed_tags_sidebar a.hoverable.selected {
- color: white;
- background: #666;
- }
-
- .hoverable a, .all_aspects a.hoverable, .followed_tags_sidebar a.hoverable {
+ a.hoverable, li.hoverable {
padding: 10px 20px;
display: block;
font-weight: normal;
color: $link-grey;
border-bottom: 1px solid #ddd;
- &:hover, &:hover .entypo.check, &:hover + .action .entypo {
+ &:hover, &:hover a,
+ &:hover .entypo-check{
background-color: $blue;
color: $white;
}
+ &:not(:hover) [class^="entypo"] { visibility: hidden; }
+ .entypo-check.selected { visibility: visible; }
}
- .selectable {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
+ #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 {
@@ -80,76 +88,14 @@
text-overflow: ellipsis;
line-height: 25px;
- a {
- color: $black;
+ a {
+ color: $black;
font-weight: normal;
}
}
}
- #aspects_list {
- .hoverable {
- position: relative;
- }
- .selectable {
- padding-left: 40px;
- }
- }
-
- #aspects_list, #tags_list {
- background: $left-navbar-drawer-background;
- .hoverable > .action {
- visibility: hidden;
- margin: 0;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 200;
- padding: 10px 15px;
- border: none;
- }
- .hoverable:hover > .action {
- visibility: visible;
- background: none;
- }
- }
-
- #aspects_list {
- .selectable {
- padding-right: 40px;
- }
- .entypo.check {
- visibility: hidden;
- margin: 0;
- position: absolute;
- left: 20px;
- top: 10px;
- z-index: 200;
- &.selected {
- visibility: visible;
- }
- }
- .selected + a {
- color: #333333;
- }
- }
-
#tags_list {
-
- li {
- position: relative;
- }
-
- .selectable {
- padding-left: 30px;
- padding-right: 30px;
- }
-
- .delete_tag_following {
- font-size: 20px;
- line-height: 15px;
- }
-
#new_tag_following {
padding: 10px 20px 10px 30px;
}
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/sidebar.scss b/app/assets/stylesheets/sidebar.scss
index 16f0ac3b4..ea146ba3a 100644
--- a/app/assets/stylesheets/sidebar.scss
+++ b/app/assets/stylesheets/sidebar.scss
@@ -13,7 +13,7 @@
.right-sidebar-padder {
max-width: 400px;
}
-.rightBar {
+.rightbar {
padding-top: 20px;
background: $right-sidebar-background;
diff --git a/app/assets/templates/aspect_tpl.jst.hbs b/app/assets/templates/aspect_tpl.jst.hbs
index fae49f3b7..38c23ec22 100644
--- a/app/assets/templates/aspect_tpl.jst.hbs
+++ b/app/assets/templates/aspect_tpl.jst.hbs
@@ -1,12 +1,10 @@
-
+
{{#if selected}}
-
+
{{else}}
-
+
{{/if}}
-
- {{name}}
-
+ {{name}}
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/streams/main_stream.html.haml b/app/views/streams/main_stream.html.haml
index 07e52296f..ca71ebab8 100644
--- a/app/views/streams/main_stream.html.haml
+++ b/app/views/streams/main_stream.html.haml
@@ -26,7 +26,7 @@
.row
#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
- .col-lg-offset-1.col-lg-2.col-md-3#leftNavBar
+ #left-navbar.col-lg-offset-1.col-lg-2.col-md-3
#home_user_badge
= owner_image_link
%h4
@@ -41,14 +41,14 @@
= link_to t("streams.mentions.title"), mentioned_stream_path, rel: "backbone", class: "hoverable"
%li.all_aspects
= render "aspects/aspect_listings", stream: @stream
- %li.followed_tags_sidebar
+ %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-3.col-lg-2.rightBar
+ .col-md-3.col-lg-2.hidden-xs.hidden-sm.rightbar
#selected_aspect_contacts.section
.title
%h5.stream_title
diff --git a/features/step_definitions/tag_steps.rb b/features/step_definitions/tag_steps.rb
index c1a6bc46c..ce8916fcb 100644
--- a/features/step_definitions/tag_steps.rb
+++ b/features/step_definitions/tag_steps.rb
@@ -2,7 +2,7 @@ When(/^I unfollow the "(.*?)" tag$/) do |tag|
within("#tags_list") do
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'
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..d7228ea83 100644
--- a/spec/javascripts/app/views/aspects_list_view_spec.js
+++ b/spec/javascripts/app/views/aspects_list_view_spec.js
@@ -20,11 +20,11 @@ describe("app.views.AspectsList", function(){
it('should show the corresponding aspects selected', function(){
expect(this.view.$('.selected').length).toBe(1);
- expect(this.view.$('.selected + a.selectable').text()).toMatch('Work');
+ 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");